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

行千里之狼發表於2019-05-31

動作系統就是可以在一定的時間內實現位移、旋轉、縮放、跳動等各種動作。

需要注意的是,動作系統跟 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 的數值越大,則動作的速率越快;數值為負值時,則不改變速率。

相關文章