1.什么是帧动画

• 所谓帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
• 由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。

2.常见的帧动画方式:

• GIF、CSS3 animation、 Javascript

3.GIF和CSS3 animation实现帧动画的不足

• 不能灵活的控制动画的暂停和播放。(GIF、CSS3 animation)
• 不能捕捉到动画完成的事件。(GIF)
• 不能对帧动画做更加灵活的扩展。(GIF、CSS3 animation)

4.JS实现帧动画的原理

• 如果有多张帧图片,用一个image标签区承载图片,定时改变image的src属性(不推荐，多个http请求)。
• 把所有动画关键帧绘制在一张图片里,把图片作为元素的background-image,定时改变元素的background-position属性(推荐)。

5.设计一个通用的帧动画库

• 需求分析
• 编程接口
• 调用方式
• 代码设计

6.设计一个通用的帧动画库(需求分析)

• 支持图片预加载
• 支持2中动画播放方式,及自定义每帧动画
• 支持单组动画控制循环次数(可支持无限次)。
• 支持一组动画完成,进行下一组动画。
• 支持每个动画完成后有等待时间。
• 支持动画暂停和继续播放
• 支持动画完成后执行回调函数

7.设计一个通用的帧动画库(编程接口)

• loadImage(imglist) //预加载图片
• changePosition(ele,positions,imageUrl) //通过改变元素的backgroun-position实现动画
• changeSrc(ele,imglist) //通过改变image元素的src
• enterFrame(callback) //每一帧动画执行的函数,相当于用户可以自定义，每一帧动画的callback
• repeat(times) //动画重复执行的次数,times为空时表示无限次
• repeatForever() //无限重复上一次动画，相当于repeat()，更友好的一个接口吧
• wait(time) //每个动画执行完成等待的时间
• then(callback) //动画执行完成后的回调函数
• start(interval) //动画开始执行,interval表示动画执行的间隔
• pause() //动画暂停
• restart() //动画从上一次暂停处重新执行
• dispose() //释放资源

8.设计一个通用的帧动画库(调用方式)

• 支持链式调用,我们期望动词的方式描述接口,调用方式如下:

var animation=require("animation");
    var demoAnimation=animation()
                        .loadImage(images)
                        .changePosition(ele,positions)
                        .repeat(2)
                        .then(function(){
                            //动画执行完成后调用此函数
                        });
    demoAnimation.start(80)

9设计一个通用的帧动画库(代码设计)

• 我们把"图片预加载-> 动画执行 ->动画结束" 等一系列操作看出一条任务链(数组)。
• 任务链有两种类型的任务:
• • a.同步执行完毕的。
• • b.异步定时执行的(通过计时器或者raf)。
• 记录当前任务链的索引。
• 每个任务执行完毕后,通过调用next方法,执行下一个任务,同时更新任务链索引值。