JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

codergarden 發布于2019-08-22 10:51 / 1388人閱讀

摘要：注意如果想得到連貫的逐幀動畫，函數中必須重新調用。如果你想做逐幀動畫的時候，你應該用這個方法。這個回調函數會收到一個參數，這個類型的參數指示當前時間距離開始觸發的回調的時間。

window.requestAnimationFrame 概述

window.requestAnimationFrame()這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數，以滿足開發者操作動畫的需求。這個方法接受一個函數為參，該函數會在重繪前調用。

注意: 如果想得到連貫的逐幀動畫，函數中必須重新調用 requestAnimationFrame()。

如果你想做逐幀動畫的時候，你應該用這個方法。這就要求你的動畫函數執行會先于瀏覽器重繪動作。通常來說，被調用的頻率是每秒60次，但是一般會遵循W3C標準規定的頻率。如果是后臺標簽頁面，重繪頻率則會大大降低。

回調函數只會被傳入一個DOMHighResTimeStamp參數，這個參數指示當前被 requestAnimationFrame 序列化的函數隊列被觸發的時間。因為很多個函數在這一幀被執行，所以每個函數都將被傳入一個相同的時間戳，盡管經過了之前很多的計算工作。這個數值是一個小數，單位毫秒，精確度在 10 μs。

語法

requestID = window.requestAnimationFrame(callback);// Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback);// Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback);// Older versions Chrome/Webkit

參數

callback在每次需要重新繪制動畫時,會調用這個參數所指定的函數。這個回調函數會收到一個參數，這個 DOMHighResTimeStamp 類型的參數指示當前時間距離開始觸發 requestAnimationFrame 的回調的時間。

返回值

requestID 是一個長整型非零值,作為一個唯一的標識符.你可以將該值作為參數傳給 window.cancelAnimationFrame() 來取消這個回調函數。

例子

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = null;
var d = document.getElementById("SomeElementYouWantToAnimate");
function step(timestamp) { 
  if (start === null) start = timestamp;
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

Tween.js

tween.js源碼如下：

/*
 * Tween.js
 * t: current time（當前時間）；
 * b: beginning value（初始值）；
 * c: change in value（變化量）；
 * d: duration（持續時間）。
 * you can visit "http://easings.net/zh-cn" to get effect
*/
var Tween = {
    Linear: function(t, b, c, d) { return c*t/d + b; },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c *(t /= d)*(t-2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t-2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t/d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
            return c / 2*((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t*t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * ((t = t/d - 1) * t * t*t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2*((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                s = p / 4;
                a = c;
            } else {
                s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                s = p/(2*Math.PI) * Math.asin(c/a);
            }
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d / 2) == 2) return b+c;
            if (typeof p == "undefined") p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                s = p / (2  *Math.PI) * Math.asin(c / a);
            }
            if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158; 
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) {
                return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            } else {
                return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
}
Math.tween = Tween;

簡介

動畫運動算法名稱如下：

Linear：線性勻速運動效果；

Quadratic：二次方的緩動（t^2）；

Cubic：三次方的緩動（t^3）；

Quartic：四次方的緩動（t^4）；

Quintic：五次方的緩動（t^5）；

Sinusoidal：正弦曲線的緩動（sin(t)）；

Exponential：指數曲線的緩動（2^t）；

Circular：圓形曲線的緩動（sqrt(1-t^2)）；

Elastic：指數衰減的正弦曲線緩動；

Back：超過范圍的三次方緩動（(s+1)t^3 – st^2）；

Bounce：指數衰減的反彈緩動。

每個效果都分三個緩動方式，分別是：

easeIn：從0開始加速的緩動，也就是先慢后快；

easeOut：減速到0的緩動，也就是先快后慢；

easeInOut：前半段從0開始加速，后半段減速到0的緩動。

所有的這些緩動算法都離不開下面4個參數，t, b, c, d，含義如下：

/*
 * t: current time（當前時間）；
 * b: beginning value（初始值）；
 * c: change in value（變化量）；
 * d: duration（持續時間）。
*/

下面用最簡單的線性勻速運動來解釋下：

Tween.Linear = function(t, b, c, d) { 
    return c*t/d + b; 
}

比方說我們要從位置0的地方運動到100，時間是10秒鐘，此時，b, c, d三個參數就已經確認了，b初始值就是0，變化值c就是100-0就是100，最終的時間就是10，此時，只要給一個小于最終時間10的值，Tween.Linear就會返回當前時間應該的坐標，例如，假設此時動畫進行到第5秒，也就是t為5，則得到（截圖自Chrome控制臺）：

如何實際使用Tween.js中的緩動算法？

兼容寫法：

window.requestAnimFrame = (function (callback,time) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
            window.setTimeout(callback, time);
        };
})();

我們要顯示一個動畫效果，例如，還是拿上面的線性效果舉例，則代碼可以變成：

var t = 0, b = 0, c = 100, d = 10;
var step = function () {
    // value就是當前的位置值
    // 例如我們可以設置DOM.style.left = value + "px"實現定位
    var value = Tween.Linear(t, b, c, d);
    t++;
    if (t <= d) {
         // 繼續運動
         requestAnimationFrame(step);
    } else {
        // 動畫結束
    }
};

基本上，所有的動畫使用都是這個套路。

參考地址:
緩動函數速查表：http://easings.net/zh-cn
http://www.zhangxinxu.com/wor...

GPU云服務器云服務器 tween.js 進階篇 webrtc進階信令篇 webrtc進階-信令篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91376.html

JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

摘要：注意如果想得到連貫的逐幀動畫，函數中必須重新調用。如果你想做逐幀動畫的時候，你應該用這個方法。這個回調函數會收到一個參數，這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數，以滿足開發者操作動畫的需求。...

Ilikewhite 2019-08-21 11:30 評論0 收藏0
JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

摘要：注意如果想得到連貫的逐幀動畫，函數中必須重新調用。如果你想做逐幀動畫的時候，你應該用這個方法。這個回調函數會收到一個參數，這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數，以滿足開發者操作動畫的需求。...

zorpan 2019-08-20 14:16 評論0 收藏0
JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現

摘要：注意如果想得到連貫的逐幀動畫，函數中必須重新調用。如果你想做逐幀動畫的時候，你應該用這個方法。這個回調函數會收到一個參數，這個類型的參數指示當前時間距離開始觸發的回調的時間。 window.requestAnimationFrame 概述 window.requestAnimationFrame()這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數，以滿足開發者操作動畫的需求。...

Riddler 2019-08-26 11:25 評論0 收藏0
JS—動畫緩動—tween.js

摘要：動畫運動算法線性勻速運動效果二次方的緩動三次方的緩動四次方的緩動五次方的緩動正弦曲線的緩動指數曲線的緩動圓形曲線的緩動指數衰減的正弦曲線緩動超過范圍的三次方緩動指數衰減的反彈緩動。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

wangxinarhat 2019-08-26 12:11 評論0 收藏0