cocos creator 動畫編輯器以及骨骼動畫的使用

一、普通動畫的設置

1、添加動畫組件

　　a、添加空節點=>添加動畫組件

　　b、新建Clip文件=>打開編輯模式添加動畫編輯（並且把添加的clip文件拖動到右邊面板的Default Clip 與相對應的Clips文件里）

　　

　　Default Clip => 在勾選Play On Load時或者調用play()默認播放的動畫

　　Clips => 通過腳本訪問可以播放的AnimationClip列表

　　Play On Loat => 是否在加載的時候播放

2、設置動畫

　　

　　WrapMode => 動畫模式（default:默認，normal:正常，loop：循環...）

　　Sample => 定義當前動畫數據每秒的幀率，默認為 60，這個參數會影響時間軸上每兩個整數秒刻度之間的幀數量（也就是兩秒之內有多少格）

　　Speed => 當前動畫的播放速度，默認為 1

　　設置動畫的步驟：選定節點后，點擊+號選擇需要設置的屬性，如position,opacity等，點擊添加關鍵幀，拉動線色線條到指定的時間點，再添加關鍵幀，設置所對應的值保存即可（如果是位置值，可直接拖動即可）如果是設置圖片的動畫選擇cc.Sprite.spriteFrame,把指定的圖片拖動到關鍵幀即可，概括如下：

　　(1)添加動畫屬性
　　(2)添加關鍵幀/刪除關鍵幀,選到關鍵幀，在屬性編輯器上編輯和修改;
　　(3)編輯補間動畫曲線路徑;

3、代碼控制動畫

   a: Animation組件主要的方法:

        play([name], [start_time]), 播放指定的動畫，如果沒有制定就播放默認的動畫;

        playAdditive: 與play一樣，但是不會停止當前播放的動畫;

        stop([name]): 停止指定的動畫，如果沒有指定名字就停止當前播放的動畫;

        pause/resume: 暫停喚醒動畫;

        getClips: 返回組件里面帶的AnimationClip數組

   b: Animation重要的屬性:

        defaultClip: 默認的動畫剪輯;

        currentClip: 當前播放的動畫剪輯;

   c: Animation播放事件:  動畫組件對象來監聽on,不是節點,取消注冊的事件用off

       play : 開始播放時  stop : 停止播放時 pause : 暫停播放時 resume : 恢復播放時

       lastframe : 假如動畫循環次數大於 1，當動畫播放到最后一幀時 finished : 動畫播放完成時

cc.Class({
    extends: cc.Component,
    properties: {
        animate: {
            type: cc.Animation,
            default: null
        }
    },
    onLoad() {
        //方法一
        // this.anim_con = this.animate;
        //方法二
        this.anim_con = this.node.getChildByName('anim').getComponent(cc.Animation);
        //獲取銨鈕組件
        let btn = this.node.getChildByName('btn').getComponent(cc.Button);
        //綁定事件
        let click_event = new cc.Component.EventHandler();
        click_event.target = this.node;
        click_event.component = 'test_scene';
        click_event.handler = 'col_anim';
        btn.clickEvents.push(click_event);

        //綁定監聽事件
        //監聽開始播放
        this.anim_con.on('play', function () {
            console.log('已經開始播放了哈！！！');
        }.bind(this), this);
        //監聽暫停
        this.anim_con.on('pause', function () {
            console.log('已經暫停了哈！！！');
        }.bind(this), this);
        //監聽繼續
        this.anim_con.on('resume', function () {
            console.log('現在繼續哈！！！');
        }.bind(this), this);
        //完成播放時調用
        this.anim_con.on('finished', function () {
            console.log('完成了！');
        }.bind(this), this);
    },
    start() {
        this.anim_con.play();
        this.isPlayAnim = true;
    },
    col_anim() {
        if (this.isPlayAnim) {
            //暫停
            this.anim_con.pause();
        } else {
            //繼續
            this.anim_con.resume();
        }
        this.isPlayAnim = !this.isPlayAnim;
    }
});

4、在動畫上綁定事件

步驟：點擊紅色圓圈處綁定事件，雙擊藍色處彈出對話框綁定事件

遍歷當前動畫組件所掛節點上面所有的腳本或組件，根據這個名字來觸發函數;注意：要把腳本綁定在動畫組件所掛的節點上
要慎用，代碼和動畫之間不易太多的調用;

 

二、Skeleton骨骼動畫的設置

　　1、骨骼動畫的基本配置及生成

　　　　a: 骨骼動畫: 把動畫打散, 通過工具，調骨骼的運動等來形成動畫
　　　　b: spine是一個非常流行的2D骨骼動畫制作工具
　　　　c: spine 動畫美術人員導出3個文件:
　　　　　　(1) .png文件:動畫的”骨骼”的圖片集;
　　　　　　(2).atlas文件: 每個骨骼在圖片集里面位置，大小;
　　　　　　(3).json文件: 骨骼動畫的anim控制文件,以及骨骼位置等信息;
　　　　d: 骨骼動畫導入: 直接把三個文件拷貝到項目的資源目錄下即可;
　　　　e: 使用骨骼動畫:
　　　　　　(1) 直接拖動到場景;
　　　　　　(2) 創建一個節點來添加sp.Skeleton組件,注意：在腳本里面定義資源要用sp.Skeleton來指定

 　　　2、骨骼動畫的js屬性及接口

　　　　　

　　　　sp.Skeleton: 控制面板屬性:

