動作系統(tǒng)就是可以在一定的時間內(nèi)實現(xiàn)位移、旋轉(zhuǎn)、縮放、跳動等各種動作。需要注意的是，動作系統(tǒng)跟Cocos creator編譯器的動畫系統(tǒng)不同，動作系統(tǒng)是面向程序員的API接口，而動作系統(tǒng)是通過編譯器來設(shè)計，它們服務(wù)于不同的使用場景，動作系統(tǒng)通常適合做一些簡單的位移、旋轉(zhuǎn)等動作，而動畫系統(tǒng)則相對要強大很多，可以對UI增加各種屬性來做到一些復(fù)雜的動畫。

一、 動作系統(tǒng)Action

Action是動作命令，先創(chuàng)建動作，然后就可以通過節(jié)點運行動作。

Action包括，改變位置、大小、旋轉(zhuǎn)等屬性；

Action分為兩大類：1.一段時間后完成 ActionIntervial 2. 瞬時完成 ActionInstant

// 創(chuàng)建一個移動的動作，在 2 秒內(nèi)，移動到 x = 100，y = 100 的位置

let action = cc.moveTo(2, 100, 100)

// 執(zhí)行動作，所有的動作都需要一個目標(biāo)通過 runAction 去執(zhí)行它

node.runAction(action)

// 當(dāng)我們想中途停止一個目標(biāo)的運動

node.stopAction(action)

// 如果有多個目標(biāo)在運動的過程中，想停止所有的動作

node.stopAllActions()

以上就是實現(xiàn)了一個簡單的動作。

如果我們想實現(xiàn)更多的動作效果，也可以通過不同的接口來實現(xiàn)。

動作系統(tǒng)也分為 時間間隔動作 和 即時動作。

1. ?時間間隔動作ActionIntervial

時間間隔動作：就是在一定的時間內(nèi)完成指定的動作。

cc.moveTo(2, 100, 100) ? ? // 移動到目標(biāo)位置，也就是說，無論我們的想要移動的目標(biāo)處于什么位置，執(zhí)行這個動作后，都會在 2s 的時間內(nèi)移動到 x = 100，y = 100 的這個位置。參數(shù)可以是2 ~ 3個參數(shù)，如果是兩個參數(shù)，則表示在 y軸 的方向上沒有效果。

cc.moveBy(2, 100, 100) ? ? // 移動指定的距離，也就是說，無論我們的想要移動的目標(biāo)處于什么位置，執(zhí)行這個動作后，都會在 2s 的時間內(nèi)移動到距離上一個位置在 x 上增加 100 的距離，在 y 上增加 100 的距離，會產(chǎn)生疊加的效果。參數(shù)可以是2 ~ 3個參數(shù)，如果是兩個參數(shù)，則表示在 y軸 的方向上沒有效果。

cc.rotateTo(2, 1080 ,1080) ? ? // 旋轉(zhuǎn)到目標(biāo)角度，在平面圖上，參數(shù)為2 ~ 3個的效果是相同的，只有在三維效果才會不同。

cc.rotateBy(2, 1080, 1080) ? ? // 在兩秒內(nèi)，旋轉(zhuǎn)到指定的角度， 效果也是疊加的

cc.scaleTo(2, 0.5, 0.5) ? ? ? ? ? ?// 在兩秒內(nèi)，將節(jié)點的大小縮放到指定的倍數(shù)

cc.scaleBy(2, 1.2, 1.2) ? ? // 在兩秒內(nèi)，按指定的倍數(shù)去縮放節(jié)點，同樣多次點擊，效果會累加。

cc.skewTo(1, 60, 60) ? ?// 在1 秒內(nèi)，偏斜到目標(biāo)角度

cc.skewBy(1, 40, 40) ? ? // 在1秒內(nèi)，偏斜指定的角度；多次點擊，數(shù)值會累加

cc.jumpTo(3, 200, 200, 50, 5) ? ? ? // 在3秒內(nèi)，用跳動的方式移動到坐標(biāo)為(200, 200)的位置，每次跳躍的高度為50，跳躍5次。

cc.jumpBy(2, 100, 100, 50, 5) ? ? ? ? ?// 在2秒的時間內(nèi)，用跳躍的方式指定的距離，(100, 100)會進行累加，每次跳躍的高度為50，跳躍次數(shù)為5次

cc.blink(3, 10) ? ? ?// 在3秒內(nèi)，閃爍10次，這個是基于透明度的閃爍

cc.fadeTo(3, 100) ? ? ? ?// 在3秒內(nèi)，修改透明度到100的值

cc.fadeIn(2) // 漸顯，參數(shù)為時間

cc.fadeOut(2) // 漸隱，參數(shù)也為時間

cc.tintTo(3, 0, 255, 0) ? // 在3秒內(nèi)，修改顏色到指定值，后面的三個參數(shù)表示的是 rgb 的值

cc.tintBy(1, 100, 200, 100) // 在1秒內(nèi)按指定的增量(100, 200, 100)修改顏色，顏色會從 rgb(0, 0, 0) 開始增加

