今天，小學(xué)生以自己淺薄的見(jiàn)地，在前輩大能的基礎(chǔ)上寫這篇文章，希望給大家打開(kāi)一扇窺探JavaScript（以下簡(jiǎn)稱JS）動(dòng)畫(huà)的窗戶。

JS如何制造出動(dòng)畫(huà)效果？

　　結(jié)合瀏覽器提供的 setInterval 或 setTimeout API，高頻改變DOM元素的一些屬性，即可創(chuàng)造一個(gè)肉眼可見(jiàn)的動(dòng)畫(huà)效果。一個(gè)看起來(lái)非常流暢的JS動(dòng)畫(huà)除了需要良好的變換算法外，與其執(zhí)行宿主也是非不開(kāi)的。程序?qū)懙迷俸?，如果瀏覽器過(guò)于老舊，電腦CPU性能低下，也會(huì)出現(xiàn)卡頓，甚至卡死。

　　執(zhí)行一個(gè)動(dòng)畫(huà)函數(shù)對(duì)于瀏覽器來(lái)說(shuō)是個(gè)苦差，設(shè)置動(dòng)畫(huà)一幀為多長(zhǎng)時(shí)間才能既流暢又不損耗性能呢？瀏覽器不會(huì)傻到進(jìn)行一個(gè)DOM操作，就去渲染一次頁(yè)面。它會(huì)把一個(gè)周期內(nèi)所有的DOM操作整合起來(lái)，統(tǒng)一進(jìn)行一次渲染。這個(gè)周期大約在16.7ms左右，不同瀏覽器間會(huì)有幾毫秒的差異。SetTimeout的第二個(gè)參數(shù)設(shè)置為1000/60是比較合乎情理的做法。不過(guò)了解過(guò)SetTimeout運(yùn)行機(jī)制的都會(huì)清楚，這個(gè)時(shí)間并不可靠，其根據(jù)實(shí)際情況會(huì)有些許甚至相當(dāng)大的延遲。那么有沒(méi)有這樣一個(gè)API？我不想知道你瀏覽器到底多久渲染一次，反正你渲染的時(shí)候給我的動(dòng)畫(huà)執(zhí)行一幀就行了。答案是有，requestAnimationFrame，可以讓函數(shù)隨著瀏覽器渲染執(zhí)行，并且執(zhí)行時(shí)機(jī)是可靠的。注意，這個(gè)方法在現(xiàn)在瀏覽器及IE10+才被支持。

　　現(xiàn)在可以封裝起一個(gè)簡(jiǎn)單的requestAnimationFrame，下面的例子中將會(huì)使用到它。

window.requestAnimFrame = (function(){
 return window.requestAnimationFrame    ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame  ||
     function( callback ){
      window.setTimeout(callback, 1000 / 60);
     };
})();

　　更加詳細(xì)的封裝可以在張?chǎng)涡竦牟┛椭锌吹剑簭場(chǎng)涡瘢簉equestAnimFrame。下面讓我們繼續(xù)。

動(dòng)畫(huà)函數(shù)的編寫

　　有了requestAnimationFrame，下面該考慮一下如何讓寫動(dòng)畫(huà)函數(shù)了。一般來(lái)說(shuō)我們會(huì)給出一個(gè)毫秒級(jí)的during值，限制這個(gè)動(dòng)畫(huà)必須要在這個(gè)時(shí)間內(nèi)完成。下面以實(shí)現(xiàn)一個(gè)小球從離頁(yè)面左側(cè)100px處勻速運(yùn)動(dòng)到800px處為例，編寫一個(gè)動(dòng)畫(huà)函數(shù)：戳我查看DEMO。

      var ele = document.getElementById("block");
      var start = Date.now();//獲取動(dòng)畫(huà)開(kāi)始的時(shí)間。
      var during = 1000; //此動(dòng)畫(huà)要在1秒內(nèi)執(zhí)行完。
      var p=0;//動(dòng)畫(huà)完成度　從0-1；
      requestAnimationFrame(function f(){
        if(p>=1){ ele.style.left="800px";}//如果發(fā)現(xiàn)動(dòng)畫(huà)已經(jīng)執(zhí)行完，將元素置到終點(diǎn)。
        else{
          p=(Date.now()-start)/during;
          ele.style.left=100+700*p+"px"; //從100px開(kāi)始，勻速向右移動(dòng)，共移動(dòng)700px;
          requestAnimationFrame(f);
        }
      })

　　上面函數(shù)中有一個(gè)關(guān)鍵變量：p，即percentage，我們可以稱它為動(dòng)畫(huà)的完成度，它是根據(jù)當(dāng)前時(shí)間計(jì)算得出的，并且從動(dòng)畫(huà)開(kāi)始后，會(huì)從0~1勻速漸變。當(dāng)其為1時(shí)，表示整個(gè)動(dòng)畫(huà)執(zhí)行完畢。在這個(gè)函數(shù)中，讓p乘以要運(yùn)動(dòng)的長(zhǎng)度700，便會(huì)得到一個(gè)0-700勻速變化的值，將其加上開(kāi)始的100，便可模擬小球從100px處勻速移動(dòng)到800px處。

　　設(shè)想一下，假如上面紅色標(biāo)出的運(yùn)動(dòng)方程改為“ele.style.left=100+700*p*p+"px"”呢？p以二次方漸增，小球向右移動(dòng)的速度會(huì)越來(lái)越快。是的，稍加修改便可實(shí)現(xiàn)一個(gè)勻加速運(yùn)動(dòng)的小球。

　　下面，我們就是要針對(duì)p來(lái)做文章。

Tween算法及緩動(dòng)效果

 　　下面我將列舉一些常用的緩動(dòng)算法，根據(jù)這些算法去修改上面勻速運(yùn)動(dòng)函數(shù)的運(yùn)動(dòng)方程，即可實(shí)現(xiàn)很贊的動(dòng)畫(huà)效果。
1.2次方緩動(dòng)：　　p*p
2.3次方緩動(dòng)：　　p*p*p
3.4次方緩動(dòng)：　　p*p*p*p
4.5次方緩動(dòng)：　　p*p*p*p*p
5.正弦曲線緩動(dòng)：  Math.sin(p*Math.PI/2)
6.指數(shù)曲線緩動(dòng)：  Math.pow(2,10*(p-1))
7.圓形曲線緩動(dòng)：  Math.sqrt(1-(p-1)*(p-1))
8.超范圍三次方：  p*p*(2.70158*p-1.70158)

　　驗(yàn)證一下吧，比如我現(xiàn)在想實(shí)現(xiàn)一個(gè)小球向右運(yùn)動(dòng)，有一個(gè)向左蓄力的動(dòng)畫(huà)，我只要把第一個(gè)demo的運(yùn)動(dòng)方程改為“ele.style.left=100+700*p*p*(2.70158*p-1.70158)+"px"”就行了，看看效果吧：戳我查看DEMO。

　　其實(shí)，每種緩動(dòng)算法都可以進(jìn)化為三種緩動(dòng)方式，分別為ease-in（先慢后快），ease-out（先快后慢），ease-in-out（先慢后快再慢）。

　　以2次方緩動(dòng)為例，它本身就是一個(gè)勻加速的過(guò)程，所以ease-in就是p*p。其ease-out為-(p*(p-2))。關(guān)于緩動(dòng)方式，像陽(yáng)光一樣在他的博客中有更加詳細(xì)的解釋：JavaScript動(dòng)畫(huà)、運(yùn)動(dòng)算法詳細(xì)解釋與分析。

　　接下來(lái)要放大招了，關(guān)于緩動(dòng)的整合DEMO，戳我吧。

JS動(dòng)畫(huà)可以做什么?

　　除了上面的緩動(dòng)效果，利用常見(jiàn)的數(shù)學(xué)公式還可以實(shí)現(xiàn)一些周期性運(yùn)動(dòng)效果，例如小球勻速圓周運(yùn)動(dòng)，小球勻速簡(jiǎn)諧振動(dòng)等，如果感興趣請(qǐng)猛戳DEMO。

　　那么JS動(dòng)畫(huà)可以做什么呢？這就需要發(fā)揮我們的個(gè)人想象力了，上面的DEMO大部分都在操控單一的屬性，比如left，讓DOM元素發(fā)生位移。事實(shí)上在運(yùn)動(dòng)方程中，元素的任何style都可以被漸變。試想一下，設(shè)置一個(gè)DOM元素的opacity從0~1進(jìn)行2次方緩動(dòng)，便是一個(gè)簡(jiǎn)單的jQuery fadeOut函數(shù)；讓一個(gè)DOM元素高度從無(wú)到有，便是一個(gè)簡(jiǎn)單的jQuery slideDown函數(shù)。更加不要忘記的是，在動(dòng)畫(huà)過(guò)程中不僅僅可以操作一項(xiàng)屬性，這為動(dòng)畫(huà)帶來(lái)了無(wú)限的可能性，事情變得越來(lái)越有趣了：DEMO：一個(gè)從小到大變化的球。

　　再試想一下，使用CSS3屬性，例如box-shadow，transform，作出的效果必將會(huì)更加絢麗。

總結(jié)

　　上面提到使用CSS3屬性，其實(shí)如果這個(gè)瀏覽器支持CSS3屬性的話，完全沒(méi)有必要使用JS來(lái)做這件事。CSS3自有Animation動(dòng)畫(huà)屬性，可以簡(jiǎn)單快捷地實(shí)現(xiàn)酷炫的動(dòng)畫(huà)效果，并且可以啟用GPU加速。美中不足的是僅現(xiàn)代瀏覽器支持。JS實(shí)現(xiàn)動(dòng)畫(huà)勝在可以兼容低版本瀏覽器，但是其效果一般（僅限于普通意義上的動(dòng)畫(huà)，不含canvas之類的）。

　　動(dòng)畫(huà)僅僅是JS操作DOM魅力之冰山一角，而數(shù)學(xué)與計(jì)算機(jī)總是能碰撞出耀眼的火花。繼續(xù)學(xué)習(xí)JS吧，這是一門神奇的語(yǔ)言，同時(shí)也應(yīng)該了解一些數(shù)學(xué)知識(shí)，往往能夠?yàn)榻鉀Q事情帶來(lái)捷徑。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論