作者:吴冠禧 WecTeam
转发连接:https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g
0 契机与背景
今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发。用户可以通过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”,既能趣味造物,又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。
活动在上线后不久,PV 达到千万的量级,引人注目。有不少前端同学好奇里面涉及到的动画实现,文本应运而生。
「京喜工厂」项目包括了微信小程序原生页面和H5页面这两个平台,项目中使用了大量的 CSS 动画,在两个平台均可完美运行,尚未发现明显的兼容性问题。
本文就部分所涉及到的动画效果进行复盘和总结。在真实的项目实战中,手把手教你深入学习 CSS 动画的原理和实现细节。
「京喜工厂」活动首页的效果如下(截图演示):
0.0 计算机动画原理
动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因 视觉暂留 产生错觉。要达成最基本的视觉暂留效果至少需要 10帧/秒 ,普通电影是 24帧/秒 , 普通显示器刷新频率是 60帧/秒。
Animexample
下面的两个Gif都是用相同的6帧组成,但是播放速度不一样,10帧/秒就有点动画的效果,2帧/秒就会有卡顿的感觉。
10帧/秒:2帧/秒:
1 CSS 能做多复杂的动画?
1.1 动画展示
京喜工厂小人走路动画(4倍速播放):
京喜工厂小人走路动画(4倍速播放)
1.2 动画描述与分析
整个动画大体上就是小人按照从右侧进入工厂,绕着工厂内一圈的方式最后从右侧出去:
京喜工厂小人路径
走路过程中会有走路的动作:
走路的动作
注意从右走到左时吗,小人朝向右;从左走到右时,小人朝向左:
朝向
路径过程中会有几个驻留点,每个点驻留一小段时间,做工作中的动作:
工作中的动作
2 为什么要用 CSS 做复杂动画?(竞品对比 SVG 、Javascript 、CSS)
我们先来对比一下。
2.1 SVG
SVG 原生支持 SMIL(Synchronized Multimedia Integration Language), SMIL 允许你:
(1)变动一个元素的数字属性(x、y……)
(2)变动变形属性(translation或rotation)
(3)变动颜色属性 || (已废弃)
(4)物件方向与运动路径方向同步(路径动画)
其实都算是常规的动画能力,但是配合一些 SVG 专有的特性会产生一些奇妙和效果,例如 描边动画 就是利用 stroke-dasharray 和 stroke-dashoffset 实现的。另外,同为路径动画 SMIL 的 就比 CSS 的 offset-path 兼容性好很多。
caniuse-animateMotion
微信小程序:微信小程序不支持 SVG 及 SMIL 。
2.2 Javascript
理论上, Javascript 能做任何动画。一般来说 Javascript 动画可以分为 操纵 DOM 属性的动画 和 操纵 canvas api 的动画,这两种都的原理都是通过window.requestAnimationFrame() 或者 window.setTimeout() 这类时间控制函数实现每 16.7ms 显示一帧画面,从而达成 60帧/秒 的动画。另外,还有 Web Animations API,将浏览器动画引擎向开发者打开,并由JavaScript进行操作。它是未来对网络上动画化的支持最有效的方式之一,它使浏览器可以进行自己的内部优化。但是兼容性较差。
<