svg动画在公众号中的应用1
svg动画在公众号中的应用1
之前做过一篇推文，运用了一些svg小动画，效果如下：（动图比较长，了解交互请跳转查看）
以下为设计思路：
一、前期准备
Adobe Illustrator(AI软件)
一个好用的代码编辑器
谷歌浏览器
一个公众号
二、流程
上一篇文章已经介绍了如何将svg代码嵌入公众号图文信息中
首先还是要先在AI中绘制好元素，脚本比较复杂的情况下，我们可以一步一步来，增加图层。
源代码就不奉上了，因为有这么多哈哈哈-（当然大部分是路径）
下面是一些关键的动画效果
1、小球动画
<circle id="cir1" cx="375" cy="492.5" r="18.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"> <animateTransform attributename="transform" type="translate" begin="0s" dur="1s" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0" values="0 0;0 10;0 30;0 0;0 -30;0 -10;0 0" keyTimes="0;0.16;.33;.5;.66;.83;1" repeatCount="indefinite" fill="freeze" additive="sum"></animateTransform> <animateTransform attributename="transform" type="translate" begin="14s" dur="0.5s" values="0 0;-200 0" repeatCount="1" fill="freeze" additive="sum"></animateTransform> </circle> 复制代码
空心小球动画分成两部分，弹跳和左移，本质都是transform
动画属性：
attributename:要变化的元素属性名称type:类型begin:指动画开始的时间。begin="1s"指在第1s时执行，begin="1s;3s"只在第1s执行一次，在第3s再执行一次如果之前动画没走完，会立即停止从头开始），begin="click+1s"表示点击当前元素1s后执行
注意：因为公众号图文会过滤掉id，因此begin="id.click+3s"无法实现，如果想实现点A现B，可以将遮罩层和A编组。
dur:动画执行时间。
begin和dur时间值单位可以是"h"|"min"|"s"|"ms"
keyTimes:可以理解为CSS中的@keyframes，0～1之间的值，定义每段动画完成的时间，上面代码中keyTimes="0;0.16;.33;.5;.66;.83;1"表示0%，16%，33%，50%，66%，83%，100%，keyTimes中的帧数必须和values中的相同keySplines:该值用来具体定义动画执行时的贝塞尔曲线from,to,by,values:
from动画的起始值（和to相同时可以省略）； to动画的结束值（绝对）； by动画的相对变化值（相对）； values直接结合 attributeName 属性，来设置具体的值，每个值之间使用;分隔；
repeatCount:表示动画执行次数，可以是合法数值｜indefinite(无限循环)fill:表示动画间隙的填充方式。remove(默认，回到动画开始的地方)｜freeze(保持动画结束时的状态)additive:控制动画是否附加。replace(默认)｜sum(附加)accumulate:累积。none(默认)｜sum(动画结束时候的位置作为下次动画的起始位置)restart:支持的参数有：always(默认) |whenNotActive(动画正在进行的时候，是不能重启动画的) |never
2、文字动画
<g id="text1" opacity="0"> <animate attributename="opacity" begin="1s" dur="2s" values="0;0.8;1;0" keyTimes="0;0.5;0.75;1" repeatCount="1" fill="freeze"></animate> <animateTransform attributename="transform" type="translate" begin="2.5s" dur="0.5s" values="0 0;0 -20" repeatCount="1" fill="freeze" additive="sum"></animateTransform> <path d="M259.65,240.2H254v3.35h-1.8v-26.56h7.45V240.2z M257.85,238.32v-19.51H254v19.51H257.85z M265.74,234.15 c-1.19,4.25-2.52,8.21-3.96,11.91l-1.73-0.72c1.58-3.85,2.95-7.77,4.1-11.81L265.74,234.15z M265.63,227.78l-1.26,1.26 c-1.01-1.4-2.38-2.88-4.07-4.46l1.26-1.19C263.15,224.83,264.51,226.3,265.63,227.78z M266.28,218.06l-1.26,1.22 c-0.97-1.26-2.3-2.59-4-4l1.22-1.15C263.83,215.43,265.16,216.73,266.28,218.06z M271.53,213.78c-0.22,1.01-0.5,1.98-0.79,2.92 h12.09v1.84h-12.78c-1.01,2.41-2.34,4.43-3.96,6.01l-1.22-1.48c2.41-2.38,4.03-5.54,4.9-9.58L271.53,213.78z M269.16,230.51 c0.22-2.81,0.36-5.62,0.43-8.46h11.81c-0.07,3.17-0.14,6.01-0.22,8.46h2.45v1.8h-2.48c-0.11,2.84-0.18,5.11-0.25,6.84h2.05v1.69 h-2.16c-0.07,1.19-0.14,1.94-0.22,2.23c-0.22,1.15-0.65,1.98-1.3,2.56c-0.65,0.47-1.58,0.72-2.81,0.72h-2.56l-0.54-1.73 c1.04,0.04,1.98,0.07,2.81,0.07c0.58,0,1.12-0.11,1.62-0.29c0.5-0.29,0.86-0.86,1.08-1.76c0.04-0.25,0.11-0.86,0.18-1.8H267.9 c0.43-2.77,0.83-5.62,1.12-8.53h-3.35v-1.8H269.16z M270.02,239.15h9.11c0.07-1.73,0.14-4.03,0.22-6.84h-8.53 C270.6,234.8,270.34,237.06,270.02,239.15z M279.52,223.78h-8.24c-0.07,2.38-0.18,4.64-0.32,6.73h8.42 C279.42,228.5,279.45,226.23,279.52,223.78z M277.15,236.85l-1.15,1.19c-0.94-1.15-2.16-2.38-3.74-3.67l1.19-1.08 C274.92,234.44,276.14,235.62,277.15,236.85z M277.33,228.35l-1.19,1.15c-0.83-1.08-1.94-2.23-3.38-3.46l1.15-1.12 C275.28,226.09,276.39,227.2,277.33,228.35z"></path> <path d="M293.24,240.23c0.36,0.54,0.58,1.3,0.58,2.23c0,1.44-0.43,2.66-1.26,3.71c-0.83,1.01-1.91,1.69-3.28,2.05v-1.44 c0.94-0.29,1.66-0.79,2.16-1.51c0.5-0.65,0.72-1.4,0.72-2.27c-0.14,0.04-0.36,0.07-0.72,0.07c-0.5,0-0.94-0.18-1.3-0.54 c-0.36-0.36-0.54-0.79-0.54-1.3c0-0.58,0.14-1.04,0.5-1.37c0.36-0.36,0.83-0.5,1.44-0.5C292.27,239.37,292.81,239.66,293.24,240.23 z"></path> </g> 复制代码
文字动画分为两部分，透明度0-1-0，和位移动画，每个文字都会生成一个<path>，可以把相同效果的一句话编组，动画写在编组<g>标签里，这里比较麻烦的是时间调整的，所有的动画实际是在一个时间轴上，通过dur来控制先后执行。
3、点击形变动画
点击形变动画 即修改d,需要记录之前的路径和形变后的路径
<g id="cir2" opacity="0"> <animate attributename="opacity" begin="22.5s" dur="1s" values="0;0.8;1" keyTimes="0;0.75;1" repeatCount="1" fill="freeze"></animate> <animate attributename="opacity" begin="click+12s" dur="1.5s" values="1;0.8;0" keyTimes="0;0.75;1" repeatCount="1" fill="freeze"></animate> <path fill="#FFFFFF" d="M585,491.76c0,6.84-8.5,15.98-22.69,12.89c-6.35-1.38-13.41-4.64-18.66-5.01 c-4.88-0.34-7.64-4.19-7.64-7.37c0-6.84,13.41-11.35,26.31-12.38c5.57-0.45,10.46-0.21,14.44,2.58 C581.91,486.09,585,487.56,585,491.76z" id="click"> <animate attributeName="d" dur="10s" repeatCount="1" begin="click" fill="freeze" values="M585,491.76c0,6.84-8.5,15.98-22.69,12.89c-6.35-1.38-13.41-4.64-18.66-5.01 c-4.88-0.34-7.64-4.19-7.64-7.37c0-6.84,13.41-11.35,26.31-12.38c5.57-0.45,10.46-0.21,14.44,2.58 C581.91,486.09,585,487.56,585,491.76z;M578,494c0,3.16-1,10-15.69,10.66c-6.5,0.29-13.47-0.99-15.31-4.66c-2-4-1.49-6.04-1-9c1-6,6-12,15-13 c5.55-0.62,8,1,14,6C576.09,484.91,578,490,578,494z;M578,494c0,8.84-6.66,16.5-15.5,16.5c-4.52,0-8.73-2.01-11.77-5.15c-2.9-3-4.73-7.04-4.73-11.35 c0-4.06,1.51-7.76,4-10.58c2.93-3.32,7.22-5.42,12-5.42c4.3,0,8.2,1.69,11.07,4.45C576.11,485.36,578,489.46,578,494z" keyTimes="0;0.5;1" restart="never"></animate> </path> </g> 复制代码
逐级显示动画（要用到click+ns） click之后的事件需要层层嵌套（click事件实际上是加在编组上，外层元素的透明度会影响内层）
逐级消失最先消失的放最里面，从里向外；
逐级出现最先出现的放最外面，从外向里；
也就是需要编组一层套着一层
这里真正的难点在于形变后的动画begin时间都要以此次点击来算，因为设计有消失和出现的元素，不能把他们编到一个组里，因此运用到穿透触发。 原理：
touchstart：在这个dom或者冒泡的dom触摸立即触发，click：在这个dom或者冒泡的dom上触摸开始，且手指未在页面上移动（有些浏览器允许短暂移动），且在这个dom上手指离开屏幕，且触摸和离开屏幕间隔时间较短才能触发，大概300ms左右 （a标签也是click）
上层元素在300ms内快速移动开，会触发下层元素的click事件，从而达到穿透触发的效果；
事件触发顺序为toustart>touchend（大概200ms）>click
因此当我们点击时，这里的形变动画用的是click，之后元素的出现动画用的是toustart
代码比较复杂，只截了一部分
三、总结
在微信公众号图文里写动画确实会让代码量成倍增加，甚至不得不写大量重复的代码，所以比较考验逻辑和设计，有很多老师优秀作品里的代码都是数千甚至上万行，但黑科技排版已经成为各大品牌争相运用的潮流，使单一死板的推文更有趣。 排版这样一篇文章从写脚本到画图到动画实现我用了整整两天，用了200多个<animate>，让我对动画的细节有了更深入的体会，遇到很多坑然后用了一些奇奇怪怪的方法解决，这正是让我觉得前端有趣的地方。
https://juejin.cn/post/7019221393543790599