【CocosCreator入門】Animation動畫的製作和使用

本文轉載自：https://www.jianshu.com/p/7d9574f179eb

 

在CocosCreator中，想要播放序列幀動畫，通常使用Animation來完成。

什麼是序列幀動畫？

如下圖：

 

在遊戲中，把上面這組圖一張一張地播放，最後會形成動畫的效果，如下：

上面的素材可以在這個鏈接下載：http://pan.baidu.com/s/1hrYMba8

下面開始製作。

1.我這裏新建一個節點，命名爲blast(爆炸)

2.選中這個節點，然後選擇下面的動畫編輯器選項卡

 

3.點擊添加Animation組件

 

4.根據提示，繼續點擊新建AnimationClip

 

5.會提示保存，我們輸入small作爲他的文件名，並點擊保存

 

6.根據提示，點擊左上角按鈕開始編輯

 

7.點擊屬性列表中的add property按鈕，選擇添加cc.Sprite.spriteFrame

點擊之後，屬性列表會多出來一條cc.Sprite.spriteFrame，就像上圖那樣

8.將序列幀圖片一張一張地拖到時間軸上

由於CocosCreator本身的問題，這個操作可能需要多試兩次才能成功，試一下

 

拖拽成功，圖片上去了

9.把剩餘圖片也拖上去

 

10.再往右邊的內容看不到怎麼辦？

按住空格，拖拽鼠標左鍵，就能移動時間軸

 

11.點第一個節點，準備預覽效果

 

12.點擊左邊三角形播放箭頭，進行預覽

 

13.最終效果會在場景編輯器（就是整個屏幕中間部分的工作區）中顯示出來

 

14，確認效果後，點擊動畫編輯器左上角的編輯按鈕，結束編輯

 

15.提示保存，保存即可

至此，我們已經擁有一個動畫文件small.anim，在我們的資源管理器中能夠看到他

 

 

下面代碼調用即可播放

 

 

 

對於新人來說總是有那麼多的坑等着你。

新建動畫節點的時候千萬別【新建空節點】！！！

上面這個就是新建了空的節點，導致沒有cc.Sprite.spriteFrame屬性。

 

正確姿勢：

粗略試了一下除了空節點，其他的應該都可以。【創建節點】-》【創建渲染節點】-》【Sprite（精靈）】

總結：經驗就是踩坑積累的。很多播客寫的教程並不全，所以新手操作起來也會有很多問題，自身多總結多實踐就好。