tweenjs 是使用 JavaScript 中的一個簡單的補間動畫庫，支持?jǐn)?shù)字、對象的屬性和 CSS 樣式屬性的賦值。

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

使用

• tweenjs CDN

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

• tweenjs 下載到本地，密碼是 ywoq。

• tweenjs github

• tweenjs 實例

  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) 
          .to({ x: 300, y: 200 }, 1000) 
          .easing(TWEEN.Easing.Quadratic.Out) 
          .onUpdate(function() { 
              box.style.setProperty('transform', 'translate(' + coords.x + 'px, '     + coords.y + 'px)');
          })
          .start(); 
  

示例說明

1. 假設(shè)有一個對象 position ，它的坐標(biāo)為 x 和 y

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

2. 改變 x 的值從 100 到 200 ，持續(xù)時間為 1s

var tween = new TWEEN.Tween(position)
tween.to({x: 200}, 1000)

3. 創(chuàng)建 tween 對象后，激活它，從而讓它開始動畫

tween.start();

4. 為了平滑的動畫效果，需要在同一個循環(huán)動畫中調(diào)用 TWEEN.update 方法

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

這個動作將會更新所有被激活的 tweens ，在 1s 內(nèi) position.x 將變?yōu)?200 。

5. 可以使用 onUpdate 回調(diào)函數(shù)將結(jié)果打印到控制臺上

tween.onUpdate(function(){
    console.log( this.x );
})

這個函數(shù)在每次 tween 被更新時都會被調(diào)用

tweenjs 動畫

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

使用無參數(shù)的調(diào)用方法，update 將明確當(dāng)前時間。也可以為 update 方法法明確一個時間。

TWEEN.update(100);

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

控制 tween 動畫

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

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

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

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

• repeat ==> 制作循環(huán)動畫，優(yōu)于 chain，接收一個用于描述循環(huán)次數(shù)的參數(shù)

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

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

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

回調(diào)函數(shù)

可以在每次 tween 循環(huán)周期的指定時間點調(diào)用自定義的函數(shù)

• onStart ==> tween 動畫開始前的回調(diào)函數(shù)
• onStop ==> tween 動畫結(jié)束后的回調(diào)函數(shù)
• onUpdate ==> 在 tween 動畫每次更新后執(zhí)行
• onComplete ==> 在 tween 動畫全部結(jié)束后執(zhí)行

var tween = new TWEEN.Tween({

}).to({

}).onStart(function(){

}).onUpdate(function(){

})

動畫運動算法（緩動函數(shù)）easing函數(shù)

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

緩動方式（效果）easing類型

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

使用公式

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

tweenjs 源碼

控制動畫方法

緩動函數(shù)