Cocos Creator 组件-动作Action

由于面板显示不支持嵌套，自己也没有去研究inspector面板元素的显示控制，CocosCreator是用vue编写的，本人正在学习vue，后期考虑扩展下Inspector，官方链接：https://docs.cocos.com/creator/manual/zh/extension/extends-inspector.html

常用Action面板化：（只要放在脚本文件目录下就可以了）

Panel_Action.js

var Panel_Action_Type = cc.Enum({
    Panel_None: 0,
    Panel_Sequence: 1,
    Panel_Repeat: 2,
    Panel_RepeatForever: 3,
    Panel_Spawn: 4,
    Panel_DelayTime: 5,
    Panel_MoveTo: 6,
    Panel_MoveBy: 7,
    Panel_RotateTo: 8,
    Panel_RotateBy: 9,
    Panel_ScaleTo: 10,
    Panel_ScaleBy: 11,
    Panel_FadeIn: 12,
    Panel_FadeOut: 13,
    Panel_FadeTo: 14,
    Panel_Blink : 15,
    Panel_JumpTo:16,
    Panel_JumpBy: 17,
    Panel_BezierTo: 18,
    Panel_BezierBy: 19,
    Panel_SkewTo: 20,
    Panel_SkewBy: 21,
    Panel_TintTo: 22,
    Panel_TintBy: 23,
});

var Panel_Action = cc.Class({
    name: "Panel_Action",
    properties: () => ({
        actionType: {
            default: Panel_Action_Type.Panel_None,
            type: Panel_Action_Type,
            displayName: "动作类型",
        },

        action_sequence: {
            default: null,
            type: require("PanelAction").Panel_Sequence,
            displayName: "顺序动作",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_Sequence;
            }
        },

        action_repeat: {
            default: null,
            type: require("PanelAction").Panel_Repeat,
            displayName: "重复动作",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_Repeat;
            }
        },

        action_repeatForever: {
            default: null,
            type: require("PanelAction").Panel_RepeatForever,
            displayName: "永久重复动作",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_RepeatForever;
            }
        },

        action_spawn: {
            default: null,
            type: require("PanelAction").Panel_Spawn,
            displayName: "并行动作",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_Spawn;
            }
        },

        action_delayTime: {
            default: null,
            type: require("PanelAction").Panel_DelayTime,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_DelayTime;
            }
        },

        action_moveTo: {
            default: null,
            type: require("PanelAction").Panel_MoveTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_MoveTo;
            }
        },

        action_moveBy: {
            default: null,
            type: require("PanelAction").Panel_MoveBy,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_MoveBy;
            }
        },

        action_rotateTo: {
            default: null,
            type: require("PanelAction").Panel_RotateTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_RotateTo;
            }
        },

        action_rotateBy: {
            default: null,
            type: require("PanelAction").Panel_RotateBy,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_RotateBy;
            }
        },

        action_scaleTo: {
            default: null,
            type: require("PanelAction").Panel_ScaleTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_ScaleTo;
            }
        },

        action_scaleBy: {
            default: null,
            type: require("PanelAction").Panel_ScaleBy,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_ScaleBy;
            }
        },

        action_fadeIn: {
            default: null,
            type: require("PanelAction").Panel_FadeIn,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_FadeIn;
            }
        },

        action_fadeOut: {
            default: null,
            type: require("PanelAction").Panel_FadeOut,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_FadeOut;
            }
        },

        action_fadeTo: {
            default: null,
            type: require("PanelAction").Panel_FadeTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_FadeTo;
            }
        },

        action_blink: {
            default: null,
            type: require("PanelAction").Panel_Blink,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_Blink;
            }
        },

        action_jumpTo: {
            default: null,
            type: require("PanelAction").Panel_JumpTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_JumpTo;
            }
        },

        action_jumpBy: {
            default: null,
            type: require("PanelAction").Panel_JumpBy,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_JumpBy;
            }
        },

        action_bezierTo: {
            default: null,
            type: require("PanelAction").Panel_BezierTo,
            tooltip: "按贝赛尔曲线轨迹移动到目标位置",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_BezierTo;
            }
        },

        action_bezierBy: {
            default: null,
            type: require("PanelAction").Panel_BezierBy,
            tooltip: "按贝赛尔曲线轨迹偏移",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_BezierBy;
            }
        },

        action_skewTo: {
            default: null,
            type: require("PanelAction").Panel_SkewTo,
            tooltip: "偏斜到目标角度",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_SkewTo;
            }
        },

        action_skewBy: {
            default: null,
            type: require("PanelAction").Panel_SkewBy,
            tooltip: "偏斜指定的角度",
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_SkewBy;
            }
        },

        action_tintTo: {
            default: null,
            type: require("PanelAction").Panel_TintTo,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_TintTo;
            }
        },

        action_tintBy: {
            default: null,
            type: require("PanelAction").Panel_TintBy,
            visible: function() {
                return this.actionType == Panel_Action_Type.Panel_TintBy;
            }
        },
    }),
});

module.export = Panel_Action;

使用Action的组件（拖到需要做动作的节点上）

PanelAction.js

var Panel_ActionInterval = cc.Class({
    name: "Panel_ActionInterval",
    properties: {
        
    },
});


var Panel_Sequence = cc.Class({
    name: "Panel_Sequence",
    extends: Panel_ActionInterval,
    properties: () => ({
        actionArray: [require("Panel_Action")],
    }),
});


var Panel_Repeat = cc.Class({
    name: "Panel_Repeat",
    extends: Panel_ActionInterval,
    properties: () => ({
        action: require("Panel_Action"),
        times: {
            default: 1,
            type: cc.Integer,
            displayName: "次数",
            min: 1,
        },
    }),
});


