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


Posted in Javascript onSeptember 04, 2017

本文实例讲述了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中的对象创建 实例附注释
Feb 08 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
You might like
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript json2 使用方法
2010/03/16 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
微信小程序开发探究
2016/12/27 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
基于python实现操作redis及消息队列
2020/08/27 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
行政主管职责范本
2014/03/07 职场文书
创建青年文明号材料
2014/05/09 职场文书
大学生就业求职信
2014/06/12 职场文书
新课培训心得体会
2014/09/03 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
开幕式邀请函
2015/01/31 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python