tween用戶使用指南

tween.js user guide

tween.js用戶指南

 

1.What is a tween? How do they work? Why do you want to use them?

1、什麼是tween?它如何工做？爲什麼你須要使用它？

tween容許你以緩和的方式改變一個對象屬性的值。你只要告訴它要改變什麼屬性，中止改變時屬性的終值該是什麼，以及這一變化要經歷多少時間，而後tweening的引擎就會從變化開始到變化結束關注該屬性當前值。例如，假設你有一個有x和y座標的位置對象：

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

若是你想把x值從100變到200，你只要：

// 首先爲這一position對象建立一個tween
var tween =newTWEEN.Tween(position);

// 告訴tween咱們想把x屬性在1000毫秒內改變
tween.to({ x:200 }, 1000);

事實上這並不會作任何事情，這個tween雖然被建立了，但未被激活，你須要啓動它：

tween.start();

最後，爲了儘量地讓運動平緩，你應該在動畫的同一個主循環內使用TWEEN.update。一般這看起來像：

animate();

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

這會讓引擎關注每一幀激活的position;在一秒後（也就是1000毫秒，tween變量創建時傳入的參數），position.x會變成200。

若是你想看到position的數值變化的話，你可使用onUpdate函數把x打印到控制檯：

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

這個函數會在每一次tween更新時被調用；它發生多少次取決於許多因素——好比你的計算機的運行速度和工做狀態等…

如今咱們只是把屬性值打印到控制檯，但若是你把Tween用於其它場景，好比用來改變一個three.js對象的位置：

var tween =newTWEEN.Tween(cube.position)
        .to({ x:100, y:100, z:100 }, 10000)
        .start();

animate();

functionanimate() {
    requestAnimationFrame(animate);
    TWEEN.update();

threeRenderer.render(scene, camera);
}

這種狀況下，由於three.js的渲染器會在渲染前讀取對象的位置，所以你就不必清楚的調用一個onUpdate函數啦！！
可能你已經在上面的代碼裏發現了不同的內容：鏈式調用！！由於每一個tween的方法返回了tween實例自己，所以你能夠把下述代碼：

var tween =newTWEEN.Tween(position);
tween.to({ x:200 }, 1000);
tween.start();

寫成

var tween =newTWEEN.Tween(position)
    .to({ x:200 }, 1000)
    .start();

你會在提供的例子中看到許多鏈式調用tween方法的地方，所以有必要先去熟悉它。看看04-simplest這個例子吧！

 

2.Animating with tween.js

2、使用tween.js來生成動畫！！

tween.js是不會自動工做的，所以必需要調用update方法。推薦的做法是把它放進動畫函數的主循環內，最好是使用requestAnimationFrame來得到最好的圖形渲染效果。看起來像這樣：

animate();

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

若是update沒有傳入參數，它會使用當前時間來計算從上次運行到如今過了多久，也就是會當即調用。

而若是你給update傳入了參數，例如：

TWEEN.update(100);

這意味着 "update with time = 100 milliseconds"。你可使用這個來確保你代碼中全部基於時間的函數老是使用相同的時間值。好比你有一個player而且想同步地運行tween的話，你的animate代碼可能會看起來像：

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

能夠查看github中的test.js來了解如何給TWEEN.update()傳入不一樣的值來模仿通過的時間。

 

3.Controlling a tween

3、控制一個tween的動畫

strat and stop

咱們已經知道Tween.start是啓動一個tween，除此以外還有許多其餘用來控制一個tween的方法。可能其中最重要的一個就是與start相對的方法：stop。若是想要取消一個tween，能夠直接讓一個tween調用stop方法：

tween.stop();

中止一個未被啓動的、或是已經中止的tween是無效的，也不會拋出錯誤。

