Skip to content

bluefly1234/Animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

一:常见帧动画存在的问题

1.GIF 和 CSS3 Animation

(1)不能控制动画的暂停和播放
(2)不能捕捉完成事件
(3)不能对帧动画做灵活扩展

二:js帧动画实现的原理

改变background-position位置来实现

三:实现的功能

1.支持功能

(1).图片预加载
(2).2种动画播放方式和自定义每帧动画
(3).单组动画控制循环次数(可无限次循环)
(4).一组动画完成后,进行下一组动画
(5).每个动画完成后有等待时间
(6).动画暂停和播放
(7).动画完成后回调函数

2.编程接口

(1).loadImg(imgList) //预加载图片
(2).changePosition(ele, positions, imgUrl) //改变background-position位置来实现
(3).changeSrc(ele, imgList) //通过改变元素的src
(4).enterFrame(callback) //每一帧动画执行的函数
(5).repeat(times) //空表示无限次
(6).repeatForever() //无限次执行上一次的动画,相当于repeat()
(7).wait(time) //每个动画完成后等待的时间
(8).then(callback) //动画完成后执行的回调
(9).start(interval) //动画开始执行
(10).pause() //动画暂停
(11).restart() //动画恢复(从上一次暂停处从新执行)
(12).dispose() //释放资源

3.调用方式

支持链式调用,调用方式如下
    var animation = require("animation");
    var demoAnimation = animation().loadImg(images).changePosition(ele,positions).repeat(2).then(
            function(){}
        );
    demoAnimation.start(80)

About

帧动画库 (frame animation libraries)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published