Cocos creator-基礎程式碼(動作)

邱繼祥
Will-Cocos Creator
Published in
4 min readJul 7, 2019

摘要官方教學的重點

容器動作

動作名稱 簡介

cc.sequence 順序執行動作

cc.spawn 同步執行動作

cc.repeat 重複執行動作

cc.repeatForever 永遠重複動作

cc.speed 修改動作速率

即時動作

動作名稱 簡介

cc.show 立即顯示

cc.hide 立即隱藏

cc.toggleVisibility 顯隱狀態切換

cc.removeSelf 從父節點移除自身

cc.flipX X軸翻轉

cc.flipY Y軸翻轉

cc.place 放置在目標位置

cc.callFunc 執行回調函數

cc.targetedAction 用已有動作和一個新的目標節點創建動作

時間間隔動作

動作名稱 簡介

cc.moveTo 移動到目標位置

cc.moveBy 移動指定的距離

cc.rotateTo 旋轉到目標角度

cc.rotateBy 旋轉指定的角度

cc.scaleTo 將節點大小縮放到指定的倍數

cc.scaleBy 按指定的倍數縮放節點大小

cc.skewTo 偏斜到目標角度

cc.skewBy 偏斜指定的角度

cc.jumpBy 用跳躍的方式移動指定的距離

cc.jumpTo 用跳躍的方式移動到目標位置

cc.follow 追踪目標節點的位置

cc.bezierTo 按貝賽爾曲線軌跡移動到目標位置

cc.bezierBy 按貝賽爾曲線軌跡移動指定的距離

cc.blink 閃爍(基於透明度)

cc.fadeTo 修改透明度到指定值

cc.fadeIn 漸顯

cc.fadeOut 漸隱

cc.tintTo 修改顏色到指定值

cc.tintBy 按照指定的增量修改顏色

cc.delayTime 延遲指定的時間量

cc.reverseTime 反轉目標動作的時間軸

cc.cardinalSplineTo 按基數樣條曲線軌跡移動到目標位置

cc.cardinalSplineBy 按基數樣條曲線軌跡移動指定的距離

cc.catmullRomTo 按 Catmull Rom 樣條曲線軌跡移動到目標位置 cc.catmullRomBy 按 Catmull Rom 樣條曲線軌跡移動指定的距離

// 創建一個移動動作
var action = cc.moveTo(2, 100, 100);
// 執行動作
node.runAction(action);
// 停止一個
node.stopAction(action);
// 停止所有動作
node.stopAllActions();

1.動作順序 cc.sequence ,可以想像成動作的陣列

// 讓節點左右來回移動
var seq = cc.sequence(cc.moveBy(0.5, 200, 0), cc.moveBy(0.5, -200, 0));
node.runAction(seq);

2.同步動作 cc.spawn ,同時做動作

// 讓節點在向上移動的同時縮放
var spawn = cc.spawn(cc.moveBy(0.5, 0, 50), cc.scaleTo(0.5, 0.8, 1.4));
node.runAction(spawn);

3.重複動作cc.repeat

// 讓節點左右來回移動,並重複5次
var seq = cc.repeat(cc.sequence(cc.moveBy(2, 200, 0),cc.moveBy(2, -200, 0)), 5);
node.runAction(seq);

4.一直重複動作 cc.repeatForever

// 讓節點左右來回移動並一直重複
var seq = cc.repeatForever(cc.sequence(cc.moveBy(2, 200, 0),cc.moveBy(2, -200, 0)));
node.runAction(seq);

5.調整動作速度 cc.speed

// 讓目標動作速度加快一倍,相當於原本2秒的動作在1秒內完成
var action = cc.speed(cc.spawn(cc.moveBy(2, 0, 50),cc.scaleTo(2, 0.8, 1.4)),0.5);
node.runAction(action);

--

--