start方法也能夠接收一個參數。若是傳入了參數，那麼tween不會啓動，直到傳入的時間才啓動。不然，它就會盡量快地啓動(也就是第一次調用TWEEN.update的時候）

update

每個tween實例也是有update方法的——而這其實是經過TWEEN.update來調用的。通常不會直接使用這個方法，但若是你想作出瘋狂的hack的話，這是頗有用的。

chain

若是你把多個不一樣的tween排列起來的話（也就是一個tween結束以後另外一個tween當即開始），事情將會變的頗有趣。咱們把這叫作chaning tweens，而這是經過chain方法來串起來的。所以，若是想讓tweenB接在tweenA以後開始的話，你能夠：

tweenA.chain(tweenB);

或者，若是你想使用一個無限的chain,能夠：

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

github中給出的00_Hello world例子正是使用了無限的chain.

在另一些狀況下，你可能會想緊接着一個tween以後同時進行兩個tween的動畫：

tweenA.chain(tweenB,tweenC);

 

repeat

若是你想不停地使用一個tween的話，你可讓它chain它本身，但更好的方式是使用repeat方法。它接收一個參數，表示重複的次數：

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

查看repeat例子

 

yoyo

這個函數只會在使用repeat時有用。它會讓tween的行爲像個yoyo（悠悠球），也就是說，在下一次動畫開始時，它的屬性是慢慢從終值拉回到初始值的，而不是簡單的從頭開始tweens隊列。

delay

更復雜的動畫管理可能要在一個tween啓動前延遲必定的時間。這樣可使用delay方法：

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

 

4.Controlling all tweens

4、控制全部tween的動畫

下列的方法是在TWEEN全局對象中的，並且你一般不會用到其中的大部分方法，除了update.

這些方法一般都該是內部的，但把它暴露出來是爲了給你機會去嘗試一些有趣的效果。

 

TWEEN.update(time)

前面已經說過的，這個方法用來啓動全部tween的動畫。若是未指定time，它將使用當前時間。

TWEEN.getAlland TWEEN.removeAll

分別用來得到全部正在運行的tween的數組以及移除它們。

 

TWEEN.add(item)   and  TWEEN.remove(tween）

分別用來在當前活動的tween隊列中增長一個tween或是移除指定的tween.

 

5.Changing the easing function (AKA make it bouncy)

5、改變緩動方式

Tween.js會在起始於終止值間的插值表現爲線性變化，也就是說變化量會與通過的時間成正比。這會使效果很容易預料，但也會過度無趣。不用擔憂！這一行爲能被輕鬆的改變，只要你使用了easing方法，好比：

tween.easing(TWEEN.Easing.Quadratic.In);

 

它的效果是，tween的速度是慢慢增長的，而不是線性的，而且在圖示上會表現爲二次函數形式。

緩動函數速查

 

Available easing functions: TWEEN.Easing可用的Easing函數

tween.js提供了幾個緩動函數，它們按照效果被分爲如下幾組：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce，同時它們有三種緩動類型：In,Out,InOut。

考慮到除非你很是熟悉這幾個詞的概念，否則你可能不太理解，github上又給出了一個Graphs的例子查看效果。它把全部的緩動曲線放在一個頁面裏，所以你能一眼就看出它們的區別來。

這些緩動函數的起源：these functions are derived from the original set of equations that Robert Penner graciously made available as free software a few years ago, but have been optimised to play nicely with JavaScript.

使用自定義緩動函數

你不只能使用現有的函數，也能本身寫個你以爲更適用的，只要它符合必定的約定：

·它須要接受一個參數

o   <![endif]>k:表示緩動過程，或者說這個tween已經經歷了多久。容許值爲[0,1]。

·   它必須返回一個基於輸入參數的值。

緩動函數會在tween每次update時調用。而後獲得的結果會被用於初始值和它與終止值的差值（deltas)，大概相似於下面的模擬代碼：

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

deltas會在start()以後開始計算。

因此假設你想使用自定義的緩動函數來緩動屬性值，而且是用Math.floor來輸出結果，也就是隻有整數部分纔會被輸出，這時就會表現有點些像臺階函數：

functiontenStepEasing(k) {
    returnMath.floor(k *10) /10;
}

而後你能在一個tween的easing方法中調用它，正如咱們以前見過的：

tween.easing(tenStepEasing);

查看graphs for custom easing function例子

 

6.Callbacks

6、回調函數

tween另外一個強大的特性是能夠在每次tween的生命週期的某一時刻裏使用自定義的回調函數。

好比，假定你想去給一個對象指定動畫，但它的屬性卻不能直接讀寫，那麼你就要使用一個setter了。你可使用一個onUpdate回調函數來讀取更新了的屬性值而且手動調用setters:

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

或者想像你要在tween開始時放個聲音，這樣你就能用一個onStart回調函數：

var tween =newTWEEN.Tween(obj)
    .to({ x:100 })
    .onStart(function() {
        sound.play();
    });

每一個回調函數的做用域都是在這個被tweened的對象內——這個例子裏，是obj

 

onStart

在tween開始以前，也就是在deltas計算以前。一個tween只會執行一次，也就是說即便被repeat()重複了也不會屢次執行。

這通常是用來同步執行其餘的事件，或者是觸發一些你想要tween發生時要作的動做。

被tweened的對象是做爲第一個參數，它也能經過this來得到引用。

 

onStop

當一個tween被stop()方法中止時執行的回調函數，而不是等它本身動畫天然結束時，或者在任意一個chained了的tween被stopped時。

被tweened的對象是做爲第一個參數，它也能經過this來得到引用。

 

onUpdate

tween每次更新時執行，在屬性值被更新以後。

被tweened的對象能經過this來引用，而傳入的第一個參數則是這個tween的進程，一個0~1的值。在未來版本可能會作出更改，所以你不能相信這一值。

 

onComplete

當一個tween正常結束時執行的回調函數。

被tweened的對象是做爲第一個參數，它也能經過this來得到引用。

 

7.Advanced tweening

7、進階的緩間動畫

使用當前屬性值的相關值

當使用to方法時，你也能使用與當前值相關的值，Tween.js會讀取當前的屬性值而後根據相關值計算終值。但須要使用引號否則就會被改爲絕對值了。

讓咱們看看如何使用：

// This will make the `x` property be 100, always
var absoluteTween =newTWEEN.Tween(absoluteObj).to({ x:100 });

// Suppose absoluteObj.x is 0 now
absoluteTween.start(); // Makes x go to 100

// Suppose absoluteObj.x is -100 now
absoluteTween.start(); // Makes x go to 100

// In contrast...

// This will make the `x` property be 100 units more,
// relative to the actual value when it starts
var relativeTween =newTWEEN.Tween(relativeObj).to({ x:"+100" });

// Suppose relativeObj.x is 0 now
relativeTween.start(); // Makes x go to 0 +100 = 100

// Suppose relativeObj.x is -100 now
relativeTween.start(); // Makes x go to -100 +100 = 0

看看github上這個例子

 

to的參數爲一個數組時

除了把tween動畫的目標屬性設置爲一個絕對或相對值，你也能夠爲tween動畫設置一系列的目標值。要實現這一目的，你只要在to()函數中爲屬性指定一個值數組就能夠了。例如：

var tween =newTWEEN.Tween(relativeObj).to({ x: [0, -100, 100] });

它會讓x從初始值到0，-100和100.

 插入值的計算方式是：

·首先tween的進程（tween progess)像正常同樣進行

