cocos creator動畫編輯器學習

動畫是乙個漸變的過程，怎麼樣在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');

cocos creator動畫編輯器學習

翻牌動畫（CocosCreator）

翻牌動畫（CocosCreator）

禮盒抖動動畫（CocosCreator）

cocos creator動畫編輯器學習

翻牌動畫（CocosCreator）

翻牌動畫（CocosCreator）

禮盒抖動動畫（CocosCreator）

相關推薦