java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例

本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考，具体如下：

* 动画帧函数

* */

var requestFrame=function(){

var prefixList=['webkit','moz','ms'];

var func;

for(var i=0;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

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

element.css('left',to+'px');

callback();

}else{

pos=from>to? from-offsetDis : from+offsetDis;

element.css('left',pos+'px');

requestFrame(func);

}

func();

}

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

java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例相关推荐

java中json重复数据结构_JS实现去除数组中重复json的方法示例
本文实例讲述了JS实现去除数组中重复json的方法.分享给大家供大家参考,具体如下: var array = [{"name":"123"},{"na ...
java模拟加速匀速减速_【JavaSE练习】面向对象_练习_模拟汽车的自动驾驶系统
[JavaSE练习]面向对象_练习_模拟汽车的自动驾驶系统 [JavaSE练习]面向对象_练习_模拟汽车的自动驾驶系统模拟汽车驾驶系统定义一个交通工具的类,包括: 属性:速度方法:设置速度,加速 ...
java模拟加速匀速减速_Android学习之动画加速减速匀速控制
今天说一下新发现的一个类的使用: 网上很多都写了Interpolator,你们先了解一下.我主要是简单说怎么用. Android 动画之Interpolator插入器 --AccelerateInte ...
java模拟加速匀速减速_步进电机加速-匀速-减速运行程序(C51源程序)
ME300系列单片机开发系统+步进电机模块演示程序功能:步进电机以加速方式启动,转速达到程序规定的最快速度后保持一段时间匀速运转,又开始以减速方式运行直到步进电机停止转动.由K1键控制演示程序运行 ...
java模拟加速匀速减速_Javascript模拟加速运动与减速运动代码分享
加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...
java模拟网易邮箱登录_使用服务端和客户端两种方法模拟网易邮箱实现全选，全不选的功能...
服务端和客户端的差别是服务端在每次全选或全不选是都要刷新界面而客户端不会服务端: 前台 DataKeyNames="id" DataSourceID="SqlDat ...
java语言二维数组转置_java实现二维数组转置的方法示例
本文实例讲述了java实现二维数组转置的方法.分享给大家供大家参考,具体如下: 这里在文件中创建Test2.Exchange.Out三个类在Exchange类中编写exchange()方法,在方法中 ...
java 创建自定义菜单_Java实现微信公众号自定义菜单的创建方法示例
本文实例讲述了Java实现微信公众号自定义菜单的创建方法.分享给大家供大家参考,具体如下: 开发公众号的时候可能需要给一些自定义菜单添加事件,比如点击某菜单然后服务端给用户推送信息. 我们也可以使用微 ...
cocos2d-x动画加速与减速
转自:http://novacreo.com/%E7%A8%8B%E5%BA%8F%E7%BB%84/cocos2d-x%E5%8A%A8%E7%94%BB%E5%8A%A0%E9%80%9F%E4% ...

java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例

java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例相关推荐

最新文章

热门文章