cc.delayTime(5) // 表示延遲指定的時間量，用作延遲效果

cc.reverseTime() // 用于反轉(zhuǎn)目標(biāo)動作的時間軸

2. ?即時動作ActionInstant

即時動作：立即發(fā)生的動作，沒有時間的間隔

cc.show() // 立即顯示

cc.hide() // 立即隱藏

cc.toggleVisibility() // 顯隱狀態(tài)的切換

cc.removeSelf() // 從父節(jié)點移除自身

cc.flipX() // 沿X軸翻轉(zhuǎn)

cc.flipY() // 沿Y軸翻轉(zhuǎn)

cc.place() // 放置在目標(biāo)位置，參數(shù)為X,Y的值

cc.callFunc() // 執(zhí)行一個回調(diào)函數(shù)

3. ?緩動動作Easing

緩動動作：目標(biāo)在運動的時間內(nèi)，會調(diào)節(jié)不同階段的運動的速度。

有時候為了讓動作看起來比較優(yōu)雅，不那么呆板，

可以用cc.easeXXX加上緩動特效，有很多方法，可以查官方API，

在此就舉一個使用的例子：

var r = cc.rotateBy(2,360).easing(cc.easeCubicActionOut()); //按三次函數(shù)緩動退出

var rf = cc.repeatForever(r);

this.node.runAction(rf);

4. ?容器動作

通常我們在規(guī)劃動作時，不會是一種單一的動作，而是多種動作結(jié)合運動達到我們想要的一種效果。

cc.spawn // 同步執(zhí)行動作，也就是說，可以在相同的時間段內(nèi)，執(zhí)行不同的動作達到同步的效果。比如說，在進行位移的同時，可以實現(xiàn)旋轉(zhuǎn)和縮放等動作。

cc.sequence // 順序執(zhí)行動作，即在不同的時間段執(zhí)行不同的動作

cc.repeat // 重復(fù)執(zhí)行動作，代入執(zhí)行動作的參數(shù)后，要加一個重復(fù)的次數(shù)

例如：

cc.repeat(cc.sequence(cc.moveTo(1, 400, 200), cc.moveTo(1, -400, -200),cc.delayTime(0.5), cc.tintBy(2, 10, 50, 10), cc.jumpTo(3, 400, -100, 100, 20),cc.flipY(true)), 10)

重復(fù)10次執(zhí)行的動作

?cc.repeatForever ? ? // 永久重復(fù)動作

?cc.speed // ?修改動作速率

例如：

cc.speed(cc.sequence(cc.moveTo(5, 400, 200), cc.moveTo(5, -400, -200)), ?x1)

x1 的數(shù)值越大，則動作的速率越快；數(shù)值為負(fù)值時，則不改變速率。

二、 緩動系統(tǒng)cc.tween

從Cocos Creator v2.0.9，增加了一個新的緩動動作cc.tween。

Tween 提供了一個簡單靈活的方法來創(chuàng)建 action。 相對于 Cocos 傳統(tǒng)的 cc.Action，cc.Tween 在創(chuàng)建動畫上要靈活非常多：

支持以鏈?zhǔn)浇Y(jié)構(gòu)的方式創(chuàng)建一個動畫序列。

支持對任意對象的任意屬性進行緩動，不再局限于節(jié)點上的屬性，而 cc.Action 添加一個屬性的支持時還需要添加一個新的 action 類型。

支持與 cc.Action 混用；

支持設(shè)置 Easing 或者 progress 函數(shù)。

cc.tween有兩種主要的設(shè)置方式：to 改變到某個值、by 變化值。

//cc.tween可以同時設(shè)置多個屬性

//cc.tween 在調(diào)用 start 時會將之前生成的 action 隊列重新組合生成一個 cc.sequence 隊列，依次執(zhí)行。

cc.tween(this.node)

//to,在第一秒的時候放大為2倍，位置為(100,100),角度變化到120

.to(1,{scale:2,position:cc.v2(100,100),rotation:120})

//by,在第二秒時，縮放變化1.5倍，即最終放大為原始大小的3倍，位置變化了(100,100)，即現(xiàn)在位置為(200,200)

.by(1,{scale:1.5,position:cc.v2(100,100)})

//在第三秒時縮放為原來的大小，位置設(shè)置為(0,0)，然后加了一個緩動效果backOut

.to(1,{scale:1,position:cc.v2(0,0)},{easing:"backOut"})

.start();

從以上的例子可以看出來，cc.tween就是鏈?zhǔn)降囊恍蛄械腶pi，可以同時修改多個屬性，并且可以同時設(shè)置緩動效果

不僅如此，cc.tween還可以緩動任意對象的任意屬性，如

var obj = { a: 0 }

cc.tween(obj)

.to(1, { a: 100 })

.start()

更多詳細(xì)信息和使用說明，大家可以查看官網(wǎng)API：

https://docs.cocos.com/creator/api/zh/classes/Tween.html