var Panel_RepeatForever = cc.Class({
    name: "Panel_RepeatForever",
    extends: Panel_ActionInterval,
    properties: () => ({
        action: require("Panel_Action"),
    }),
});


var Panel_Spawn = cc.Class({
    name: "Panel_Spawn",
    extends: Panel_ActionInterval,
    properties: () => ({
        actionArray: [require("Panel_Action")],
    }),
});


var Panel_DelayTime = cc.Class({
    name: "Panel_DelayTime",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
    },
});


var Panel_MoveTo = cc.Class({
    name: "Panel_MoveTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "目标坐标值",
        },
    },
});


var Panel_MoveBy = cc.Class({
    name: "Panel_MoveBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "位移偏移量",
        },
    },
});


var Panel_RotateTo = cc.Class({
    name: "Panel_RotateTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "目标旋转值",
        },
    },
});


var Panel_RotateBy = cc.Class({
    name: "Panel_RotateBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "旋转偏移量",
        },
    },
});


var Panel_ScaleTo = cc.Class({
    name: "Panel_ScaleTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "目标缩放值",
        },
    },
});


var Panel_ScaleBy = cc.Class({
    name: "Panel_ScaleBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "缩放偏移量",
        },
    },
});


var Panel_FadeIn = cc.Class({
    name: "Panel_FadeIn",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
    },
});


var Panel_FadeOut = cc.Class({
    name: "Panel_FadeOut",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
    },
});


var Panel_FadeTo = cc.Class({
    name: "Panel_FadeTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        opacity: {
            default: 0,
            type: cc.Integer,
            displayName: "透明值",
            min: 0,
            max: 255,
        },
    },
});


var Panel_Blink = cc.Class({
    name: "Panel_Blink",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        blinks: {
            default: 1,
            type: cc.Integer,
            displayName: "次数",
            min: 1,
        },
    },
});


var Panel_JumpTo = cc.Class({
    name: "Panel_JumpTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "目标坐标值",
        },
        height: {
            default: 0,
            type: cc.Float,
            displayName: "高度",
        },
        jumps: {
            default: 1,
            type: cc.Integer,
            displayName: "次数",
            min: 1,
        },
    },
});


var Panel_JumpBy = cc.Class({
    name: "Panel_JumpBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "坐标偏移量",
        },
        height: {
            default: 0,
            type: cc.Float,
            displayName: "高度",
        },
        jumps: {
            default: 1,
            type: cc.Integer,
            displayName: "次数",
            min: 1,
        },
    },
});


var Panel_BezierTo = cc.Class({
    name: "Panel_BezierTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2s: {
            default: [],
            type: cc.Vec2,
            displayName: "所有坐标",
        },
    },
});


var Panel_BezierBy = cc.Class({
    name: "Panel_BezierBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2s: {
            default: [],
            type: cc.Vec2,
            displayName: "所有坐标偏移量",
        },
    },
});


var Panel_SkewTo = cc.Class({
    name: "Panel_SkewTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "目标偏斜角度值",
        },
    },
});


var Panel_SkewBy = cc.Class({
    name: "Panel_SkewBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        vec2: {
            default: new cc.Vec2(),
            displayName: "偏斜角度偏移量",
        },
    },
});


var Panel_TintTo = cc.Class({
    name: "Panel_TintTo",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        color: {
            default: new cc.Color,
            displayName: "目标颜色值"
        }
    },
});


var Panel_TintBy = cc.Class({
    name: "Panel_TintBy",
    extends: Panel_ActionInterval,
    properties: {
        duration: {
            default: 0,
            type: cc.Float,
            displayName: "时长",
            min: 0,
        },
        color: {
            default: new cc.Color,
            displayName: "颜色值偏移量"
        }
    },
});






cc.Class({
    extends: cc.Component,

    properties: {
        //baseAction: [Panel_Action],
        baseAction2: require("Panel_Action"),
        //baseAction3: Panel_Action,
        //baseAction4: Panel_TintTo,
        //baseAction5: Panel_TintTo,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
        
    },

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


module.export = {
    Panel_ActionInterval : Panel_ActionInterval,
    Panel_Sequence : Panel_Sequence,
    Panel_Repeat : Panel_Repeat,
    Panel_RepeatForever : Panel_RepeatForever,
    Panel_Spawn : Panel_Spawn,
    Panel_DelayTime : Panel_DelayTime,
    Panel_MoveTo : Panel_MoveTo,
    Panel_MoveBy : Panel_MoveBy,
    Panel_RotateTo : Panel_RotateTo,
    Panel_RotateBy : Panel_RotateBy,
    Panel_ScaleTo : Panel_ScaleTo,
    Panel_ScaleBy : Panel_ScaleBy,
    Panel_FadeIn : Panel_FadeIn,
    Panel_FadeOut : Panel_FadeOut,
    Panel_FadeTo : Panel_FadeTo,
    Panel_Blink : Panel_Blink,
    Panel_JumpTo : Panel_JumpTo,
    Panel_JumpBy : Panel_JumpBy,
    Panel_BezierTo : Panel_BezierTo,
    Panel_BezierBy : Panel_BezierBy,
    Panel_SkewTo : Panel_SkewTo,
    Panel_SkewBy : Panel_SkewBy,
    Panel_TintTo : Panel_TintTo,
    Panel_TintBy : Panel_TintBy,
}

文章开头就说明了，暂时官方默认的面板没法支持嵌套定义的组件，先记录，后期再扩展inspector。
写成组件，主要是方便非程序的编辑人员就可以制作动画，虽然官方也提供了动作编辑器面板