如何用js實現(xiàn)靈活的幀動畫 - animation.js
演示地址：http://localhost:8800/pluginAct/index.html?page=animateDemo
我們知道CSS3的屬性animate配合動畫@keyframes可以實現(xiàn)幀動畫，但是它不夠靈活，處理麻煩。本文將從兩種方式上來實現(xiàn)一個幀動畫效果，至于工作中用哪種，交由大家自己取舍。
代碼示例
一張100*500的雪碧圖box.png
CSS3動畫事件
至于animation中的steps這里不再細講
CSS3實現(xiàn)幀動畫及交互
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(){//動畫重復(fù)播放事件
},false);
$dom.addEventListener("webkitAnimationEnd",function(){//動畫結(jié)束事件
},false);
animation.js實現(xiàn)幀動畫及交互
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
任務(wù)的概念：即每執(zhí)行完一組map算一個任務(wù)
api說明
loadImage預(yù)加載雪碧圖
changePosition根據(jù)數(shù)組坐標設(shè)置dom的背景圖片位置
start動畫開始執(zhí)行 80ms/幀
repeat重復(fù)上一個任務(wù)
repeatForever無限重復(fù)上一個任務(wù) 等同于infinite
wait設(shè)置當前任務(wù)結(jié)束后下一個任務(wù)開始前的等待時間
pause暫停任務(wù)
restart繼續(xù)執(zhí)行任務(wù)
then添加一個同步任務(wù)
enterFrame自定義動畫每幀執(zhí)行的任務(wù)函數(shù)
總結(jié)
animation.js的出現(xiàn)為了解決如下問題
可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消
可以進行很精確的事件回調(diào)
動畫幀比較多的時候，可以很方便的進行雪碧圖和位置map分組
