php 加减速 操作,JS实现匀加速与匀减速运动的代码分享

这篇文章主要介绍了JS实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下

本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考，具体如下：

/*

* 动画帧函数

*

* */

var requestFrame=function(){

var prefixList=['webkit','moz','ms'];

var func;

for(var i=0;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

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

element.css('left',to+'px');

callback();

}else{

pos=from>to? from-offsetDis : from+offsetDis;

element.css('left',pos+'px');

requestFrame(func);

}

}

func();

}