cocos creator動畫編輯器學習

2022-08-30 07:30:11 字數 2453 閱讀 6497

動畫是乙個漸變的過程,怎麼樣在cocos creator的動畫編輯器中實現這個過程.

一、層級關係:

1節點、2動畫(animation)、3動畫剪輯(animation clip)、4屬性軌道、5動畫幀

a.動畫(animation)是節點上的乙個元件.

b.動畫剪輯(animation clip)就是乙份動畫的宣告資料,將它掛載到動畫(animation)上作為乙個屬性進行設定.

c.  動畫剪輯(animation clip)上可新增多個屬性軌道來控制不同屬性.

d.  在一條屬性軌道上建立多個動畫幀(藍色點),在這些動畫幀上設定不同的屬性值,實現從幀a漸變到幀b的過程(即動畫).

二、乙個簡單的動畫示例

實現乙個「投擲籌碼」的動畫:

a.在籌碼節點上新增投擲動畫.

b.動畫需求比較簡單,只需乙個籌碼的投擲過程chip_toss. (注:乙個動畫可有多個過程組合實現更複雜的效果).

c.投擲過程就是位置的改變,增加一條用於控制位置移動的屬性軌道:position.(注:乙個過程可有多個屬性改變,例如在移動的過程還可以增加透明度的改變)

d.在這條屬性軌道上設定了4個關鍵幀,設定好每個關鍵幀的座標值,將兩幀之間的連線修改為自己想要的運動軌跡曲線.(第一幀:出手點座標、第二幀:投擲點座標、第三和第四幀為投擲點附近座標(實現籌碼碰撞停止過程))

三、其它

屬性:包括基本屬性和自定義的屬性

基本屬性:節點自帶的基本屬性,包括位置position、旋轉rotation、縮放scale、錨點anchor、大小size、顏色color、透明度opacity、傾斜skew、節點的分組group.

自定義屬性:根據動畫所在節點上元件不同而增加不同的自定義屬性,例如節點上有文字元件,則會增加自定義屬性cc.label.string、cc.label.fontsize、    cc.label.enabled.

序列幀動畫:

常用的序列幀動畫就是在節點上新增了sprite元件,然後自定義屬性裡就會有cc.sprite.spriteframe屬性,然後在spriteframe屬性軌道上新增幀,實現幀動畫.

時間曲線:

用於控制兩幀之間變化的快慢過程,例如乙個逐漸透明的過程,通過修改時間曲線可以實現先慢慢的透明,然後快速的透明的過程.(注:雙擊兩幀之間的連線開啟時間曲線介面)

通過點選如圖兩個按鈕呼出事件編輯器.

3.略複雜的函式控制,獲取animationstate,修改其中的引數.

//

獲取animationstate的方法:

var animstate = anim.getanimationstate('test'); //

animstate.speed = 0.5;

4.動畫系統支援動態註冊**事件.

var animation = this

.node.getcomponent(cc.animation);

//註冊

animation.on('play', this.onplay, this

);

//取消註冊

animation.off('play', this.onplay, this

);

//對單個 cc.animationstate 註冊**

var anim1 = animation.getanimationstate('anim1');

anim1.on('lastframe', this.onlastframe, this

);

//動態建立 animation clip:

var animation = this

.node.getcomponent(cc.animation);

//frames 這是乙個 spriteframe 的陣列.

var clip = cc.animationclip.createwithspriteframes(frames, 17);

clip.name = "anim_run";

clip.warpmode =cc.warpmode.loop;

//新增幀事件

clip.events.push();

animation.addclip(clip);

animation.play('anim_run');

翻牌動畫(CocosCreator)

推薦閱讀 在遊戲中,有時候為了通過一種有意思的途徑,讓使用者在一些物品中隨機獲取某種物品,除了前面我們提到的使用大轉盤 獲得,還有一種可以實現類似功能的是抽取卡片。1 新建乙個button元件,設定為牌的背面圖 2 複製5份,排列好,並依次名命如下 效果圖如下 1 宣告乙個存放卡片的陣列 this ...

翻牌動畫(CocosCreator)

推薦閱讀 在遊戲中,有時候為了通過一種有意思的途徑,讓使用者在一些物品中隨機獲取某種物品,除了前面我們提到的使用大轉盤 獲得,還有一種可以實現類似功能的是抽取卡片。1 新建乙個button元件,設定為牌的背面圖 2 複製5份,排列好,並依次名命如下 效果圖如下 1 宣告乙個存放卡片的陣列 this....

禮盒抖動動畫(CocosCreator)

推薦閱讀 移動方法 cc.moveto duration number,position number cc.vec2,y?number 順序執行某些動作 cc.sequence actionoractionarray cc.finitetimeaction cc.finitetimeaction,...