JavaScript基於時間的動畫算法

目錄

• 前言
• 基於幀的動畫算法（Frame-based）
• 基於時間的動畫算法（Time-based）
• 改良基於時間的動畫算法
• 總結

前言

前段時間無聊或有聊地做了幾個移動端的HTML5遊戲。放在不同的移動端平臺上進行測試後有了詭異的發現，有些手機的動畫會“快”一點，有些手機的動畫會“慢”一點，有些慢得還不是一兩點。

通過查找資料發現，基於幀的算法（Frame-based）來實現動畫會導致不同幀率的平臺體驗不一致，而基於時間（Time-based）的動畫算法可以很好地改良這種情況，讓不同幀率的情況下都能達到較爲統一的速度上的體驗。

本文介紹的就是基於幀動畫算法和基於時間動畫算法的差異，以及對基於時間算法的改良。

基於幀的動畫算法（Frame-based）

相信做過前端的人對使用JavaScript實現動畫的原理都很熟悉。現在讓你實現一個讓一個div從左到右來回移動的JS代碼，你可能嗖嗖就寫出來了：

    function moveDiv(div, fps) {
        var left = 0;
        var param = 1;

        function loop () {
            update();
            draw();
        }

        function update() {
            left += param * 2;
            if (left > 300) {
                left = 300;
                param = -1;
            } else if (left < 0) {
                left = 0;
                param = 1;
            }
        }

        function draw() {
            div.style.left = left + "px";
        }

        setInterval(loop, 1000 / fps);
    }
    moveDiv(document.getElementById("div1"), 60);

效果如下：

http://jsfiddle.net/livoras/4taf9hhs/embedded/result,js,html,css/ src="https://jsfiddle.net/livoras/4taf9hhs/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0" class="loading" style="box-sizing: border-box; width: 825px; height: 300px; background: url("../img/loader.gif") 50% center no-repeat rgb(250, 250, 250);">

看看代碼，我們讓一個div在0 ～ 300px區間內左右來回移動。update計算更新描繪div的位置，draw重新描繪頁面上的div。爲了方便起見，這裏直接使用setInterval作爲定時器，實際情況下可以採用你喜歡的setTimeout或者requestAnimationFrame。這裏設置每秒鐘到更新60次，60fps是人盡皆知的比較適合做動畫的幀率。

地球人都知道，JavaScript中的定時器是不準確的。由於JavaScript運行時需要耗費時間，而JavaScript又是單線程的，所以如果一個定時器如果比較耗時的話，是會阻塞下一個定時器的執行。所以即使你這裏設置了1000 / 60每秒60幀的幀率，在不同的瀏覽器平臺的差異也會導致實際上你的沒有60fps的幀率。

所以上面代碼在一個手機上執行的時候可能有60fps的幀率，在另外一個手機上可能就只有30fps，更甚可能只有10fps。

我們模擬一下這種情況會有什麼效果發生：

http://jsfiddle.net/livoras/Lcv1jm53/embedded/result,js,html,css/ src="https://jsfiddle.net/livoras/Lcv1jm53/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0" class="loading" style="box-sizing: border-box; width: 825px; height: 300px; background: url("../img/loader.gif") 50% center no-repeat rgb(250, 250, 250);">

這完全不對大頭！

可以看到三個方塊移動速度根本不在同一個channel上。想象一下一個超級馬里奧遊戲在10fps的情況會怎麼樣？按跳躍一下，你會看到馬里奧以一種太空漫遊的姿態在空中拋弧線。

導致這種情況的原因很簡單，因爲我們計算和繪製每個div位置的時候是在每幀更新，每幀移動2px。在60fps的情況下，我們1秒鐘會執行60幀，所以小塊每秒鐘會移動60 * 2 = 120px；如果是30fps，小塊每秒就移動30 * 2 = 60px，以此類推10fps就是每秒移動20px。

三個小塊在單位時間內移動的距離不一樣！

假如你現在要做一個超級馬里奧的遊戲，怎麼做到可以在不同幀率的情況下讓馬里奧看起來還是那麼迅速且帥氣？

解決方案很明顯。雖然不同的瀏覽器平臺上的運行差異可能會導致幀率的不一致，但是有一樣東西是在任何平臺上都一致的，那就是時間。所以我們可以改良我們的算法，不是以幀爲基準來更新方塊的位置，而是以時間爲單位更新。也就是說，我們之前是px/frame，現在換成px/ms。

這就是接下來要說的基於時間（Time-based）的動畫算法。

基於時間的動畫算法（Time-based）

其實思路和實現都很簡單。我們計算每一幀離上一幀過去了多少時間，然後根據過去的時間來更新方塊的位置。

例如，上面的方塊應該每秒鐘移動120px，每毫秒移動120 / 1000 = 0.12像素（12px/ms）。如果上一幀方塊的位置在left爲10px的位置，到了這一幀的時候，假設相對於上一幀來說時間過去了200ms，那在時間上來說在這一幀方塊應該移動200ms * 0.12px/ms = 240px。最終位置應該爲10 + 240 = 250px。其實就是left = left + detalTime * speed。代碼如下：

    function moveDivTimeBased(div, fps) {
        var left = 0;
        var current = +new Date;
        var previous = +new Date;
        var param = 1;

        function loop() {
            var current = +new Date;
            var dt = current - previous; // 計算時間差
            previous = current;
            update(dt);
            draw()
        }

        function update(dt) {
            left += param * (dt * 0.12); // 根據時間差更新位置
            if (left > 300) {
                left = 300;
                param = -1;
            } else if (left < 0) {
                left = 0;
                param = 1;
            }
        }        

        function draw() {
            div.style.left = left + "px";
        }

        setInterval(loop, 1000 / fps);
    }

看看效果如何：

http://jsfiddle.net/livoras/8da1nssL/embedded/result,js,html,css/

看起來比上面的好多了，30fps和10fps好像能勉強趕上60fps的步伐。但是時間久了會發現30fps和10fps越來越落後於60fps。（建議先刷新再看看效果會更加明顯）

這是因爲每次小方塊碰到邊緣的時候，都會損失掉一部分時間，而且幀率越低的損失越大。看看我們上面的update函數：

      function update(dt) {
          left += param * (dt * 0.12); // 根據時間差更新位置
          if (left > 300) {
              left = 300;
              param = -1;
          } else if (left < 0) {
              left = 0;
              param = 1;
          }
      }

假如我們現在方塊的位置在left爲290px的位置，這一幀傳入的dt爲100ms，那麼我們left爲290 + 100 * 0.12 = 302，但是302大於300，所以left會被設置爲300。那麼本來用來移動2px的時間就會白白被“拋棄”掉。dt越大，浪費得越多，所以30fps和10fps會比60fps越來越慢。

爲了解決這個問題，我們對已有的算法進行改良。

改良基於時間的動畫算法

解決思路如下：不一次算整塊的時間（dt）移動的距離，而是把dt分成固定的時間片，通過多次update固定的時間片來計算dt時間後應該到什麼位置。

比較抽象，我們直接看代碼：

    function moveDivTimeBasedImprove(div, fps) {
        var left = 0;
        var current = +new Date;
        var previous = +new Date;
        var dt = 1000 / 60;
        var acc = 0;
        var param = 1;

        function loop() {
            var current = +new Date;
            var passed = current - previous;
            previous = current;
            acc += passed; // 累積過去的時間
            while(acc >= dt) { // 當時間大於我們的固定的時間片的時候可以進行更新
                update(dt); // 分片更新時間
                acc -= dt;
            }
            draw();
        }

        // update 和 draw 函數不變
        setInterval(loop, 1000 / fps);
    }

我們先確定一個固定更新的時間片，如固定爲60fps時一幀的時間：1000 / 60 = 0.167ms。然後積累過去的時間，然後根據固定時間片分片進行更新。也就說，即使這一幀和上一幀相差過去了100ms，我也會把這100ms分成很多個0.167ms來執行update函數。這樣做有兩個好處：

1. 固定的時間片足夠小，更新的時候可以減少邊緣損失的時間。
2. 不同幀率，不管你是60，30，還是10fps，也是根據固定時間片來執行update函數，所以即使有損失，不同幀率之間的損失是一樣的。那麼我們三個方塊就可以達到同步移動的效果的了！

看上面的代碼，update和draw函數保持不變，而loop函數中，對過去的時間進行了累加，當時間超過固定的片就可以執行update。while循環可以保證更新直到把積累的時間都更新完。

對時間進行積累，然後分固定片更新。這種方式還有一個非常大的好處，如果你的幀率超過了60fps，如達到100fps或者200fps，這時候passed會小於0.167ms，時間就會被積累，積累大於0.167纔會執行更新。碉堡的效果就是：不管你的幀率是高還是低，移動速度都可以和60fps情況下的速度同步。

看看最後的效果：

http://jsfiddle.net/livoras/25nut92z/embedded/result,js,html,css/

還是蠻不錯的。

總結

基於幀的動畫算法會在幀率不同的情況下導致動畫體驗有較大的差異，所有動畫都應該基於時間進行執行。而基於時間的動畫算法要注意邊緣時間的損失，最好採取積累時間，然後分固定片更新動畫的方式。

References

• http://gafferongames.com/game-physics/fix-your-timestep/
• http://blog.sklambert.com/using-time-based-animation-implement/
• http://viget.com/extend/time-based-animation

• http://codetheory.in/time-based-animations-in-html5-games-why-and-how-to-implement-them/
• 轉載自https://segmentfault.com/a/1190000002416071