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