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屬性軌道上添加幀圖片，實現幀動畫.

 

時間曲線：

　　用於控制兩幀之間變化的快慢過程，例如一個逐漸透明的過程，通過修改時間曲線可以實現先慢慢的透明，然后快速的透明的過程.(注：雙擊兩幀之間的連線打開時間曲線界面)

 

腳本控制動畫：
　　1.簡單函數控制,如播放、暫停、恢復、停止、設置動畫的當前時間；
　　　　anim.play('test');
　　　　anim.pause('test');

 

　　2.可視化函數控制
　　　　在動畫編輯器里支持可視化編輯幀事件，執行一些函數方法，例如可以在動畫最后一幀插入切換到下一個界面的函數來實現動畫播放完后自動切換的效果.
　　　　事件編輯器中可以編輯需要觸發的函數，還可以在后面傳入函數參數（支持Boolean，String，Number三種類型的參數）.

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

　　　　

 

　　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({
        frame: 1, // 准確的時間，以秒為單位。這里表示將在動畫播放到 1s 時觸發事件
        func: "frameEvent", // 回調函數名稱
        params: [1, "hello"] // 回調參數
    });

    animation.addClip(clip);
    animation.play('anim_run');