·進程(從0到1)被用做插值函數的輸入

·基於這一進程和數組中的值，來生成一個插值。

例如，當這一tween剛開始時（process爲0），插值函數會返回數組中的第一個值。當tween進行到一半時，插值函數會返回一個接近數組中間的值的值，而後當tween結束時（process爲0），插值函數會返回數組中最後的值。

看看github上的這個例子

 

8.Getting the best performance

8、得到最佳表現

當使用Tween.js時，你可使用必定的方式來提升你代碼的性能（或者說當你在web中使用動畫時，一般來講都是有效的）。

使用高性能的CSS

當你想給頁面中的一個元素的位置作動畫時，最簡單的方案是對top和left屬性作動畫，就像這樣：

var element =document.getElementById('myElement');
var tween =newTWEEN.Tween({ top:0, left:0 })
    .to({ top:100, left:100 }, 1000)
    .onUpdate(function() {
        element.style.top=this.top+'px';
        element.style.left=this.left+'px';
    });

但這倒是很是低效的！！！！由於更改這些屬性會在每次tween更新時讓瀏覽器從新計算佈局，而是是很大的消費。相反，若是使用transform的話，這並不會讓瀏覽器從新計算佈局並且還容許硬件加速，像這樣：

var element =document.getElementById('myElement');
var tween =newTWEEN.Tween({ top:0, left:0 })
    .to({ top:100, left:100 }, 1000)
    .onUpdate(function() {
        element.style.transform ='translate('+this.left+'px, '+this.top+'px);';
    });

可是！若是你的動畫只是那麼簡單的話，那你還不如只用簡單的CSS動畫或者是transitions，那樣子瀏覽器還能儘量的作出優化。Tween.js最有用的地方是當你的動畫涉及到複雜的管理，好比你要同步執行多個tween,或者是當一個tween結束後執行其餘的tween，或者是循環執行必定次數等…

 

對GC機制友好些！！

若是你使用onUpdate回調，你要當心放進你要的內容。由於這個函數會每秒調用屢次，因此若是你在每次tween更新時作出比較耗費資源的操做的話，你可能會阻塞主線程而致使jank，或者——若是你的操做涉及到內容分配，那麼你會調用GC太屢次，這也可能會致使jank。所以，必定不要作出這兩類的操做。保證你的onUpdate回調函數是輕量級的，並確保你在開發時進行memory profiler。

 

9.Crazy tweening

9、更瘋狂的tweening!!

這多是你不怎麼會用到的。

你能夠在tween.js以外使用緩間方程，畢竟，它們只是函數。因此你能夠用它們來計算緩和曲線之類的做爲輸入數據。好比在這個頁面裏，它們被用來生成視頻數據。

 

原文連接

文中全部的demo都是來自github中的examples的。

 

轉載請註明出處：http://www.cnblogs.com/benymor/p/6373152.html 

若有任何建議或疑問，歡迎留言討論。