cocos creator基礎-(十)cc.Animation動畫組件的使用

1: 掌握動畫編輯器與cc.Animation組件的使用;

// 節點、動畫、動畫文件的關係
node : {Animation : {AnimationClip}}

動畫編輯器使用

1: 建立一個節點;
2: 爲這個節點添加一個動畫組件 cc.Animation;
3: 爲這個動畫組件新建一個動畫文件 --> AnimationClip對象;
4: cc.Animation 控制面板的屬性:
　　(1): default Anim Clip: 默認的播放的動畫剪輯;
　　(2): Clips: 動畫剪輯的數組集合
　　(3): Play onLoad: 是否在加載的時候開始播放;

 

動畫編輯器的原理

1: 時間軸
2: 在不一樣的時刻，調整節點以及孩子節點的不一樣的屬性的值，而後建立出補間動畫;
3: 節點調動畫的屬性:
　　位置, 縮放, 旋轉, 大小, 顏色, 透明度, 錨點, 扭曲, ...;
4: 動畫編輯器也能夠調節節點的子節點
5: 動畫參數:
　　Simaple: 1秒多少幀, Speed: 速度,播放速度,越小越慢,
　　wrapMode: Normal, Loop, PingPong, Reverse, Loop Reverse, PingPongReverse;
6: 動畫
　　(1)添加動畫屬性
　　(2)添加關鍵幀/刪除關鍵幀,選到關鍵幀，在屬性編輯器上編輯和修改;
　　(3)編輯補間動畫曲線路徑;

 

Animation組件

1: 代碼中得到cc.Animation組件:
　　編輯器關聯;
　　代碼獲取組件;
2: Animation組件主要的方法:
　　play([name], [start_time]), 播放指定的動畫，若是沒有制定就播放默認的動畫;
　　playAdditive: 與play同樣，可是不會中止當前播放的動畫;
　　stop([name]): 中止指定的動畫，若是沒有指定名字就中止當前播放的動畫;
　　pause/resume: 暫停喚醒動畫;
　　getClips: 返回組件裏面帶的AnimationClip數組
3: Animation重要的屬性:
　　defaultClip: 默認的動畫剪輯;
　　currentClip: 當前播放的動畫剪輯;
4: Animation播放事件: 動畫組件對象來監聽on,不是節點
　　play : 開始播放時 stop : 中止播放時 pause : 暫停播放時 resume : 恢復播放時
　　lastframe : 假如動畫循環次數大於 1，當動畫播放到最後一幀時 finished : 動畫播放完成時

 

動畫裏面調用代碼函數

1:插入一個時間到動畫裏面;
2: 編輯這個時間觸發的函數: 名字 + 參數
3: 遍歷當前動畫組件所掛節點上面全部的腳本或組件，根據這個名字來觸發函數;
　　動畫編輯器裏插入test_anima_event事件，動畫節點掛的節點的腳本里就要有 對應名字 的方法才能觸發(這種方法容易不知道事件的來源，不推薦)
4: 要慎用，代碼和動畫之間不易太多的調用;

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        // 編輯器裏面綁定
        anim: {
            type: cc.Animation,
            default: null,
        },
    },

    // use this for initialization
    onLoad: function () {
        var anim_node = this.node.getChildByName("anim");
        this.anim_com = anim_node.getComponent(cc.Animation);

        // 是動畫組件cc.Animation組件實例來監聽;
        this.anim_com.on("play", function() {
            console.log("begin play");
        }.bind(this), this);

        
    },

    start: function() {
        // this.anim_com.play("anim_class");
        this.anim_com.play(); // 播放的是defalut clip指向的動畫clip
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});