JS实现匀加速与匀减速运动的方法示例

本文实例讲述了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();
}

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。