公众号SVG动画交互实战代码
9 浏览量
2020-11-20
12:37:15
上传
评论 1
收藏 246KB PDF 举报
公众号公众号SVG动画交互实战代码动画交互实战代码
越来越多的公众号在图文消息中加入了SVG动画交互效果，SVG支持事件触发动画，相对于单独做一个H5而言，由于公众号
消息依托于微信服务器，为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例，剖析下里面的效果是
怎样实现的。
苹果公众号SVG交互
动画主要分为两屏，第一屏出现闪动文字提示用户点击交互，用户点击后第一屏动画消失接着播放第二屏的gif动画，最后画
面停止在产品图片帧上。
1.首先构建第一屏动画：首先构建第一屏动画：
1.1 SVG的基本结构的基本结构
<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>
先来介绍viewBox属性
viewBox=”x, y, w, h”
x、y 控制SVG内所有元素的相对位置。w，h用来控制svg宽高，这里的宽高并不是svg元素的dom尺寸，而是svg的内分辨
率，受svg的width，height和preserveAspectRatio等属性值影响。
preserveAspectRatio=”xMinYMin meet”
preserveAspectRatio属性用来设置viewBox的缩放和对齐方式，xMinYMin meet的意思是，根据视口的宽高进行等比例缩放，
这里的视口就是指width和height值组成的矩形区域。
1.2 加入闪动文字加入闪动文字
<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
<text x="340" y="1750" fill="#fff" >>点一下屏幕，有请主角<</text>
</svg>
设置文字的位置和颜色属性。
1.3 为文字添加动画，这里需要用到为文字添加动画，这里需要用到 <g>和和<animate>标签标签
<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
<g>
<animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
<text x="340" y="1750" fill="#fff" >>点一下屏幕，有请主角<</text>
</g>
</svg>
评论0