幀動畫

整體流程

幀動畫，就是通過一系列圖片定義動畫表現的動畫形式，首先我們需要動畫運行所需的所有幀。

這些幀通常以一張大圖的形式(如下)給出，并不附帶任何位置信息。

image

所以我們首先要將圖片處理成帶位置信息的大圖形式，以便能夠被cocos creator所用。

其次要創建一個承載動畫的節點，并綁定Animation組件。

編輯動畫，包括運行速度，幀事件，運行模式（順序、循環...）。

預覽。

動畫資源制作

分離圖片

• 使用shoeBox將素材圖中的各個元素扣出來，分離成一個個單獨的圖片。將源圖片直接拖入如下位置即可，shoeBox默認的輸出目錄跟源文件目錄相同。

image

打包整合圖片

• 使用TexturePacker將分離的圖片合成一張大的雪碧圖，附帶.plist文件。將Texture的輸出路徑直接放在cocos creator工程目錄下的/assets/texture下

image

• 將打包出來的plist和雪碧圖資源導入到cocos creator編輯器中，如下圖所示

image

節點/組件

新建用于承載動畫的節點

• 在節點中添加sprite組件，用于放置節點默認顯示的一幀畫面。將第一幀圖拖進去。因為我們的一幀圖是從圖集中扣出來的（前面我們用TexturePacker合成了一張大圖），所以這里Sprite的Altas屬性就是我們的圖集。

image

• 在節點中添加animation組件，用于定義動畫的具體行為

  • 在animation組件中一個Default Clip屬性，這代表這個節點默認展示的動畫。類型為cc.AnimationClip，每個cc.AnimationClip都有個name屬性，用于區分不同的動畫。
  • 還有一個clips屬性，是個數組。也就是Animation組件可以使這個節點擁有多個動畫。比如說角色的跑、跳、蹲等動作。有多少個動作，這個數組就有多長。可以認為cc.Animation是cc.AninationClip的合集。
  image

創建/編輯動畫

新建動畫資源

動畫資源就對應于之前animation組件的cc.AnimationClip類型的屬性。在資源管理器中新建Animation資源。定義好動畫資源后，就可以直接把這個資源拖到對應的屬性Default clip上去。(如上圖)

編輯動畫

在層級管理器中選中動畫節點，在動畫編輯器中就可以對動畫進行編輯了。

在動畫編輯器中點擊編輯按鈕。在下面的屬性列表中新建動畫需要改變的屬性。因為我們是幀動畫，所以自然要改變的就是cc.Sprite.SpriteFrame屬性了。

選中動畫所需的幀拖到該屬性的右邊去。點擊播放按鈕，即可看到動畫效果。

可以在動畫編輯器的右下角修改動畫的采樣率和速度，以改變動畫的幀變化速度。

保存動畫。

image

選中選中節點，Animation組件下的Play on Load屬性，即可在瀏覽器或者模擬器中查看動畫效果。

腳本控制

onLoad () {
    var animation = this.getComponent(cc.Animation)
    animation.play('name-of-animationClip') // 直接播放動畫
    // 動態加載動畫
    cc.loader.loadRes('animation/name-of-animation-resource-file', cc.AnimationClip, function (err, dynamicAnimationClip) {
        // 先將動態加載的clip放入animation中
        animation.addClip(dynamicAnimationClip)
        animation.run('dynamic-animation-clip-name')
    })
}