CSS3动画开发指南之逐帧动画

最近在公司开发的项目中需要用到多个图片逐帧动画的效果，参考了他人的博客，在这里写出来记录一下（主要是我对自己转头就马什么梅的记忆力没信心）

什么是逐帧动画

维基百科中的定义：
       定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。
简而言之，实现逐帧动画需要两个条件：（1）相关联的不同图像，即动画帧；（2）连续播放。

 

了解了什么是逐帧动画我们来看一下什么前端怎样实现

前端逐帧动画实现方案

目前常用的前端逐帧实现的方法大致有三种：GIF，JavaScript，css3 Animation。

（1）使用GIF  
       gif可以实现多个动画帧，由其自己本身实现动画和逐帧播放。

      好处非常明显，成本低，使用方便。

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

 

（2）使用JavaScript

JS 与 CSS3，一般是将动画帧放到背景图中。不同的是， JS 是使用脚本来控制动画的连续播放的：

1. 可以直接改变元素的 background-image

2. 也可以将动画帧合并成雪碧图，通过改变 background-position 来实现

（3）使用css Animation

CSS3 实际上是使用 animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放的。
在移动端，CSS3 Animation 兼容性良好，相对于 JS，CSS3 逐帧动画使用简单，且效率更高，因为许多优化都在浏览器底层完成。
因此在触屏页面中 CSS3 逐帧动画使用广泛，下文将对其进行详细介绍。
 

CSS3 逐帧动画的实现

（1）将动画帧合并为雪碧图
在触屏页面中，动画往往承担页面样式实现的角色（即不需要替换），因此我们会将图片放到元素的背景中（background-image）。
逐帧动画有不同的动画帧，我们可以通过更改 background-image 的值实现帧的切换，但多张图片会带来多个 HTTP 请求，且不利于文件的管理。
比较合适的做法，是将所有的动画帧合并成一张雪碧图（sprite），通过改变 background-position 的值来实现动画帧切换。因此，逐帧动画也被称为“精灵动画（sprite animation）”。

（2）使用 steps 实现动画播放
steps 指定了一个阶梯函数，包含两个参数：

1. 第一个参数指定了函数中的间隔数量（必须是正整数）；
2. 第二个参数可选，指定在每个间隔的起点或是终点发生阶跃变化，接受 start 和 end 两个值，默认为 end。

CSS3 逐帧动画使用技巧

（1）step-start 与 step-end
除了 steps 函数，animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end：

1. step-start 等同于 steps(1,start)：动画执行时以开始端点为开始；
2. step-end 等同于 steps(1,end)：动画执行时以结尾端点为开始。

（2）适配方案：rem+scale
我们知道，rem 的计算会存在误差，因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话，由于计算的误差，会出现抖动的情况。
那么在触屏页中，如何实现页面的适配？
这里小编提供一个思路：

1. 非逐帧动画部分，使用 rem 做单位；
2. 逐帧动画部分，使用 px 做单位，再结合 js 对动画部分使用 scale 进行缩放。

 

该篇文章参考：https://www.imooc.com/article/7687