　　　　Skeleton Data =>骨骼的控制文件.json文件;
　　　　Default Skin => 默認皮膚;
　　　　Animation => 正在播放的動畫;
　　　　Loop => 是否循環播放;
　　　　Premuliplied Alpha => 是否使用貼圖預乘;
　　　　TimeScale => 播放動畫的時間比例系數;
　　　　Debug Slots => 是否顯示 Slots的調試信息;
　　　　Debug Bone => 是否顯示Bone的調試信息;
　　3、sp.Skeleton重要的方法: Skeleton是以管道的模式來播放動畫，管道用整數編號，管道可以獨立播放動畫，Track;
　　　　(1)clearTrack(trackIndex): 清理對應Track的動畫
　　　　(2)clearTracks(); 清楚所有Track動畫
　　　　(3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有動畫后，再從新播放
　　　　(4)addAnimation(trackIndex, “anim_name”, is_loop);往管道里面添加一個動畫;

　　4、sp.Skeleton的監聽方法

　　　　1: setStartListener: 設置動畫開始播放的事件;
　　　　2: setEndListener : 設置動畫播放完成后的事件;
　　　　3: setCompleteListener: 設置動畫一次播放完成后的事件;

cc.Class({
    extends: cc.Component,
    properties: {
        spine: {
            //配置動畫資源 注意：這里是sp.SkeletonData
            type: sp.SkeletonData,
            default: null
        }
    },
    onLoad() {
        //調用函數創建節點以及動畫組件
        this.create_elem();
        let btn1 = this.node.getChildByName('btn1').getComponent(cc.Button);
        let btn2 = this.node.getChildByName('btn2').getComponent(cc.Button);
        let btn3 = this.node.getChildByName('btn3').getComponent(cc.Button);
        this.bind_click(btn1, 'btn1_click');
        this.bind_click(btn2, 'btn2_click');
        this.bind_click(btn3, 'btn3_click');
        //動畫監聽
        this.sket.setStartListener(function () {
            console.log('動畫開始了');
        });
        this.sket.setEndListener(function () {
            console.log('動畫全部完成了');
        });
        this.sket.setCompleteListener(function () {
            console.log('一部份動畫完成了');
        })

    },
    start() {
    },
    //創建一下綁定點擊事件的方法
    bind_click(con, fn, param) {
        let click_events = new cc.Component.EventHandler();
        click_events.target = this.node;
        click_events.component = 'test_scene';
        click_events.handler = fn;
        param ? click_event.customEventData = param : void 0;
        con.clickEvents.push(click_events);
    },
    btn1_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'in', false);
        this.sket.addAnimation(0, 'clk_1', false);
    },
    btn2_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'clk_1', false);
        this.sket.addAnimation(0, 'clk_2', false);
    },
    btn3_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'clk_3', false);
        this.sket.addAnimation(0, 'out', false);
    },
    //創建節點以及動畫組件
    create_elem() {
        this.node.addChild(new cc.Node(), 0, 'ske');
        this.item = this.node.getChildByName('ske');
        this.item.x = -100;
        this.item.y = -300;
        //設置隱藏
        this.item.active = false;
        let sket = this.item.addComponent(sp.Skeleton);
        sket.skeletonData = this.spine;
        sket.premultipliedAlpha = false;
        this.sket = sket;
    }
});

 三、DragonBones 骨骼動畫的設置和使用

1、添加DragonBones骨骼動畫

　　添加空節點 => 在空節點里面添加渲染組件 => DragonBones

　　

　　Dragon Asset 表示骨骼信息數據，是一個JSON文件

　　Dragon AtlasAsset 表示texture的信息數據

　　Armature 表示當前的Armature名稱

　　Animation 表示當前播放的動畫

　　Time Scale 表示所有動畫的時間縮放率

　　Play Times 表示動畫的播放次數，默認是-1

　　Debug Bones 表示是否顯示骨骼的信息

2、通過代碼獲取骨骼組件

cc.Class({
    extends: cc.Component,
    properties: {
        person: {
            type: dragonBones.ArmatureDisplay,
            default: null
        }
    },
    start() {
        //獲取骨骼動畫的方式一
        console.log(this.person);
        //獲取骨骼動畫的方式二
        let node = this.node.getChildByName('person');
        let bones = node.getComponent(dragonBones.ArmatureDisplay);
        console.log(bones);
    }
});

 重要API展示

以下dragonBone表示實例化后的dragonBone對象

let Armature=dragonBone.armature();

播放動畫 => Armature.animation.play(name, playtimes) name 表示動畫的名稱，playtimes表示動畫次數如果為0就表示循環播放動畫

獲取所有動畫名稱 =>  Armature.animation.animationList  ||  Armature.animation.animationNames

停止指定動畫的播放 =>  Armature.animation.stop('stand');

cc.Class({
    extends: cc.Component,
    properties: {
        person: {
            type: dragonBones.ArmatureDisplay,
            default: null
        }
    },
    start() {
        let Armature = this.person.armature();
        let body = Armature.getBone('body');
        //指定對象的翻轉
        // body.offset.rotation = 0;
        //獲取所有的骨骼
        // console.log(Armature.getBones());
        //獲取所有的插槽
        // console.log(Armature.getSlots());
        //圖片X軸方向翻轉
        // Armature.flipX = true;
        let leg = Armature.getBone('legLeftUp');
        //隱藏指定的骨骼
        // leg.slot.displayIndex = -1;
        //移除骨骼，注意，這里的參數必需是對應的骨骼對象，這里會同時隱藏其子組件的骨骼對象
        // Armature.removeBone(leg);
    }
});