逐帧动画对比

这是我参与更文挑战的第3天，活动详情查看： 更文挑战

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画，下面来分析下 GIF 和雪碧图这两种实现方式优点和不足。

一、GIF

GIF 是一种图形交换格式，它的大致原理是，图片由许多像素组成，每一个像素都被指定了一种颜色，而这些像素综合起来就构成一个图片并且支持文本控制，多图像叠加以及多帧图像的动画播放。

优点：

• 几乎所有主流浏览器都支持 GIF
• 实现成本比较低，目前很多工具都可以实现
• 支持动画，允许某些像素透明，体积小，可以更好的在网络上传播

不足：

• 不支持半透明，支持颜色少，最多存储256色，不支持24bit彩色模式，图像比较复杂会有锯齿毛边
• 不支持控制播放、暂停、等交互操作
• 不停地播放 GIF 会引起页面周期性的绘制，CPU 和 GPU 需要不停地在工作，性能有损耗

实现方式：

• 设计师提供 GIF
• 视频转 GIT

示例：

GIF 的简单交互：

如果需求要能实现暂停和播放，可以通过其它插件来支持，比如使用插件 gifffer 来实现暂停和播放，具体原理是将GIF转成了canvas来实现一些交互操作，示例 Demo

二、雪碧图

CSS雪碧，即 CSS Sprite，是一种 CSS 图像合并技术，该方法是将多个图片合并到一张图片上，利用 CSS 或者 JS 来控制图片的定位来实现逐帧动画。

优点：

• 可减少加载图片对服务器的请求次数，降低服务器压力
• 可提高页面加载速度

不足：

• 维护成本较高，后期图片改动频繁的话
• 开发成本较高，拼图和实现动画计算，图片位置的坐标调整比较麻烦

实现方式：

CSS3

利用 CSS3 的 steps 属性切换雪碧图序列帧的方式形成动画效果，示例参考 Demo

JS

采用 JS 切换雪碧图序列帧的方式形成动画效果，示例参考 Demo

三、GIF 和雪碧图对比