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圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
區(qū)分中英文字符的兩種方法(正則和charCodeAt())
最近在為項目寫登錄注冊系列頁面, 表單驗證無疑是不可缺少的部分, 在這個jQ插件滿天飛的web年代, 表單驗證倒也不是難事. 但再好的插件, 也并不能做到十全十美2010-11-11純javascript代碼實現(xiàn)計算器功能(三種方法)
純javascript代碼實現(xiàn)計算器功能,接下來,由小編給大家分享一下用純javascript代碼編寫的計算器程序,需要的朋友可以參考下2015-09-09JS閉包、作用域鏈、垃圾回收、內(nèi)存泄露相關知識小結(jié)
閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)。接下來通過本文給大家介紹JS閉包作用域鏈等相關知識小結(jié)(垃圾回收內(nèi)存泄露)的相關知識,感興趣的朋友一起學習吧2016-05-05WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下2016-01-01webix+springmvc session超時跳轉(zhuǎn)登錄頁面
這篇文章主要介紹了webix+springmvc session超時跳轉(zhuǎn)登錄頁面的相關資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-10-10