微信小游戏-CocosCreator 基础（十二）

三种动画：
1UI缓动：cc.easingxxx     
2Animtion 对精灵节点的属性改变
3spine创建骨骼动画 可以对关节改动
导出三个文件：
png：图片
atlas ：每个骨骼信息
json：动画数据

sp.Skeleton组件

将json文件放到场景中
premutiplie :是否启用贴图预乘
debug Stots ：显示关节
debug Bones : 显示骨骼
TimeScale  调节动画播放速度
=============================
1: 骨骼动画: 把动画打散, 通过工具，调骨骼的运动等来形成动画
2: spine是一个非常流行的2D骨骼动画制作工具
3: spine 动画美术人员导出3个文件:
    (1) .png文件:动画的”骨骼”的图片集;
    (2).atlas文件: 每个骨骼在图片集里面位置，大小;
    (3).json文件: 骨骼动画的anim控制文件,以及骨骼位置等信息;
4: 骨骼动画导入: 直接把三个文件拷贝到项目的资源目录下即可;
5: 使用骨骼动画: 
    (1) 直接拖动到场景;
    (2) 创建一个节点来添加sp.Skeleton组件;

=====================================
1: sp.Skeleton: 控制面板属性:
    Skeleton Data: 骨骼的控制文件.json文件;
    Default Skin: 默认皮肤;
    Animation:  正在播放的动画;
    Loop: 是否循环播放;
    Premuliplied Alpha 是否使用贴图预乘;
   TimeScale: 播放动画的时间比例系数;
    Debug Slots: 是否显示 Slots的调试信息;
    Debug Bone: 是否显示Bone的调试信息;
 
2: 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);往管道里面添加一个动画;
 ==========================================
1: setStartListener: 设置动画开始播放的事件;
2: setEndListener : 设置动画播放完成后的事件;
3: setCompleteListener: 设置动画一次播放完成后的事件; 

==========================
SkeletonJS：
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
        // },
        // ...
        // 界面绑定
        ske_anim: {
            type: sp.Skeleton, // 
            default: null,
        },
        // end 
    },

    // use this for initialization
    onLoad: function () {
        // 代码获取
        var spine = this.node.getChildByName("spine");
        var ske_com = spine.getComponent(sp.Skeleton);
        this.ske_com = ske_com;

        this.ske_com.setStartListener(function() {
            console.log("anim started");
        });

        this.ske_com.setEndListener(function() {
            console.log("anim end");
        });

        this.ske_com.setCompleteListener(function() {
            console.log("play once");
        });
    },

    enter_click: function() {
        // 清理动画播放管道, 索引来表示
        // this.ske_com.clearTracks(); // 清理所有播放队列的动画
        this.ske_com.clearTrack(0); // 指定管道的索引
        // end

        // step1, 播放我们的入场动画
        this.ske_com.setAnimation(0, "in", false); // 把管道清空，加入当前这个，
        this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
        // end

        // step2: 播放我们的idle
        // end 
    },

    click1_anim_click: function() {
        this.ske_com.clearTrack(0); // 指定管道的索引
        this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入当前这个，
        this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
    },

    click2_anim_click: function() {
        this.ske_com.clearTrack(0); // 指定管道的索引
        this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入当前这个，
        this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});