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