幀動畫功能 純js控制css代碼
在做微信h5前段開發的時候,遇到很多動畫不是代碼能實現的了的,只能通過幀動畫了,如果是簡單的動畫,可以建議用gif,但有時gif並不是萬能的,因為你無法控制gif的開始,結束。
原理
其實就是跟電影院放膠帶電影一樣,通過快速的播放不同的照片,完成一個動畫。
重點
1,要設置好背景圖片的background-size,這個可以簡單理解成你的“底片“寬高。高度就設置成你的div高度,寬度根據你div高度等比例縮放就行了。
2,設置好div的寬度,和高度,這個其實就相當於你的“電影屏幕”。
3,js核心代碼:obj.css('background-position', 'center -'+temp + 'px');
js代碼
<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript">
window.frameAnimation = {
anims:(function(){
/*
obj=>需要執行背景動畫的對象;
maxwidth:圖片的總寬度
minwidth:一幀的寬度
steps=>總幀數;
eachtime=>一套完整動畫需要的時間;
times=>動畫執行的次數 0表示無限反覆
ismove,是否需要同時完成其他動作,true,false
*/
return function(obj,maxwidth,minwidth,steps,eachtime,times,isMove, callback){
var runing = false;
var handler = null; //obj,width,steps,eachtime,times定時器
var step = 0; //當前幀
var time = 0; //當前第幾輪
var speed = eachtime*1000/steps; //間隔時間
var temp = 0;
var top = 12;
function _play(){
if(step >= steps){
step = 0;
time++;
}
if(0 == times || time <times){
if(minwidth<maxwidth){
temp = minwidth*step;
}
if(isMove){
top+=35;
obj.css('top',top+'px');
}
obj.css('background-position', 'center -'+temp + 'px');
step++;
}else{
control.stop();
callback && callback();
}
}
var control = {
start:function(){
if(!runing){
runing = true;
step = time = 0;
handler = setInterval(_play, speed);
}
return this;
},stop:function(restart){
if(runing){
runing = false;
if(handler){
clearInterval(handler);
handler = null;
}
if(restart){
obj.css('background-position', '0 0');
step = 0;
time = 0;
}
}
}
,dispose:function(){
this.stop();
}
};
return control;
}
})()
}
</script>
調用方法
var anim = frameAnimation.anims($('#page2 .passerby'),594.4792,99.080,6,3.8,2,true,function(){});
anim.start();