php 加减速操作,JS实现匀加速与匀减速运动的代码分享

这篇文章主要介绍了JS实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下

本文实例讲述了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();

}

php 加减速操作,JS实现匀加速与匀减速运动的代码分享相关推荐

java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例
本文实例讲述了JS实现匀加速与匀减速运动的方法.分享给大家供大家参考,具体如下: /* * 动画帧函数 * * */ var requestFrame=function(){ var prefixLi ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
php 加减速操作,手动挡减挡减速正确方法加挡先加速减挡先减速
手动挡的汽车应该怎么开呢?很多人不知道手动挡减速正确方法,所以在开手动挡车的时候手忙脚乱的.其实,在加挡前"轰"油门把车速先提起来,在减挡前"收"油门把车速先降 ...
C语言步进电机自动加减速,步进电机正反转和加速减速c源程序
这是一个群里朋友发给我的步进电机实现正转反转和加速减速的单片机c语言源程序,这里给大家共享下,有需要的朋友直接复制到keil里编译就可以了,程序已测试成功. /******************** ...
js的匀加速，匀减速运动
/* * 动画帧函数 * * */ var requestFrame=function(){ var prefixList=['webkit ...
html省市区选择器代码,js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ====================================== ...
vue 怎么样不重复往数组里插入数据_Vue.js在数组中插入重复数据的实现代码分享...
1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index" ...
js获取传统节假日_js判断节假日的代码分享
js判断节假日实例代码效果展示: /************************************************************* * 判断某天是不是工作日 * * @ ...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...

php 加减速操作,JS实现匀加速与匀减速运动的代码分享

php 加减速操作,JS实现匀加速与匀减速运动的代码分享相关推荐

最新文章

热门文章

php 加减速 操作,JS实现匀加速与匀减速运动的代码分享

php 加减速 操作,JS实现匀加速与匀减速运动的代码分享相关推荐

最新文章

热门文章

php 加减速操作,JS实现匀加速与匀减速运动的代码分享

php 加减速操作,JS实现匀加速与匀减速运动的代码分享相关推荐