tween.js補間動畫庫

一、tween.js

weenjs 是使用 JavaScript 中的一個簡單的補間動畫庫，支持數字、對象的屬性和 CSS 樣式屬性的賦值。

tweenjs 以平滑的方式修改元素的屬性值，需要傳遞給 tween 要修改的值、動畫結束時的最終值和動畫花費時間（duration），之后 tween 引擎就可以計算從開始動畫點到結束動畫點之間值，從而產生平滑的動畫效果。

二、使用

1. tween github

2. tweenCDN ：

https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js

3. 下載tween.js文件

三、tween實例

 

<script type="text/javascript" src="./js/tween.min.js"></script>
<script type="text/javascript">
    var box = document.createElement('div');
    box.style.setProperty('background-color', '#f66');
    box.style.setProperty('width', '100px');
    box.style.setProperty('height', '100px');
    document.body.appendChild(box);
        
    var position = { x: 0, y: 0 }
    var tween = new TWEEN.Tween(position)
    tween.to({x: 300, y: 300 }, 3000)
    tween.easing(TWEEN.Easing.Quadratic.Out)
    tween.onUpdate(function(){
        console.log( this.x );
        box.style.setProperty('transform', 'translate(' + position.x + 'px, '     + position.y + 'px)');
    })
    tween.start();
        
    animate();
    function animate(){
        requestAnimationFrame(animate);
        TWEEN.update();
    }    
</script>

 

四、示例解析

1.首先引入tween.js文件

2.在頁面上創建一個div

 

var box = document.createElement('div');
box.style.setProperty('background-color', '#f66');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);

3.定義一個初始位置對象 position 坐標為x和y

var position = { x: 0, y: 0 }

4.新建一個tween對象，改變 x 和y的值分別從 0到 300 ，持續時間為 3s

var tween = new TWEEN.Tween(position)
tween.to({x: 300, y: 300 }, 3000)

5.給這個動畫添加一個先快后慢的緩動效果

tween.easing(TWEEN.Easing.Quadratic.Out)

6.調用onUpdate回調函數，在 tween 動畫每次更新后將位置參數添加到div上，同時打印到控制台方便查看

tween.onUpdate(function(){
        console.log( this.x );
        box.style.setProperty('transform', 'translate(' + position.x + 'px, '     + position.y + 'px)');
    })

7.開始動畫

tween.start();

 

 8.為了平滑的動畫效果，需要在同一個循環動畫中調用 TWEEN.update 方法

    requestAnimationFrame()  ===> 類似settimeout的函數由,系統決定回調函數的執行時機。60Hz的刷新頻率，那么每次刷新的間隔中會執行一次回調函數，不會引起丟幀，不會卡頓 

    TWEEN.update()  ===> 更新渲染

    這個動作將會更新所有被激活的 tweens ，在 3s 內 position.x 和position.y將變為 300 。

animate();
function animate(){
    requestAnimationFrame(animate);
    TWEEN.update();
}

 9.動畫效果

五、tweenjs 動畫

Tween.js 本身不會運行，你需要通過 update 方法明確告訴它什么時候開始運行，推薦在動畫主循環中使用該動畫，可以調用 requestAnimationFrame 方法來獲得良好的圖像性能

使用無參數的調用方法，update 將明確當前時間。也可以為 update 方法法明確一個時間

TWEEN.update(100);

update 的時間為 100毫秒 ，可以使用這種方法來明確代碼中所有隨時間變化的函數。

六、控制 tween 動畫

• start 和 stop ==> Tween.start 和 Tween.stop 分別用來控制 tween 動畫的開始和結束
  對於已經結束和沒有開始的動畫，Tween.stop 方法不起作用。 Tween.start 可以方法接收一個時間參數，若使用了該參數，tween 動畫將在延遲該時間數后才開始動畫，否則他將立刻開始動畫。

• update ==> 通過 TWEEN.update 方法執行動畫的更新

• chain ==> 制作多個多行，例如一個動畫在另一個動畫結束后開始，可以通過 chain 來實現

  tweenA.chain(tweenB);  //tweenB 在 tweenA 之后開始動畫，故可以制作一個無線循環的動畫
  tweenB.chain(tweenA);

• repeat ==> 制作循環動畫，優於 chain，接收一個用於描述循環次數的參數

  tween.repeat(10);
  tween.repeat(infinity);

• delay ==> 用於控制動畫之間的延遲

  tween.delay(1000);
  tween.start()

   

   

七、回調函數

可以在每次 tween 循環周期的指定時間點調用自定義的函數

• onStart ==> tween 動畫開始前的回調函數
• onStop ==> tween 動畫結束后的回調函數
• onUpdate ==> 在 tween 動畫每次更新后執行
• onComplete ==> 在 tween 動畫全部結束后執行

var tween = new TWEEN.Tween({

}).to({

}).onStart(function(){

}).onUpdate(function(){

})

八、動畫運動算法（緩動函數）easing函數

• Linear ==> 線性勻速運動效果
• Quadratic ==> 二次方的緩動（t^2）
• Cubic ==> 三次方的緩動（）
• Quartic ==> 四次方的緩動（）
• Quintic ==> 五次方的緩動
• Sinusoidal ==> 正弦曲線的緩動（）
• Exponential ==> 指數曲線的緩動（）
• Circular ==> 圓形曲線的緩動（）
• Elastic ==> 指數衰減的正弦曲線緩動（）
• Back ==> 超過范圍的三次方的緩動
• Bounce ==> 指數衰減的反彈緩動

九、緩動方式（效果）easing類型

• easeIn（In） ==> 加速，先慢后快
• easeOut（Out） ==> 減速，先快后慢
• easeInOut（InOut） ==> 前半段加速，后半段減速

十、使用公式

.easing(TWEEN.Easing.easing函數.easing類型)