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');
        }
    },