图片帧动画

一般来说实现帧动画的方式有3种：

----GIF

----CSS3 animation

----JS

GIF和CSS3 animations实现帧动画
1.不能灵活的控制动画的暂停和播放(GIF、CSS3 animation)
2.不能捕捉到动画完成的事件（GIF）
3.不能对帧动画做更加灵活的扩展(GIF、CSS3 animation)
JS实现帧动画的原理
1.如果有多张帧图片，用一个image标签去承载图片，定时改变image的src属性（不推荐使用）
2.把所有的动画关键帧绘制到一张图片里，把图片作为元素的background-image,定时改变元素的background-position属性（推荐）

设计一个通用的帧动画库
设计一个通用的动画库
1.支持图片预加载。
2.支持2种动画播放方式，及自定义每帧动画。
3.支持单组动画控制循环次数(可支持无限次)
4.支持一组动画完成，进行下一组动画。
5.支持每个动画完成后有等待时间
6.支持动画暂停和继续播放
7，支持动画完成后执行回调函数
设置一个通用动画库（编程接口）
1.loadImage(imglist)//预加载图片
2.changePosition(ele,positions,imageUrl)//通过改变元素的background-position实现动画
3.changeSrc(ele,imglist)//通过改变image元素的src
4.enterFrame(callback)//每一帧动画执行的函数，相当于用户可以自定义每帧动画的callback
5,repeat(times)//动画重复执行的次数，times为空表示无限次
6，repeatForever()//无限重复上一次动画，相当于repeat(),更友好的一个接口
7,wait(time)//每次动画执行完后等待的时间
8,then(callback)//动画执行完成后的回调函数
9，start(interval)//动画开始执行，interval表示动画执行的间隔
10，pause()//动画暂停
11.restart()//动画从上一次暂停处重新执行
12，dispose()//释放资源
调用方式：
1.支持链式调用，我们期望动词的方式描述接口，调用方式如下：
var animation=reqiure("animation");
var demoAnimation=animation().loadImage(images).changePosition(ele,postiona).repeat(2).then(function(){
//动画执行完成后调用次函数
})
demoAnimation.start(80);
1.我们把"图片预加载"-》动画执行-》动画结束 等一些列操作看成一条任务链（数组）
任务链有两种类型的任务：
a.同步执行完毕。
b.异步定时执行的（通过计数器或者raf）

 

 

 

 

 

 

 

 

 

 

 

 

 

参考地址：https://github.com/ustbhuangyi/animation 来源muke

转载于:https://www.cnblogs.com/zhihou/p/7986632.html