tween.js的使用實例詳解

這篇文章主要介紹了詳解tween.js的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前面的話

TweenJS提供了一個簡單但強大的漸層介面。它支援漸變的數字物件屬性&CSS樣式屬性，並允許連結補間動畫和行動結合起來，創造出複雜的序列。本文將詳細介紹tween.js的使用

 概述

#tween.js允許以平滑的方式修改元素的屬性值。只需要告訴tween想修改什麼值，以及動畫結束時它的最終值是什麼，動畫花費多少時間等信息，tween引擎就可以計算從開始動畫點到結束動畫點之間值，來產生平滑的動畫效果

例如，假設有一個物件position，它的座標為x 和y：

#

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

如果想改變x 的值從100到200，只需要這樣做：

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

到這裡只是創建了tween對象，需要激活它，讓它開始動畫：

##

// And set it to start
tween.start();

最後為了平滑動畫效果，需要在同一個循環動畫中呼叫TWEEN.update方法。程式碼如下：

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

這個動作將會更新所有被啟動的tweens，在1秒鐘（例如1000ms）position.x 將變成200。

也可以使用onUpdate回呼函數將結果印到控制台上

#

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

這個函數在每次tweens被更新時都會被呼叫。它的出現頻次依賴許多因素。例如：依賴你的電腦或設備的運行速度

開始動畫

#Tween.js本身不會運行，需要透過update方法明確的告訴它什麼時候開始運作。推薦在動畫主循環中使用該方法。可以透過呼叫requestAnimationFrame方法來獲得良好的映像效能

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

這裡使用無參數呼叫方式，update方法會明確目前時間，以便於取得上一次動畫的執行時間。

也可以為update方法明確一個時間：

TWEEN.update(100);

上面語句的意思是說：update的時間=100毫秒。可以使用這種方法來明確程式碼中所有隨時間變化的函數。例如，動畫已經開始，想所有動畫都同步進行，animate程式碼改成這樣：

#

var currentTime = player.currentTime;
TWEEN.update(currentTime);

#控制動畫

【start和stop】

Tween.start和Tween.stop分別用於控制tween動畫的開始和結束

對於已經結束和沒有開始的動畫，Tween.stop方法不起作用。 Tween.start方法同樣接收一個時間參數。如果使用了該參數，tween動畫將在延時該時間數後才開始動畫。否則它將立刻開始動畫

【update】

可以透過TWEEN.update方法來執行動畫的更新

【chain】

如果你製作多個多行，例如：一個動畫在另一個動畫結束後開始。可以透過chain方法來使實作。如下程式碼，tweenB 在tweenA 之後開始動畫

tweenA.chain(tweenB);

可以像下面這樣製作一個無限迴圈的動畫：

tweenA.chain(tweenB);
tweenB.chain(tweenA);

【repeat】

如果你製作循環動畫可以使用chain來實現，但更好的方法是使用repeat方法。它接收一個用來描述想循環多少次的參數

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

【yoyo】

這個函數只在使用repeat方法時才起作用。當它被激活時，tween的效果類似yoyo球效果。此效果是動畫會在開始或結束處向反方向反彈

【delay】

delay方法用於控制動畫之間的延時

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

全域方法

以下的方法定義在TWEEN 的全域物件中，其中大多數方法都用不上，除了update方法：

【TWEEN.update(time)】

該方法用於所有被啟動的tweens，如果time沒有被指定，將使用當前時間。

【TWEEN.getAll 和 TWEEN.removeAll】

這兩個方法用於取得被啟動的tweens數組的一個引用，或從數組中刪除所有tweens。

【TWEEN.add(tween) 和TWEEN.remove(tween)】

用於新增一個tween，或移除一個tween

############# ###easing函數############tween.js提供了一些可用的easing函數。可用函數有：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。 easing 類型分為: In, Out 和 InOut######不但可以使用tween.js提供的easing函數，還可以自訂easing函數。但必須遵守下面的規則######1、它必須接收一個參數######2、它必須基於輸入參數返回一個值######easing函數僅在每個tween每次被更新時調用，而不管有多少屬性被改變。結果隨後會被用於初始值############

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

以上是tween.js的使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！