cocos creator制作彈窗有小到大的動畫顯示

參考：https://www.bilibili.com/video/BV1kJ411u72v?p=2

1.選擇要生成動畫的彈窗 》添加元件 》其他元件 》Animation

結果就是這樣的

這裡看到需要 animation-clip 檔案，下面制作animation-clip檔案

2.在 assets 中建立檔案夾 animClip , 專門用來存放 animation-clip 檔案的，名字可以随便取

右鍵 》建立 》Animation Clip，這裡我們需要用到兩個動畫，是以我建立了兩個animation-clip檔案

3.動畫制作

4.開始由無到有的播放，代碼

cc.Class({
    extends: cc.Component,

    properties: {
        scrollView: {
            default: null,
            type: cc.ScrollView
        },
        ruleTip: {
            default: null,
            type: cc.Node
        }
        // scrollView: cc.ScrollView
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this.ruleTip = this.ruleTip.getComponent(cc.Animation);
        this.ruleTip.node.active = false;   //這裡要node是因為this.ruleTip = this.ruleTip.getComponent(cc.Animation);這個重新擷取了Animation，
                                            // 如果this.ruleTip.node.active = false;
                                            // 放在this.ruleTip = this.ruleTip.getComponent(cc.Animation);這句的上面就不用node了

    },

    bottonClick(target, data) {
        this.ruleTip.node.active = true;
        this.ruleTip.play('scaleToShow')
    },
           

5.隐藏，制作動畫，就是将上面的顯示的動畫相反制作，這裡就不講解了

6.隐藏代碼

注意：如果需要隐藏，是需要回調函數的

制作回調函數：

右鍵方塊：點選編輯，在裡面寫上函數名稱

這裡可以添加很多函數

完整代碼：

cc.Class({
    extends: cc.Component,

    properties: {
        scrollView: {
            default: null,
            type: cc.ScrollView
        },
        ruleTip: {
            default: null,
            type: cc.Node
        }
        // scrollView: cc.ScrollView
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this.ruleTip = this.ruleTip.getComponent(cc.Animation);
        this.ruleTip.node.active = false; //這裡要node是因為this.ruleTip = this.ruleTip.getComponent(cc.Animation);這個重新擷取了Animation，如果this.ruleTip.node.active = false;放在this.ruleTip = this.ruleTip.getComponent(cc.Animation);這句的上面就不用node了
        this.ruleTip.scaleToHidePlayEnd = function() {
            this.ruleTip.node.active = false;
        }.bind(this)

    },

    bottonClick(target, data) {
        if (data == 'help') {
            this.ruleTip.node.active = true;
            this.ruleTip.play('scaleToShow')
        } else if (data == 'close') {
            this.ruleTip.play('scaleToHide');
        }
    },