cocos creator - 自定義屬性檢查面板

一個自定義屬性檢查面板腳本

let AnimationType = cc.Enum({
    scale:1,
    move:2,
    fadeIn:3,
    jump:4
});
let animTypeProperties ={
    1:["startZoom","endZoom"],
    2:["startPos","endPos"],
}
cc.Class({
    extends: cc.Component,
    //在編輯器，組件菜單欄顯示出來
    editor:{
        menu:"custom/AddPanelAnim"
    },
    properties: {
        animationType:{
            default:AnimationType.scale,
            type:AnimationType,
            notify:function(e){ //該屬性修改時會觸發該方法
                this.change(this.animationType)
            }
        },

        runTime:{
            default:0.5,
        },
        //sacle - properties
        startZoom:{
            default:0,
            range:[0,1],
        },
        endZoom:{
            default:1,
            range:[0,1],
        },
        //move - properties
        startPos:{
            default:cc.v2(-600,0),
            visible:false
        },
        endPos:{
            default:cc.v2(0,0),
            visible:false
        },
       
    },

    change:function(e){
        cc.log("change",e,this.node.width/2)
        let isVisible = false;
        //根據不同的選擇顯示不同的屬性
        for (const key in animTypeProperties) {
            const Properties = animTypeProperties[key];
            isVisible = key == e ? true : false;
            Properties.forEach(attrName => {
                cc.Class.attr(this, attrName, {
                    visible:isVisible
                });
            });
        }
    },

    onLoad: function () {
        this.playAnim();
    },

    playAnim(){
        switch (this.animationType) {
            case AnimationType.scale:
                this.playScaleAnim();
                break;
            case AnimationType.move:
                this.playMoveAnim();
                break;
            case AnimationType.fadeIn:
                this.playFadeInAnim();
                break;
            default:
                break;
        }
    },

    playScaleAnim(){
        this.node.setScale(this.startZoom);
        let action = cc.scaleTo(this.runTime,this.endZoom);
        this.node.runAction(action);
    },

    playMoveAnim(){
        this.node.setPosition(this.startPos);
        let action = cc.moveTo(this.runTime,this.endPos);
        this.node.runAction(action);
    },

    playFadeInAnim(){
        this.node.opacity = 0;
        let action = cc.fadeIn(this.runTime);
        this.node.runAction(action);
    }
})