如何用js实现灵活的帧动画

如何用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分组