前面的话

帧动画是将动画动作分解为“连续关键帧”的动画，即在时间轴的每一帧上逐帧绘制不同的内容并连续播放。因为是逐帧绘画，所以帧动画有很大的灵活性，几乎可以表达任何你想要的东西。本文将详细介绍javascript框架动画

摘要

[分类]

框架动画有三种常见的方式，包括gif、CSS3动画和javascript

Git和CSS3动画无法灵活控制动画的暂停和播放，也无法更灵活地展开帧动画。此外，gif不能捕捉动画完成的事件。因此，一般使用javascript来实现帧动画

[原则]

js实现帧动画有两种方法

1.如果有多帧动画图片，您可以使用图像标签来携带图片，并定期更改图像的src属性(不推荐)

2.在一张图片中绘制所有动画关键帧，将图片作为元素的背景图像，并定期更改元素的背景位置属性(推荐)

因为第一种方法需要使用多个HTTP请求，所以通常建议使用第二种方法

[示例]

以下是使用帧动画的示例

Div id=' rabbit'/div按钮id=' BTN '暂停移动/button script var URL=' rabbit-big . png '；var positions=['0，-854 '，'-174 -852 '，'-349 -852 '，'-524 -852 '，'-698 -852 '，'-873-848 ']；var ele=document . getelementbyid(' rabbit ')；var oTimer=nullBTN . onclick=function(){ if(BTN . innerhtml=='开始移动'){帧动画(ele，positions，URL)；Btn.innerHTML='暂停移动'；} else { cleartime out(oTimer)；Btn.innerHTML='开始锻炼'；} }frameAnimation(ele，positions，URL)；function frameAnimation(ele，positions，URL){ ele . style . background image=' URL(' URL ')'；ele . style . background repeat=' no-repeat '；var索引=0；函数run(){ var pos=positions[index]。拆分(“”)；ele . style . background position=pos[0]“px”pos[1]“px”；指数；if(index=positions . length){ index=0；} oTimer=setTimeout(运行，80)；} run()；}/脚本通用帧动画

让我们设计一个通用的框架动画库

[需求分析]

1.支持图像预加载

2.支持两种动画播放模式，自定义每一帧动画

3.支持一组动画来控制循环时间(可以支持无限次数)

4.支持完成一组动画并继续下一组动画

5.支持每个动画完成后的等待时间

6.支持动画暂停和继续播放

7.动画完成后支持回调函数

[编程接口]

1.loadImage(imglist)//预加载图片

2.改变位置(元素、位置、图像)//通过改变元素的背景位置来实现动画

3.通过改变图像元素的Src

4.enterFrame(回调)//每个帧动画执行的功能相当于用户可以为每个帧动画定制的回调

5.重复次数//动画重复的次数。当时间是空的，它意味着无限的时间。

6.repeatForever()//无限重复最后一个动画，相当于repeat()

7.等待(时间)//每次动画执行完成后等待的时间

8.然后(回调)//动画执行完成后的回调函数

9.开始(间隔)//动画开始执行，间隔表示动画执行的间隔

10.暂停()//动画暂停

11.restart()//从最后一次暂停开始重新执行动画

12.dispose()//释放资源

[调用方法]

支持链式调用，用动词描述接口

[代码设计]

1.预加载图片-