欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 07:59:25
本文实例讲述了js实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下: /* * 动画帧函数 * * */ var requestfr...

本文实例讲述了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程序设计有所帮助。