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

 更新时间:2017年09月04日 11:34:38   作者:蓝精灵依米  
这篇文章主要介绍了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();
}

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

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

相关文章

  • 浅谈javascript中call()、apply()、bind()的用法

    浅谈javascript中call()、apply()、bind()的用法

    一直对Javascript中的apply/call/bind的用法很模糊,恰好看到了这篇文章。对三者之间的区别与联系算是有了比较清晰的认识。这里记录下来,分享给大家。
    2015-04-04
  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    这篇文章主要介绍了点击button获取text内容并改变样式的js实现,经测试非常实用,需要的朋友可以参考下
    2014-09-09
  • require.js的用法详解

    require.js的用法详解

    本文给大家介绍require.js的用法,require.js的诞生是为了解决两大问题,第一实现js文件的异步加载,避免网页失去响应,第二管理模块之间的依赖性,便于代码的编写和维护,对require.js用法感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • bootstrap multiselect下拉列表功能

    bootstrap multiselect下拉列表功能

    这篇文章主要为大家详细介绍了bootstrap multiselect下拉列表功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript内存管理介绍

    JavaScript内存管理介绍

    这篇文章主要介绍了JavaScript内存管理介绍,本文讲解了内存生命周期、JavaScript的内存分配、通过函数调用的内存分配、当内存不再需要使用时释放等内容,需要的朋友可以参考下
    2015-03-03
  • 鼠标事件延时切换插件

    鼠标事件延时切换插件

    为了防止误操作,很多时候需要对鼠标滑过触发的事件进行延时处理。网易首页的选项卡好几年之前就添加了这个特性,当时我记得是采用150毫秒作为触发基准
    2011-03-03
  • JavaScript通过HTML的class来获取HTML元素的方法总结

    JavaScript通过HTML的class来获取HTML元素的方法总结

    除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下
    2016-05-05
  • 详解JavaScript对象转原始值

    详解JavaScript对象转原始值

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Javascript判断对象是否相等实现代码

    Javascript判断对象是否相等实现代码

    想判断2个js对象,是不是所有完全相同在表单页面应用是很常见的,接下来分享一段判断代码,感兴趣的你可以参考下哈,希望可以帮助到你
    2013-03-03
  • JavaScript实现QQ聊天消息展示和评论提交功能

    JavaScript实现QQ聊天消息展示和评论提交功能

    这篇文章主要为大家详细介绍了JavaScript实现QQ聊天消息展示和评论提交功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论