Cocos 使用了Tween來代替原來的Action系統, 今天來給大家講解Tween如何使用, 幫助大家掌握Tween的使用，並且對Tween有一個更深入的了解。
這里有個cocos creator學習交流點擊可以直接進入
1: Tween到底是什么？
Cocos Creator 里面的Tween你可以理解為是一個容器對象, 在這個容器對象里面可以存放很多的”執行過程”，當執行這個Tween的時候，會一個一個過程的觸發執行。這樣Tween的使用就歸納總結出3個步驟:
(1): 創建一個Tween對象;
(2): 往Tween里面填加一個一個的執行過程;
(3): 執行Tween對象，引擎會一個一個的執行之前添加進來的過程。
例如：在0.5秒以內，讓A物體從當前位置，移動到(100, 0)位置,代碼如下
(1) 你要改變A物體位置，所以Tween的目標對象是A物體所在節點。
var t = cc.tween(A物體對應節點); 創建了一個針對A物體節點的Tween對象。
(2) 定制中間執行過程, 這個過程可以是一個，也可以是多個，這里我們是要從當前位置移動到(100, 0)的位置，所以使用tween對象的to函數來指定。
t.to(時間(0.5s), 屬性列表{}), 屬性列表，可以填寫Tween針對的目標對象實例中的任意屬性, 我們這里是x, y, 所以 t.to(0.5, {x: 100, y: 0}); 這樣就給目標物體創建了一個過程，0.5s之內從當前位置移動到目標位置(100, 0)。
(3) 啟動執行這個tween對象: t.start();
代碼如下:
// step1: 創建一個針對目標的tween對象
var t = cc.tween(this.node);
// step2: 添加執行過程;
t.to(0.5, {x: 100, y: 0});
// step3: 開始執行tween對象
t.start();
2: Tween 可以添加哪些過程
Tween可以添加哪些過程，我們可以去查看一下Tween的API文檔，在代碼編輯器里面右鍵Tween對象，然后在”Go to Definition”
這樣可以知道往這個Tween里面加入哪些過程。這些過程creator.d.ts里面都有，我這邊就不再重復的編寫，這里我就想分享一個小技巧，就是很多同學不知道props怎么寫，到底可以寫哪些內容？
添加一個對屬性進行絕對值計算的 action
@param duration duration
@param props {scale: 2, position: cc.v3(100, 100, 100)}
@param opts opts
其實這個很簡單，你只要打開target對象的類型，比如節點，cc.Node, 他有哪些屬性數據成員，這里的props就可以填寫哪些，不用死記硬背。
如果再執行的過程中要停止Tween的執行，可以使用Tween的Stop相關接口即可。
3: Tween的源碼實現
打開cocos引擎源碼actions/tween.js, 你會發現Tween其實是基於Cocos 的Action系統來實現的, Tween容器對象里面放的是一個一個的TweenAction, 這樣Tween實際上是Action系統來實現的。TweenAction是Tween編寫的一個Action, 這個Action繼承自 cc.ActionInterval, 在update里面來根據進度修改Target對應的屬性。還有一些函數調用的Tween,其實就是之前的Action里面的cc.callFunc, 如圖所示:
所以看完這些以后，相信你對Tween將會有一個詳細的了解了。