如何用js实现灵活的帧动画 - animation.js
演示地址：http://localhost:8800/pluginAct/index.html?page=animateDemo
我们知道CSS3的属性animate配合动画@keyframes可以实现帧动画，但是它不够灵活，处理麻烦。本文将从两种方式上来实现一个帧动画效果，至于工作中用哪种，交由大家自己取舍。
代码示例
一张100*500的雪碧图box.png
CSS3动画事件
至于animation中的steps这里不再细讲
CSS3实现帧动画及交互
html部分
css部分
#box{
width:100px;height:100px;background-image:url('box.png');
background-repeat: no-repeat;background-size:100%;
animation: mymovesteps(1, start)1s1;
}
@keyframesmymove {
0% {
background-position:00;
}
25% {
background-position:0-100px;
}
50% {
background-position:0-200px;
}
75% {
background-position:0-300px;
}
100% {
background-position:0-400px;
}
}
javascript部分
let$dom =document.getElementById('box');
$dom.addEventListener("webkitAnimationStart",function(){//动画开始事件
},false);
$dom.addEventListener("webkitAnimationIteration",function(){//动画重复播放事件
},false);
$dom.addEventListener("webkitAnimationEnd",function(){//动画结束事件
},false);
animation.js实现帧动画及交互
html部分
css部分
#box{
width:100px;height:100px;
background-repeat: no-repeat;background-size:100%;
}
javascript部分
letanimation =require('../../../../../unit/lib/lib-animate.js/animation');
let$dom =document.getElementById('box');
letimages = ['box.png'];
letmap = ["0 0","0 -100","0 -200","0 -300","0 -400","0 -500"];
run();
functionrun(){
letrepeatAnimation = animation().loadImage(images).
changePosition($dom, map, images[0]);
repeatAnimation.start(80);
}
api
任务的概念：即每执行完一组map算一个任务
api说明
loadImage预加载雪碧图
changePosition根据数组坐标设置dom的背景图片位置
start动画开始执行 80ms/帧
repeat重复上一个任务
repeatForever无限重复上一个任务 等同于infinite
wait设置当前任务结束后下一个任务开始前的等待时间
pause暂停任务
restart继续执行任务
then添加一个同步任务
enterFrame自定义动画每帧执行的任务函数
总结
animation.js的出现为了解决如下问题
可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消
可以进行很精确的事件回调
动画帧比较多的时候，可以很方便的进行雪碧图和位置map分组