强大的CSS3/JS:帧动画的多种实现方式与性能对比

Web动画形式

首先我们来了解一下Web有哪些动画形式

1\. CSS3动画
    Transform（变形）
    Transition（过渡）
    Animation（动画）
2\. JS动画（操作DOM、修改CSS属性值）
3\. Canvas动画
4\. SVG动画
5\. 以Three.js为首的3D动画

以上各种动画形式都可以制作出一种类型的动画，那就是帧动画，也叫序列帧动画，定格动画，逐帧动画等，这里我们统一用帧动画来表述。

应用场景

帧动画一般用来实现稍微复杂一点的动画效果，同时希望动画更细腻，设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容，我们一般用帧动画来做页面的Loading，小人物，小物体元素的简单动画。我们想象中的帧动画应该有以下几个特点：

1. 可以自由控制播放、暂停和停止
2. 可以控制播放次数，播放速度
3. 可以添加交互，在播放完成后添加事件
4. 浏览器兼容性好

素材准备

帧动画的素材一般是先由设计师在PS中的时间轴上设计好了，然后导出图片给前端人员，PS制作时间轴动画一般是用来制作稍微简单的动画，操作简单，方便。

或者是由设计师在AE的时间轴进行设计，因为AE内置了更丰富的动作效果，比如转换，翻转之类的，AE可以帮助我们实现更复杂的效果，然后再导出图片给前端人员。

这里帧动画素材的要求，每一帧的图片最好是偶数宽高，偶数张，最好周围能有一些留白。

实现方案

将目前想到的解决方案梳理如下图，同时我们将对每种方案进行详细介绍。

一、GIF图

我们可以将上面制作的帧动画导出成GIF图，GIF图会连续播放，无法暂停，它往往用来实现小细节动画，成本较低、使用方便。但其缺点也是很明显的：

1. 画质上，gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；
2. 交互上，不能直接控制播放、暂停、播放次数，灵活性差；
3. 性能上，gif 会引起页面周期性的绘画，性能较差。

二、CSS3帧动画

CSS3帧动画是我们今天需要重点介绍的方案，最核心的是利用CSS3中Animation动画，确切的说是使用animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放。

帧动画的实现原理是不断切换视觉内图片内容，利用视觉滞留生理现象来实现连续播放的动画效果，下面我们来介绍制作CSS3帧动画的几种方案。

（1）连续切换动画图片地址src（不推荐）

我们将图片放到元素的背景中（background-image），通过更改 background-image 的值实现帧的切换。但是这种方式会有以下几个缺点，所以该方案不推荐。

• 多张图片会带来多个 HTTP 请求
• 每张图片首次加载会造成图片切换时的闪烁
• 不利于文件的管理

（2）连续切换雪碧图位置（推荐）

我们将所有的帧动画图片合并成一张雪碧图，通过改变 background-position 的值来实现动画帧切换。分两步进行：

步骤一： 将动画帧合并为雪碧图，雪碧图的要求可以看上面素材准备，比如下面这张帧动画雪碧图，共20帧。

[图片上传失败…(image-91f7b7-1556627487319)]