帧动画功能 纯js控制css代码

指尖上的java代码 2017-03-17 23:08

在做微信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();