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. 也可以将动画帧合并