JS—動畫緩動—tween.js

wangxinarhat 發(fā)布于2019-08-26 12:11 / 3137人閱讀

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

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 參數(shù)

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

動畫運動算法

Linear：線性勻速運動效果；

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

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

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

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

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

Exponential：指數(shù)曲線的緩動（2^t）；

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

Elastic：指數(shù)衰減的正弦曲線緩動；

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

Bounce：指數(shù)衰減的反彈緩動。

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

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"實現(xiàn)定位
    var value = Tween.Linear(t, b, c, d);
    t++;
    if (t <= d) {
         // 繼續(xù)運動
         requestAnimationFrame(step);
    } else {
        // 動畫結(jié)束
    }
};

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);
 
// 動畫循環(huán)
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
 
var coords = { x: 0, y: 0 }; // 開始位置
var tween = new TWEEN.Tween(coords) // 創(chuàng)建一個更改目標的tween

.to({ x: 300, y: 200 }, 1000) // 目的位置，1s
.easing(TWEEN.Easing.Quadratic.Out) // 平滑動畫
.onUpdate(function() { // 目標更新后調(diào)用
    // 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動畫效果

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108170.html

tween.js緩動（補間動畫）

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

chengjianhua 2019-08-26 11:43 評論0 收藏0
JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現(xiàn)

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

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

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

codergarden 2019-08-22 10:51 評論0 收藏0
JS進階篇--window.requestAnimationFrame與Tween.js配合使用實現(xiàn)

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

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

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

Riddler 2019-08-26 11:25 評論0 收藏0