首页手记《原生 JS 实现帧动画库》(第一章知识点小结)

《原生 JS 实现帧动画库》(第一章知识点小结)

标签：

JavaScript

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设计一个通用的帧动画库(代码设计)