動作系統就是可以在一定的時間內實現位移、旋轉、縮放、跳動等各種動作。
需要注意的是,動作系統跟 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 // 重複執行動作,代入執行動作的引數後,要加一個重複的次數
例如: