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 相关文章推荐
jQuery 1.8 Release版本发布了
Aug 14 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
js对象的比较
2011/02/26 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
Python-split()函数实例用法讲解
2020/12/18 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
毕业生如何写自荐信
2014/03/26 职场文书
社团活动总结
2014/04/28 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
办公室管理规章制度
2015/08/04 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android