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

1.添加组件
2.新建动画
3添加关键帧
4可调整补间动画
speed 越小越慢
保存：点击节点，保存动画编辑器
playAdditive：添加新的动画来播放，但是不会停止当前播放动画
动画组件监听
cc.animtion.on
动画事件
======================================
创作动画：
1: 时间轴
2: 在不同的时刻，调整节点以及孩子节点的不同的属性的值，然后创建出补间动画;
3: 节点调动画的属性:
      位置, 缩放, 旋转, 大小, 颜色, 透明度, 锚点, 扭曲, ...;
4: 动画编辑器也可以调节节点的子节点 
5: 动画参数:
     Simaple: 1秒多少帧, Speed: 速度,播放速度,越小越慢, 
     wrapMode:  Normal, Loop, PingPong, Reverse, Loop Reverse, PingPongReverse;
6:   动画
            (1)添加动画属性
            (2)添加关键帧/删除关键帧,选到关键帧，在属性编辑器上编辑和修改;
            (3)编辑补间动画曲线路径;
          
==================================================
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: 遍历当前动画组件所挂节点上面所有的脚本或组件，根据这个名字来触发函数;
4: 要慎用，代码和动画之间不易太多的调用;

=====================================
animJS：
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) {

    // },
});