11.动画编辑器使用流程

1.创建空白项目

2.创建空白节点

3. 添加动画组件

4.新建clip

5.将资源拖动到anim节点下

6. 编辑动画

 7.添加属性

8. 插入关键帧

9. 拖动帧图片到指定位置

依次拖动

10. 设置默认播放的动画

11.使用代码控制播放

创建脚本game_scene.js 挂载到Canvas节点下

 

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        //编辑器绑定
        anim: {
            default: null,
            type: cc.Animation,
        },

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.anim_com = this.node.getChildByName("anim").getComponent(cc.Animation);

        //监听
        this.anim_com.on("play", function() {
            console.log("begin play!!!!!!!");
        }, this);
    },

    start () {
        this.anim_com.play();
    },

    // update (dt) {},
});

12.取消Play On Load运行

13. 动画里面调用代码函数

插入帧事件

双击 

 

 新建game_call.js脚本 挂载到anim节点下

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    call_function_action (param) {
        console.log("call success ---> ", param);
    },

    // update (dt) {},
});

运行