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)文章
區(qū)分中英文字符的兩種方法(正則和charCodeAt())
最近在為項(xiàng)目寫登錄注冊(cè)系列頁(yè)面, 表單驗(yàn)證無疑是不可缺少的部分, 在這個(gè)jQ插件滿天飛的web年代, 表單驗(yàn)證倒也不是難事. 但再好的插件, 也并不能做到十全十美2010-11-11純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
純javascript代碼實(shí)現(xiàn)計(jì)算器功能,接下來,由小編給大家分享一下用純javascript代碼編寫的計(jì)算器程序,需要的朋友可以參考下2015-09-09JS閉包、作用域鏈、垃圾回收、內(nèi)存泄露相關(guān)知識(shí)小結(jié)
閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。接下來通過本文給大家介紹JS閉包作用域鏈等相關(guān)知識(shí)小結(jié)(垃圾回收內(nèi)存泄露)的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-05-05WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn)
這篇文章主要介紹了WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn),順帶顯示和隱藏評(píng)論者信息的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下2016-01-01webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁(yè)面
這篇文章主要介紹了webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁(yè)面的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10如何利用JS通過身份證號(hào)獲取當(dāng)事人的生日、年齡、性別
身份證可以識(shí)別一個(gè)人的信息,下面就介紹一下如何利用js通過身份證號(hào)碼獲取當(dāng)事人的年齡和性別2016-01-01JS庫(kù)之Three.js 簡(jiǎn)易入門教程(詳解之一)
three.js是一款webGL框架,由于其易用性被廣泛應(yīng)用。下面腳本之家小編通過案例給大家闡述three.js的基本配置方法,具體內(nèi)容詳情大家參考下本文吧2017-09-09js+css實(shí)現(xiàn)select的美化效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)select的美化效果,如何針對(duì)select進(jìn)行美化,感興趣的小伙伴們可以參考一下2016-03-03