初尝微信公众号正文页SVG交互

首先注意：

1.微信公众号内嵌svg不能有id

2.不能有<style><script><a>标签。

3.标签里的background的url()里，地址不能加引号，单引号双引号都不行，否则会被微信编辑器过滤掉。

还有人说的微信Android客户端的公众号正文页里点击元素，进行移动动画后，元素可能会出现奇怪的边框。需要给涉及到的元素的<g>设置style="outline:none"，包括<g>内的所有子<g>。

最上层显示的东西，放在最里层用g标签包着

<g>
	<animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0;1" repeatCount="indefinite"/>
	<text x="372" y="390" fill="#A2A2A2" style="font-size: 60px">点击拍照</text>
</g>

这是文字闪烁效果，根据opacity 1;0;1的无限变化

然后往外层包裹

<g>
	<!-- 初始背景 -->
	<animate attributeName="opacity" begin="click" dur="0.5s" values="1;0" fill="freeze" restart="never"></animate>
	<rect x="0" y="0" fill="#fff" width="1334" height="3052"></rect>
	<image overflow="visible" width="1334" height="2216" href="./svgimg/bg1-1.png"></image>
	<g>
		<animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0;1" repeatCount="indefinite"/>
		<text x="372" y="390" fill="#A2A2A2" style="font-size: 60px">点击拍照</text>
	</g>
</g>

animate 效果会作用于所在g标签，所以会在begin="click"，就是点击的时候会把这里的全部opacity变为0

fill="freeze" 表示动画结束时保留后者效果

restart="never" 表示再次点击不再重新执行动画

这里的rect白色背景是做的这个遮罩

然后

<g>
	<!-- 遮罩1 -->
	<animate attributeName="opacity" begin="click+2" dur="1s" values="1;0" fill="freeze" restart="never"></animate>
	<image transform="translate(0,397)" overflow="visible" width="1334" height="290" href="./svgimg/mask1-1.png"></image>
	<g>
		<!-- 初始背景 -->
		<animate attributeName="opacity" begin="click" dur="0.5s" values="1;0" fill="freeze" restart="never"></animate>
		<rect x="0" y="0" fill="#fff" width="1334" height="3052"></rect>
		<image overflow="visible" width="1334" height="2216" href="./svgimg/bg1-1.png"></image>
            <g>
                <animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0;1" repeatCount="indefinite"/>
                 <text x="372" y="390" fill="#A2A2A2" style="font-size: 60px">点击拍照</text>
            </g>
	</g>
</g>

这是点击事件执行后从上到下区域的文字内容逐渐显示，多个遮罩往外层一个个嵌套

有人说

begin=click的元素和设置begin=click+0.5的元素的层级关系。首先，click元素和click+0.5元素要处于同一个<g>内；其次，click+0.5元素层级要比click元素的层级更深，所以能够正确的对应同一个click事件。但是我这里begin=click在最里层居然也可以的

剩余遮罩就不一条条在这里写了，一个个往外层套就完事了

完了再外层我有一个线条的动画

<g>
	<!-- 黑线 -->
	<animate attributeName="stroke-dasharray" attributeType="XML" from="0,3820" to="3820,3820" begin="click" dur="10s" fill="freeze" restart="never"/>
	<path fill="none" stroke="#070001" stroke-width="2" d="xxxxxxx"/>
    <!-- 这里省略上面的内容 -->
</g>

线条是用我拙劣的钢笔手法在Illustrator （AI）自己描边（不填充）的，一笔勾完才能只有一个path，然后导出svg，复制path到这里，注意导出SVG的时候要进行一下设置

把Styling选择为Presentation Attributes，这样导出的SVG就不含有<style>，而且元素的样式也会通过标签属性进行设置，而不使用style内联css

from="0,3820" to="3820,3820"是怎么来的？

var obj = document.querySelector("path");
var length = obj.getTotalLength();

console.log(length)

临时借用下js找的

然后在发表文章时（注意图片需要先上传到微信，用线上地址）F12直接编辑代码，把svg代码贴进去

本地好好的，准备在微信发布的时候出事了。。。

<animate attributeName="stroke-dasharray" attributeType="XML" from="0,3820" to="3820,3820" begin="click" dur="10s" fill="freeze" restart="never"/>

保存时，这行被微信吃了，其他的animate都好好的，我的线条动画出不来了。。。。我现在有很多问号？？？？连微信文档也没找到，不知道这过滤规则是什么？？？？搞了好久我放弃了，有木有哪位大哥懂的求教。。。。

番外，看见别人有个动画，好奇咋搞的

经研究，首先这个人的走路动画是在一张大图上放多个人的图，就像以前放电影片子不停的切换一张张图就成了影片那样。这里就是变换transform中translate就动起来了，然后向下左右移动用的animateMotion path

初尝微信公众号正文页SVG交互

猜你喜欢