3 css 奖品出现弹出动画_手把手教你H5实现工厂游戏的CSS动画效果「实践」

作者：吴冠禧 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进行操作。它是未来对网络上动画化的支持最有效的方式之一，它使浏览器可以进行自己的内部优化。但是兼容性较差。