代码嵌入公众号图文信息中的设计思路与思路

狐狸嘿嘿

10-15 06:20阅读 686

关注

svg动画在公众号中的应用1svg动画在公众号中的应用1

之前做过一篇推文，运用了一些svg小动画，效果如下：（动图比较长，了解交互请跳转查看）

以下为设计思路：

一、前期准备二、流程

上一篇文章已经介绍了如何将svg代码嵌入公众号图文信息中

首先还是要先在AI中绘制好元素，脚本比较复杂的情况下，我们可以一步一步来，增加图层。

源代码就不奉上了，因为有这么多哈哈哈-（当然大部分是路径）

下面是一些关键的动画效果

1、小球动画

                            复制代码

空心小球动画分成两部分，弹跳和左移，本质都是transform

动画属性：

注意：因为公众号图文会过滤掉id，因此begin="id.click+3s"无法实现，如果想实现点A现B，可以将遮罩层和A编组。

begin和dur时间值单位可以是"h"|"min"|"s"|"ms"

from动画的起始值（和to相同时可以省略）；to动画的结束值（绝对）；by动画的相对变化值（相对）；values直接结合attributeName属性，来设置具体的值，每个值之间使用;分隔；

2、文字动画

                                                  复制代码

文字动画分为两部分，透明度0-1-0，和位移动画，每个文字都会生成一个

，可以把相同效果的一句话编组，动画写在编组标签里，这里比较麻烦的是时间调整的，所有的动画实际是在一个时间轴上，通过dur来控制先后执行。

3、点击形变动画

点击形变动画 即修改d,需要记录之前的路径和形变后的路径

                                                                                       复制代码

逐级显示动画（要用到click+ns）click之后的事件需要层层嵌套（click事件实际上是加在编组上，外层元素的透明度会影响内层）

也就是需要编组一层套着一层

这里真正的难点在于形变后的动画begin时间都要以此次点击来算，因为设计有消失和出现的元素，不能把他们编到一个组里，因此运用到穿透触发。原理：

上层元素在300ms内快速移动开，会触发下层元素的click事件，从而达到穿透触发的效果；

事件触发顺序为toustart>touchend（大概200ms）>click

因此当我们点击时，这里的形变动画用的是click，之后元素的出现动画用的是toustart

代码比较复杂，只截了一部分

三、总结

在微信公众号图文里写动画确实会让代码量成倍增加，甚至不得不写大量重复的代码，所以比较考验逻辑和设计，有很多老师优秀作品里的代码都是数千甚至上万行，但黑科技排版已经成为各大品牌争相运用的潮流，使单一死板的推文更有趣。 排版这样一篇文章从写脚本到画图到动画实现我用了整整两天，用了200多个，让我对动画的细节有了更深入的体会，遇到很多坑然后用了一些奇奇怪怪的方法解决，这正是让我觉得前端有趣的地方。