这篇文章主要介绍了js实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下
本文实例讲述了js实现匀加速与匀减速运动的方法。分享给大家供大家参考，具体如下：
/*
* 动画帧函数
*
* */
var requestframe=function(){
var prefixlist=['webkit','moz','ms'];
var func;
for(var i=0;i<prefixlist.length;i++){
func=window[prefixlist[i]+"requestanimationframe"];
if(func){
return function(callback){
func(callback);
}
}
}
return function(callback){
settimeout(callback,67);
}
}();
/*
* 匀加速运动
*
* */
function animate_easein(element,from,to,duration,callback){
var time=+new date;
var distance=to-from;
var a=2*distance/(duration*duration); //加速度a=2x/t^2（包含方向）
var func=function(){
var time2,offsetdis,durtime;
time2=+new date;
durtime=time2-time; //运动的时间间隔
offsetdis=math.ceil(a*durtime*durtime/2);//x=a*t^2/2
if(duration<durtime){
element.css('left',to+'px');
callback();
}else{
element.css('left',from+offsetdis+'px');
requestframe(func);
}
}
func();
}
/*
* 匀减速运动
*
* */
function animate_easeout(element,from,to,duration,callback){
var time=+new date;
var distance=math.abs(to-from);
var a=2*distance/(duration*duration); //x=a*t^2/2 求出加速度
var v0=math.sqrt(distance*2*a); // 根据公式：2as=v^2求出初速度
var func=function(){
var time2,offsetdis,durtime,pos;
time2=+new date;
durtime=time2-time;
offsetdis=math.ceil(v0*durtime-a*durtime*durtime/2); //根据s=v0*t+1/2*a*t^2求出位移x
if(duration<durtime){
element.css('left',to+'px');
callback();
}else{
pos=from>to? from-offsetdis : from+offsetdis;
element.css('left',pos+'px');
requestframe(func);
}
}
func();
}
以上就是js实现匀加速与匀减速运动的代码分享的详细内容。