JS实现匀加速与匀减速运动的方法示例
程序员文章站
2022-04-29 07:59:25
本文实例讲述了js实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下:
/*
* 动画帧函数
*
* */
var requestfr...
本文实例讲述了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中一些特殊的字符运算
下一篇: JavaScript贪吃蛇小组件实例代码