CocosCreator微信小遊戲入門實戰《小貓釣魚》（七）：Animation動畫系統
不知道大家有沒有注意到我們這個微信小遊戲得名稱時《小貓釣魚》，前面咱們做了半天，貌似是不是還沒看到我們的小貓。
OK，別急，我們小貓馬上登場。
在這一節，我們主要來做小貓的動畫，以及通過動畫事件讓整個遊戲的美術表現變得更好。
在開始之前，我們先在場景中建立兩個Sprite節點，一個是小貓Cat節點，待會我們通過Animation來使它動起來。另一個是一張背景圖片Back節點，我想我們已經受夠了背景一成不變的藍色了。
接下來我們開始製作小貓的動畫。
通過官方文件，你可以很全面的瞭解動畫系統，我希望可以抽空先看一遍：
選擇Cat節點，同時切換到動畫編輯器介面，如果你沒有調整過編輯器的介面佈局，那麼動畫編輯器在這個位置。
現在我們點選“新增Animation元件”按鈕，來給Cat節點新增一個動畫元件。
接下來在動畫編輯器中點選“新建 AnimationClip”按鈕，根據彈出的視窗建立一個新的動畫剪輯檔案。
建立完畢後，點選動畫編輯器左上角的編輯按鈕，開始編輯。
我們使用的是幀動畫來完成小貓的動作，記得把Cat節點的Trim屬性，也就是自動剪裁關閉掉。
然後點選動畫編輯器中屬性列表旁邊的加號按鈕，選擇cc.Sprite.spriteFrame新增一條“軌道”，我喜歡並且習慣使用“軌道”這個詞來形容節點動畫資料，不覺得這個介面和很多我們常用的視訊音訊工具很相似麼？上手非常的方便。
接下來把幀動畫的圖片資源，從資源管理器中，拖到我們剛剛建立的“軌道”裡。
點選播放按鈕，這個時候我們就可以在場景介面中預覽到動畫的播放
OK，幀序列沒有問題，不過好像整個動畫播放的有點快，沒關係，你有兩種方法來調整播放的時間。
第一種土辦法：
預設動畫幀率是60幀，我們現在是每幀進行一次spriteFrame的更換，我們可以通過滑鼠移動關鍵幀來增大每一個關鍵幀之間的間隔。
第二種辦法：
更改動畫的Sample幀率和Speed動畫播放速度。
這裡我們改一下Speed的引數，從1調整到0.5，再次預覽看一下，嘿，好多了。到這裡，我們的動畫就編輯完畢了。同樣點選動畫編輯器左上方的編輯按鈕，退出編輯並儲存。
這個時候我們看Cat節點的屬性檢查器中的Animation元件，我們可以看到Cat節點的動畫列表中已經有我們編輯好的CatAnim動畫了。
這時我們在腳本當中就可以通過
var anim = this.getComponent(cc.Animation);
anim.play();或者
anim.play('CatAnim');//播放指定動畫來進行Animation的播放。
注意anim.play()沒有動畫名作為引數時，會播放DefaultClip動畫，當然你需要設定DefaultClip
到這裡，我相信你可以很輕易的為Cat節點新增一個指令碼，並且在指令碼中寫入一個startAnim的方法永凱控制動畫的播放。同時在“開始遊戲”按鈕和“再來一局”按鈕的點選中進行呼叫。
startAnim () {
var anim = this.getComponent(cc.Animation);
anim.play('CatAnim');//播放指定動畫
}不過，這並不是我們想要的最終效果，我們更需要的是小貓甩魚竿的動作播放完後，魚鉤開始下沉。
要達到這個效果，我們就需要新增一個幀事件，讓動畫播放到最後一幀的時候，通過事件回撥執行魚鉤下沉的程式碼。
新增幀事件很簡單，參開官方文件：
開啟動畫，選擇最後一個關鍵幀，點選左上方加號按鈕旁邊的AddEvent按鈕。
這時候在時間軸上我們可以看到一個白色的小標記，這個就是我們新增的幀事件。
雙擊幀事件的小標記，輸入回撥的方法名，點選 +，- 號按鈕，可以增加或減少引數
編輯好後，點選左邊的儲存，並且在節點的指令碼中實現回撥方法即可。
var Hook = require("Hook");
cc.Class({
extends: cc.Component,
properties: {
mHook : cc.Node
},
start () {
},
startAnim () {
var anim = this.getComponent(cc.Animation);
anim.play('CatAnim');//播放指定動畫
},
OnAnimEnd () {
var pHook = this.mHook.getComponent("Hook");
pHook.StartLine();
}
});OK，重新調整一下“開始遊戲”按鈕和“再來一局”按鈕的點選事件，我們來看下效果：
