動畫是乙個漸變的過程,怎麼樣在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,修改其中的引數.
//4.動畫系統支援動態註冊**事件.獲取animationstate的方法:
var animstate = anim.getanimationstate('test'); //
animstate.speed = 0.5;
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,...