JS實現(xiàn)勻加速與勻減速運動的方法示例
本文實例講述了JS實現(xiàn)勻加速與勻減速運動的方法。分享給大家供大家參考,具體如下:
/*
* 動畫幀函數(shù)
*
* */
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); // 根據(jù)公式: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); //根據(jù)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相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript數(shù)據(jù)類型的轉(zhuǎn)換詳解
JavaScript是一種動態(tài)類型語言,變量沒有類型限制,可以隨時賦予任意值。本文就來和大家聊聊JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換,感興趣的小伙伴可以了解一下2022-12-12
js 優(yōu)化次數(shù)過多的循環(huán) 考慮到性能問題
IE沒有我們想象中笨,它知道總的循環(huán)次數(shù)還是一千萬次。因此,得把這一百個十萬次循環(huán)分開執(zhí)行。雖然Javascript是單線程的,但也可以通過setTimeout或setInterval模擬多線程。2011-03-03
JavaScript計算出現(xiàn)精度丟失問題的解決方法
Javascript作為一門大型編程語言,在日常開發(fā)中難免會涉及到大量的數(shù)學計算,然而,浮點數(shù)在計算過程中可能出現(xiàn)精度的問題,下面我們就來學習一下Javascript中高精度計算及其相關知識吧2023-11-11
JavaScript TypeScript實現(xiàn)貪吃蛇游戲完整詳細流程
這篇文章主要介紹了JavaScript TypeScript實現(xiàn)貪吃蛇游戲流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-09-09

