Cocos Creator 中的動做系統那些事兒

動做系統就是能夠在必定的時間內實現位移、旋轉、縮放、跳動等各類動做。

須要注意的是，動做系統跟 Cocos Creator 編譯器的動畫系統不一樣，動做系統是面向程序員的API接口，而動畫系統是經過編譯器來設計，它們服務於不一樣的使用場景，動做系統一般適合作一些簡單的位移、旋轉等動做，而動畫系統則相對要強大的許多，能夠對UI增長各類屬性來作到一些複雜的動畫。

簡單介紹就這些啦，下面進入正題

動做系統 API

// 建立一個移動的動做，在 2 秒內，移動到 x = 100，y = 100 的位置

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

// 執行動做，全部的動做都須要一個目標經過 runAction 去執行它

node.runAction(action)

// 效果

 

// 當咱們想中途中止一個目標的運動

node.stopAction(action)

// 效果

 

// 若是有多個目標在運動的過程當中，想中止全部的動做

node.stopAllActions()

以上就是實現了一個簡單的動做

若是咱們想實現更多的動做效果，也能夠經過不一樣的接口來實現。

動做系統也分爲 時間間隔動做 和 即時動做。

　　時間間隔動做：就是在必定的時間內完成指定的動做。

cc.moveTo(2, 100, 100)     // 移動到目標位置，也就是說，不管咱們的想要移動的目標處於什麼位置，執行這個動做後，都會在 2s 的時間內移動到 x = 100，y = 100 的這個位置。參數能夠是2 ~ 3個參數，若是是兩個參數，則表示在 y軸 的方向上沒有效果。

cc.moveBy(2, 100, 100)     // 移動指定的距離，也就是說，不管咱們的想要移動的目標處於什麼位置，執行這個動做後，都會在 2s 的時間內移動到距離上一個位置在 x 上增長 100 的距離，在 y 上增長 100 的距離，會產生疊加的效果。參數能夠是2 ~ 3個參數，若是是兩個參數，則表示在 y軸 的方向上沒有效果。

// cc.moveBy(2, 100, 100) 的效果

 

cc.rotateTo(2, 1080 ,1080)     // 旋轉到目標角度，在平面圖上，參數爲2 ~ 3個的效果是相同的，只有在三維效果纔會不一樣。

 

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

cc.scaleTo(2, 0.5, 0.5)            // 在兩秒內，將節點的大小縮放到指定的倍數

 

cc.scaleBy(2, 1.2, 1.2)     // 在兩秒內，按指定的倍數去縮放節點，一樣屢次點擊，效果會累加。

 

cc.skewTo(1, 60, 60)    // 在1 秒內，偏斜到目標角度

 

cc.skewBy(1, 40, 40)     // 在1秒內，偏斜指定的角度；屢次點擊，數值會累加

 

cc.jumpTo(3, 200, 200, 50, 5)       // 在3秒內，用跳動的方式移動到座標爲(200, 200)的位置，每次跳躍的高度爲50，跳躍5次。

 

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

 

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

 

 

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

 

cc.fadeIn(2)　　　　// 漸顯，參數爲時間

cc.fadeOut(2)　　　// 漸隱，參數也爲時間

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

 

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

 

 

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

cc.reverseTime()　　　 // 用於反轉目標動做的時間軸

　　即時動做：當即發生的動做，沒有時間的間隔

cc.show()　　　　　　// 當即顯示

cc.hide()　　　　 　　 // 當即隱藏

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

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

cc.flipX()　　　　　　  // 沿X軸翻轉

cc.flipY()　　　　　　  // 沿Y軸翻轉

cc.place()　　　　　　 // 放置在目標位置，參數爲X,Y的值

cc.callFunc()　　　　　// 執行一個回調函數

　　緩動動做：目標在運動的時間內，會調節不一樣階段的運動的速度

 

 

　　容器動做

   一般咱們在規劃動做時，不會是一種單一的動做，而是多種動做結合運動達到咱們想要的一種效果。

　　cc.spawn　　　　// 同步執行動做，也就是說，能夠在相同的時間段內，執行不一樣的動做達到同步的效果。好比說，在進行位移的同時，能夠實現旋轉和縮放等動做。

 

     cc.sequence　　　　// 順序執行動做，即在不一樣的時間段執行不一樣的動做

 

 

   cc.repeat　　　　　　// 重複執行動做，代入執行動做的參數後，要加一個重複的次數

例如：

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)

重複10次執行的動做

 

  cc.repeatForever     // 永久重複動做

  cc.speed　　　　　//  修改動做速率

例如： 

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

   x1 的數值越大，則動做的速率越快；數值爲負值時，則不改變速率。