JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動(dòng)的方法示例
本文實(shí)例講述了JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動(dòng)的方法。分享給大家供大家參考,具體如下:
/*
* 動(dòng)畫幀函數(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);
}
}();
/*
* 勻加速運(yùn)動(dòng)
*
* */
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; //運(yùn)動(dòng)的時(shí)間間隔
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();
}
/*
* 勻減速運(yùn)動(dòng)
*
* */
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();
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
- 原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
- javascript動(dòng)畫對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼
- Javascript模擬加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享
- js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
- JS實(shí)現(xiàn)基于Sketch.js模擬成群游動(dòng)的蝌蚪運(yùn)動(dòng)動(dòng)畫效果【附demo源碼下載】
- JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫效果封裝示例
相關(guān)文章
JavaScript數(shù)據(jù)類型的轉(zhuǎn)換詳解
JavaScript是一種動(dòng)態(tài)類型語(yǔ)言,變量沒(méi)有類型限制,可以隨時(shí)賦予任意值。本文就來(lái)和大家聊聊JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換,感興趣的小伙伴可以了解一下2022-12-12
javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡(jiǎn)單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01
小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09
JavaScript實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
js 優(yōu)化次數(shù)過(guò)多的循環(huán) 考慮到性能問(wèn)題
IE沒(méi)有我們想象中笨,它知道總的循環(huán)次數(shù)還是一千萬(wàn)次。因此,得把這一百個(gè)十萬(wàn)次循環(huán)分開(kāi)執(zhí)行。雖然Javascript是單線程的,但也可以通過(guò)setTimeout或setInterval模擬多線程。2011-03-03
JavaScript計(jì)算出現(xiàn)精度丟失問(wèn)題的解決方法
Javascript作為一門大型編程語(yǔ)言,在日常開(kāi)發(fā)中難免會(huì)涉及到大量的數(shù)學(xué)計(jì)算,然而,浮點(diǎn)數(shù)在計(jì)算過(guò)程中可能出現(xiàn)精度的問(wèn)題,下面我們就來(lái)學(xué)習(xí)一下Javascript中高精度計(jì)算及其相關(guān)知識(shí)吧2023-11-11
JavaScript TypeScript實(shí)現(xiàn)貪吃蛇游戲完整詳細(xì)流程
這篇文章主要介紹了JavaScript TypeScript實(shí)現(xiàn)貪吃蛇游戲流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09

