逐帧动画在H5中的使用浅析

随着H5技术的发展，简单地在H5中使用一些补间动效已经不能满足项目需求，其原因在于补间动画的简单位置和空间变换不够精细。因此，这时候需要使用逐帧动画来替代。而在CSS中使用逐帧动画其核心是。

逐帧动画的定义

是最接近原始动画定义的一种动画形式。其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

逐帧动画在CSS中的实现

逐帧动画在CSS中实现需要两个重点方面：和

精灵图

或者是将不同的图形元素合并到一张图片上，通过不同的定位机制，而显示不同图像的一种图片形式。而在序列帧里面，精灵图就是按照帧播放的顺序将每个单帧的图片按照一定规则的矩阵排列。并且，在播放时按照一定的定位规则和播放速率去改变从而形成动画效果。

常见的金币旋转动画精灵图

其实，精灵图的制作难点在绘制过程，每一帧都会跟前一帧不相同，而合成精灵图只需要按照顺序排列和导出就可以了。这里没有技术难度，但是如果帧数多就不太适合用手动排列，文末介绍了一个自制工具，可以方便地生成精灵图。

steps()函数

是序列帧执行的核心函数，它的主要作用就是将中定义的动画帧由连续执行转化为不连续，如果用数学图形来做类比就是由曲线图转变为散点图。

如果觉得不好理解，我们就先看看它的语法定义：

其中有两个参数和

这个参数的含义是将中定义的每帧之间分成多少份来执行，例如，定义了一个从0%~100%的动画，那么如果设置参数为，那么就是将0%~100%的动画分成5份进行逐帧播放。但是，因为序列帧的特殊性，每一帧的画面都不同，所以这里的参数将一般设定为。那么就等效于每次播放一帧。

这个参数不是太好理解，它有两个值和，其中是默认值。它简单理解就是丢弃哪一帧：如果是，那么就是丢弃第一帧，上来就从第二帧开始播放;如果是，那么就是丢弃最后一帧，当播放到倒数第二帧时则停止。

代码示例

总结

从上述示例可以看出，在进行逐帧动画的制作时，关键部分在于排布好，并且编写好相应的关键帧定位数值，而在中，steps函数的设定可以直接固定为，然后用和来控制动画结束后的行为。

后记

在使用序列帧的过程中不免会使用和对应的CSS的代码，如果手动去处理会很繁琐，于是笔者自己撸了一个创建精灵图和对应CSS代码的工具——Keyframes.复制下面地址，在电脑上打开就可以使用：

另外如果对它的源代码感兴趣，也可以去Github上围观，如果觉得写得还不错，可以给我个✨，仓库地址如下：

（本文完）

长按上面的二维码

关注【开源说】公众号