点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
作者：徐桑
前言
在增长营销业务中，有各种玩法的环节，对于一个做增长的前端来说，动画是一个很难绕过的话题。对于我来说，不愿意花这么长时间到一个投入大，产出不确定的工作中，因为往往这类需求都是在你没有防备的时候突然出现，然后开始倒排需求。
那么抛开排期不谈，在一个正常的工作流程中，如何实现个酷炫的动效呢？首先，设计和交互要描述出他想要的动画，前端要评估是否能实现动画，接着前端去实现动画，最后设计还要验收走查动画是否达到他的标准。
想到这，我已经汗流浃背了。功能都来不及开发了，我还管什么动画呢。在古茗的C端团队早期，我们也是经历过这种刀耕火种的时代的，在小程序里用 canvas 纯手写动画，还得解决小程序里各种奇奇怪怪的兼容问题。
为了提升效率，为了优化用户体验，为了更好的团队协作，为了每天按时下班，我们就开始想办法了。
业务早期
我们C端团队在小程序内做了一些小游戏用于抽奖场景，遇到了不少的挑战，例如扭蛋机，由于是纯手写，需要自己实现扭蛋机的滚动体积碰撞和运动轨迹计算。之后又做了刮刮乐游戏，解决了某些机型手指滑动刮奖区卡顿问题。春节红包活动中，为了模拟微信红包的开启动画，我们还用 css 实现一个3D的金币旋转动效。
如何提升效率
在以前的传统流程中，设计师软件里做完动画，要么需要导出序列帧再到 PS 里生成 GIF 文件，要么就是导出序列帧生成雪碧图或者转换成 APNG 文件，中间还要涉及图像压缩、监测色值变化、导出效果等等。最糟心的是，交付之后运行起来发现掉帧还要再回炉重造，之后整个流程再来一遍或多遍。光是这样描述一下都让人倍感心累。
工作量和痛苦一样是不会减少的，只会转移，那为什么不换个思路，把工作量转移到设计身上呢，选一款和设计可以高效协同的方案。首先我们让设计师用 AE 这些专业软件去设计动画，然后导出成一份描述动画的产物，最后前端在 web 端用动画执行引擎去还原设计师想要的动画。
这样一来设计师所见即所得，他设计的动画近乎百分比还原，不需要自己去导出各个资源。前端开发也不用费尽心思去实现各种动效。基于这个思路，我们先后尝试用了galacean Effect 和 lottie 在业务中实现各种动画。
技术选型
最初我们使用了支付宝开源的动画库 galacean Effects，设计师在 galacean Effects 的网页端通过各种电商场景的动画模版来修改制作动画，定稿后导出 json 文件，开发拿到json文件后使用 galacean Effects 提供的js库渲染动画。
因为在微信的小程序中出现了各种兼容性问题，后面一次活动我们又尝试了 lottie 这 个强大的动画库，设计在AE中开发动画，使用 Ae 的 Bodymovin 插件导出 json，开发拿到 json 后使用 lottie 的 web 端播放器去渲染动画。
| 渲染机制 | 微信小程序中的兼容性 | 平台支持 | 事件系统 | 资源动态替换 | 设计端编辑器 | |
|---|---|---|---|---|---|---|
| galacean Effects | webgl | 一般 | 跨平台 | 支持（完整解决方案） | 支持（api支持） | 自带网页编辑器 |
| Lottie | svg/canvas/html | 较好 | 跨平台 | 支持（自己监听） | 支持（命令式替换） | AE、figma |
业务中实践
集卡活动
在设计侧，得益于 galacean Effects 丰富的电商场景的动画模版，设计师选取了抽卡场景的模版并改动了动效适配我们本次的活动，节省了从0开始设计的时间。
在开发侧。由于导出的 json 就是描述动画的一段协议，所以我们只要改动json里的特定字段就能改变动画，例如某张图片，某个文字。在活动里，用户抽到了什么卡和得到了什么奖品都是不确定的，所以我们拿到接口返回后，替换了 json 里的图片资源，并且把奖品名也修改了，然后再进行播放，就可以实现一段动画适配所有中奖奖品的动效。
新人宝箱
新人宝箱中，有一个奶茶的杯子，有三种不同的水位线，动画效果是从一个水位涨到下一个水位，并且终态后水波要不停循环播放。本次我们使用了lottie的特定帧播放的功能，先让水位涨上来，然后循环水波的动画从10帧到13帧无限循环播放。
踩坑
容器选择
营销需求尽量不要在原生的小程序里开发，选用在小程序里用webview加载H5页面，H5有非常多的优点
动画的兼容性好 原生页面无法快速迭代，依赖发版和审核，H5可以快速迭代，原生依赖发版就代表着要考虑用户小程序版本没有更新的问题，要做兜底方案 做原生的页面影响包体积大小，即使放入分包也得有加载分包的时间 做h5可以单独多渠道投放，不仅仅在小程序端 如果平台封禁，比如微信封杀，可以迅速响应
当然也有一些非常致命的缺点
微信的分享和订阅无法在H5中直接唤起组件，需要做一个原生的中间页 支付页面也需要跳转至原生页面 无法做成沉浸式的头部设计，因为H5顶部一直会有一个白色的navbar
替换本地资源
各个平台导出的json中，静态资源都是本地的，或者最多把图片转化成base64，在实际使用中我们需要把json中的本地图片转成cdn上的地址。
如果是自己替换那就是一个很恐怖的工作量，因为设计可能会不停改动效，每次都是新的json，每次都需要我们自己去替改json。一开始我们做了一个node的本地脚本去做这件事，后面发现效率还是很低，因为上传资源这件事还得自己手动。
于是我们把这个功能放在了公司上传静态资源的后台中，只要把lottie的文件上传，我们就识别json里的静态资源指向的文件，并且自动把这些文件上传至cdn，把json里的静态资源全部替换成远程地址，最终上传这个json。
体验优化
做好图片的压缩，避免动画加载过慢。
做好抽奖接口较慢的体验优化，活动的流量可能是爆发性增长的，我们需要考虑接口的滞后性，可以把动画分成两段播放，在点击抽奖接口没有返回的时候播放第一段动画，并且一直循环这个动画，在接口返回后继续播放后一段结果动画。
错误降级
不是所有用户的机型都能正常播放动画的，例如我们碰到过用户手机打开的进程过多，显存不足，动画显示失败。也不是所有用户的网络都是正常的，例如在地下室的 iphone，遇到一些弱网或者手机兼容性问题的时候我们需要做好降级的措施，在 galacean Effects 中自带了降级的事件监听，但是lottie需要自己去监听降级，于是我们封装了一套错误降级方案，监听每一个静态资源加载完成，遇到加载失败的情况就触发兜底策略，并且往埋点平台上报一个错误，以便于线上问题的排查。
总结
现在的前端动效方案层出不穷，并不是说最主流最强大的库就能解决当前的问题。在日常的业务开发中，只有找到合适自己的方案才是最有效的的手段。选择一种方案在业务中解决当前的痛点，遇到问题并解决问题，也是前端工程师自我提升的重要一环，希望本篇文章能让大家看了之后有所收获。
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍
