JS—動畫緩動—tween.js

wangxinarhat 發布于2019-08-26 12:11 / 3074人閱讀

摘要：動畫運動算法線性勻速運動效果二次方的緩動三次方的緩動四次方的緩動五次方的緩動正弦曲線的緩動指數曲線的緩動圓形曲線的緩動指數衰減的正弦曲線緩動超過范圍的三次方緩動指數衰減的反彈緩動。

requestAnimFrame兼容

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

tween.js 參數

/*
 * t: current time（當前時間,小于持續時間，tween返回當前時間目標的狀態）；
 * b: beginning value（初始值）；
 * c: change in value（變化量）；
 * d: duration（持續時間）。
*/

動畫運動算法

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的緩動。

Tween.js動畫算法使用示意實例頁面

例子

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 {
        // 動畫結束
    }
};

2.返回頂部/setInterval

backTop(){
        var Tween = {
          Linear: function(t, b, c, d) { //勻速運動
            return c * t / d + b; 
          }
        }
        Math.tween = Tween;
        var t = 0;
        const b = document.documentElement.scrollTop;
        const c = 100;
        const d = 5;
        const setInt = setInterval(()=>{
          t--;
          //console.log(t)
          if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
          //console.log(t);
          const backTop = Tween.Linear(t,b,c,d);
          //console.log(backTop);
          document.documentElement.scrollTop = backTop;
        },5)
},

學趣樂園，backLeft

Tweenjs 安裝

npm install @tweenjs/tween.js

例子

var box = document.createElement("div");
box.style.setProperty("background-color", "#008800");
box.style.setProperty("width", "100px");
box.style.setProperty("height", "100px");
document.body.appendChild(box);
 
// 動畫循環
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
 
var coords = { x: 0, y: 0 }; // 開始位置
var tween = new TWEEN.Tween(coords) // 創建一個更改目標的tween

.to({ x: 300, y: 200 }, 1000) // 目的位置，1s
.easing(TWEEN.Easing.Quadratic.Out) // 平滑動畫
.onUpdate(function() { // 目標更新后調用
    // CSS translation
    box.style.setProperty("transform", "translate(" + coords.x + "px, " + coords.y + "px)");
})
.start();

Tween.js各類原生動畫運動緩動算法
Projects using tween.js

云服務器 GPU云服務器 tween.js 慣性緩動 js 暫停動畫 js動畫效果

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

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

tween.js緩動（補間動畫）

摘要：首先引入一個概念就補間動畫做動畫時會用到類，利用它可以做很多動畫效果，例如緩動彈簧等等。代表的就是最后一幀減去初始值就是變化量，代表最后一幀的結束也是動畫的結束。一、理解tween.js 如果看到上面的已經理解了,可以跳過下面的部分.下面為對Tween.js的解釋下面就介紹如何使用這個Tween了，首先b、c、d三個參數（即初始值，變化量，持續時間）在緩動開始前，是需要先確定好的。...

chengjianhua 2019-08-26 11:43 評論0 收藏0
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()這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數，以滿足開發者操作動畫的需求。...

codergarden 2019-08-22 10:51 評論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