CocosCreator 教你玩轉Animation動畫(第十四篇)

前言：
Animation動畫在遊戲中是必不可少的，各種人物的走跑跳飛，以及各種表情動作，反正做遊戲Animation動畫是必修課了。
這一篇章可以學會製作和控制各種動畫，主要從一下幾個方面介紹：

1. 動畫製作流程；
2. 使用Animation動畫編輯器製作動畫；
3. 代碼控制動畫；

---

一、動畫製作的流程

創建節點 ----> 掛載Animation組件 ----> 創建Animation Clip文件 ----> 將Animation Clip文件掛載到相應的節點上 ----> 編輯Animation Clip文件 ----> 最後代碼控制動畫。
上面順序不唯一，但基本是上面步驟；
部分截圖：

---

二、使用Animation動畫編輯器製作動畫

1. 基本操作介紹

這些操作按鈕一般鼠標放上去都是有提示信息的；
這編輯器的使用和Flash差不多；

能夠支持一下功能：

1. 添加和刪除一個新的屬性軌道
2. 添加、移動、選擇、更改、複製、粘貼關鍵幀
3. 雙擊連接連編輯時間曲線
4. 添加動畫事件
5. 添加一個新的屬性軌道

雙擊兩幀之間的連接線編輯時間曲線：
可以通過時間曲線在兩幀之間實現 EaseInOut 等緩動效果

添加幀事件：

2. 編輯幀動畫

通過添加不同的屬性，然後可以在時間軸上插入關鍵幀，然後在關鍵幀上修改屬性.

---

三、使用腳本控制動畫 (重點)

1. Animation 組件

停止狀態，則 Animation 會直接重新播放這個動畫；
暫停狀態，則 Animation 會恢復動畫的播放，並從當前時間繼續播放下去；
播放狀態，則 Animation 會先停止這個動畫，再重新播放動畫。

舉例：

var anim = this.getComponent(cc.Animation);
// 如果沒有指定播放哪個動畫，並且有設置 defaultClip 的話，則會播放 defaultClip 動畫
anim.play();

// 指定播放 test 動畫
anim.play('test');

// 指定從 1s 開始播放 test 動畫
anim.play('test', 1);

// 使用 play 接口播放一個動畫時，如果還有其他的動畫正在播放，則會先停止其他動畫
anim.play('test2');

// 播放第一個動畫
anim.playAdditive('position-anim');

// 播放第二個動畫
// 使用 playAdditive 播放動畫時，不會停止其他動畫的播放。如果還有其他動畫正在播放，則同時會有多個動畫進行播放
anim.playAdditive('rotation-anim');

// 指定暫停 test 動畫
anim.pause('test');

// 暫停所有動畫
 anim.pause();

// 指定恢復 test 動畫
anim.resume('test');

// 恢復所有動畫
 anim.resume();

// 指定停止 test 動畫
anim.stop('test');

// 停止所有動畫
 anim.stop();

設置動畫的當前時間:

var anim = this.getComponent(cc.Animation);
anim.play('test');

// 設置 test 動畫的當前播放時間爲 1s
anim.setCurrentTime(1, 'test');

// 設置所有動畫的當前播放時間爲 1s
 anim.setCurrentTime(1);

你可以在任何時候對動畫設置當前時間，但是動畫不會立刻根據設置的時間進行狀態的更改，需要在下一個動畫的 update 中才會根據這個時間重新計算播放狀態。

---

2. AnimationState

Animation 只提供了一些簡單的控制函數，希望得到更多的動畫信息和控制的話，需要使用到 AnimationState。

2.1 獲取 AnimationState

var anim = this.getComponent(cc.Animation);
// play 會返回關聯的 AnimationState
var animState = anim.play('test');

// 或是直接獲取
var animState = anim.getAnimationState('test');

2.2 獲取和設置動畫信息

var anim = this.getComponent(cc.Animation);
var animState = anim.play('test');

// 獲取動畫關聯的clip
var clip = animState.clip;

// 獲取動畫的名字
var name = animState.name;

// 獲取動畫的播放速度
var speed = animState.speed;

// 獲取動畫的播放總時長
var duration = animState.duration;

// 獲取動畫的播放時間
var time = animState.time;

// 獲取動畫的重複次數
var repeatCount = animState.repeatCount;

// 獲取動畫的循環模式
var wrapMode = animState.wrapMode

// 獲取動畫是否正在播放
var playing = animState.isPlaying;

// 獲取動畫是否已經暫停
var paused = animState.isPaused;

// 獲取動畫的幀率
var frameRate = animState.frameRate;

設置動畫 循環模式 與 循環次數
var animState = anim.play('test');

// 設置循環模式爲 Normal
animState.wrapMode = cc.WrapMode.Normal;

// 設置循環模式爲 Loop
animState.wrapMode = cc.WrapMode.Loop;

// 設置動畫循環次數爲2次
animState.repeatCount = 2;

// 設置動畫循環次數爲無限次
animState.repeatCount = Infinity;

---

2.3 動畫事件

前面有講到在關鍵幀上插入事件。

cc.Class({
    extends: cc.Component,

    onAnimCompleted: function (num, string) {
        console.log('onAnimCompleted: param1[%s], param2[%s]', num, string);
    }
});

註冊動畫回調

除了動畫編輯器中的幀事件提供了回調外，動畫系統還提供了動態註冊回調事件的方式。
目前支持的回調事件有：
play : 開始播放時
stop : 停止播放時
pause : 暫停播放時
resume : 恢復播放時
lastframe : 假如動畫循環次數大於 1，當動畫播放到最後一幀時
finished : 動畫播放完成時

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.wrapMode = cc.WrapMode.Loop;

// 添加幀事件
clip.events.push({
  frame: 1,               // 準確的時間，以秒爲單位。這裏表示將在動畫播放到 1s 時觸發事件
  func: "frameEvent",     // 回調函數名稱
  params: [1, "hello"]    // 回調參數
});

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

---

推薦閱讀：
CocosCreator 經典飛刀小遊戲 (實戰)
走進Cocos Creator遊戲開發(第一篇)

謝謝支持~