tweenjs 是使用 JavaScript 中的一個(gè)簡(jiǎn)單的補(bǔ)間動(dòng)畫庫(kù)，支持?jǐn)?shù)字、對(duì)象的屬性和 CSS 樣式屬性的賦值。

tweenjs 以平滑的方式修改元素的屬性值苇倡，需要傳遞給 tween 要修改的值、動(dòng)畫結(jié)束時(shí)的最終值和動(dòng)畫花費(fèi)時(shí)間（duration）囤踩，之后 tween 引擎就可以計(jì)算從開始動(dòng)畫點(diǎn)到結(jié)束動(dòng)畫點(diǎn)之間值旨椒，從而產(chǎn)生平滑的動(dòng)畫效果。

使用

• tweenjs CDN

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

• tweenjs 下載到本地堵漱，密碼是 ywoq综慎。

• tweenjs github

• tweenjs 實(shí)例

  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(); 
  

示例說(shuō)明

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

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

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

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

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

tween.start();

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

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

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

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

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

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

tweenjs 動(dòng)畫

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

使用無(wú)參數(shù)的調(diào)用方法类嗤，update 將明確當(dāng)前時(shí)間。也可以為 update 方法法明確一個(gè)時(shí)間辨宠。

TWEEN.update(100);

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

控制 tween 動(dòng)畫

• start 和 stop ==> Tween.start 和 Tween.stop 分別用來(lái)控制 tween 動(dòng)畫的開始和結(jié)束
  對(duì)于已經(jīng)結(jié)束和沒有開始的動(dòng)畫嗤形，Tween.stop 方法不起作用精偿。 Tween.start 可以方法接收一個(gè)時(shí)間參數(shù)，若使用了該參數(shù)，tween 動(dòng)畫將在延遲該時(shí)間數(shù)后才開始動(dòng)畫笔咽，否則他將立刻開始動(dòng)畫搔预。

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

• chain ==> 制作多個(gè)多行，例如一個(gè)動(dòng)畫在另一個(gè)動(dòng)畫結(jié)束后開始叶组，可以通過(guò) chain 來(lái)實(shí)現(xiàn)

  tweenA.chain(tweenB);  //tweenB 在 tweenA 之后開始動(dòng)畫拯田，故可以制作一個(gè)無(wú)線循環(huán)的動(dòng)畫
  tweenB.chain(tweenA);
  

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

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

• delay ==> 用于控制動(dòng)畫之間的延遲

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

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

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

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

var tween = new TWEEN.Tween({

}).to({

}).onStart(function(){

}).onUpdate(function(){

})

動(dòng)畫運(yùn)動(dòng)算法（緩動(dòng)函數(shù)）easing函數(shù)

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

緩動(dòng)方式（效果）easing類型

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

使用公式

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

tweenjs 源碼

控制動(dòng)畫方法

緩動(dòng)函數(shù)