CocosCreator载入界面动画效果

【原创博文，转载请注明出处！】

游戏中不少类似弹窗这样的界面，比如设置、分享、用户信息...，显示的时候最暴力的方式就是设置根节点node.active = true or false；这样界面通常在瞬间展现，毫无动画，有一种生硬的感觉。于是我尝试写了个通用动画组件，给界面增加一种类似“FadeInFadeOut”的效果(为了演示效果，我故意将动画缩放时间*2，所以GIF看起来有点慢😊)，先看一下GIF演示效果，如果觉得OK，可以继续看下实现源码(*￣︶￣)。

CocosCreator界面载入动画.gif

动画效果组件FadeInFadeOut.js如下：

/*
 * FadeInFadeOut.js
 * 界面FadeInFadeOut效果
 * @Author: Rephontil 
 * @Date: 2018-09-19 10:16:48 
 * @Last Modified by: Rephontil
 * @Last Modified time: 2018-09-20 12:34:19
 */

cc.Class({
    extends: cc.Component,

    properties: {
        /**动画速度 */
        defaultAnimSpeed: 0.15,
        /**界面图层队列 */
        viewQueue: new Array(),
        /**最顶层视图对象 => { "pageNode": pageNode, "allNodeContainer": allNodeContainer } */
        toppestViewObject: null,
    },

    init() {
        // 动画 
        var cbFadeOut = cc.callFunc(this.onFadeOutFinish, this);
        var cbFadeIn = cc.callFunc(this.onFadeInFinish, this);
        this.actionFadeIn = cc.sequence(cc.spawn(cc.fadeTo(this.defaultAnimSpeed, 255), cc.scaleTo(this.defaultAnimSpeed, 1.0)), cbFadeIn);
        this.actionFadeOut = cc.sequence(cc.spawn(cc.fadeTo(this.defaultAnimSpeed, 0), cc.scaleTo(this.defaultAnimSpeed, .2)), cbFadeOut);
    },

    /**
     * 执行弹进动画
     * @param {界面根节点(包含黑色蒙版)} pageNode 
     * @param {需要进行缩放的根节点（也就是去掉黑色蒙版后所有子节点父视图）} allNodeContainer 
     */
    startFadeIn(pageNode, allNodeContainer) {
        cc.eventManager.pauseTarget(allNodeContainer, true);
        allNodeContainer.position = cc.p(0, 0);
        allNodeContainer.setScale(.2);
        allNodeContainer.opacity = 0;
        allNodeContainer.runAction(this.actionFadeIn);

        let viewObject = { "pageNode": pageNode, "allNodeContainer": allNodeContainer };
        this.viewQueue.push(viewObject);
        console.log("界面上FadeInFadeOut弹窗层数",this.viewQueue.length);
    },

    /**
     *  弹进动画完成回调
     */
    onFadeInFinish() {
        console.log("弹进动画完成回调");
        let index = this.viewQueue.length-1;
        let viewObject = this.viewQueue[index];
        cc.eventManager.resumeTarget(viewObject.allNodeContainer, true);
    },

    /**
     * 执行弹出动画
     */
    startFadeOut() {
        this.toppestViewObject = this.viewQueue.pop();
        cc.eventManager.pauseTarget(this.toppestViewObject.allNodeContainer, true);
        this.toppestViewObject.allNodeContainer.runAction(this.actionFadeOut);
    },

    /**
     * 弹出动画完成回调
     */
    onFadeOutFinish() {
        this.toppestViewObject.pageNode.active = false;
        this.toppestViewObject = null;
        console.log("界面上FadeInFadeOut弹窗层数",this.viewQueue.length);
    },

});

解释一下：

startFadeIn(pageNode, allNodeContainer) {};这个方法带了两个参数pageNode、allNodeContainer。
其中：
pageNode是整个界面的根节点；
allNodeContainer是界面中需要做缩放部分的组件的根节点；
貌似对这两个参数的解释有点绕口，没事我截图项目文件说明一下

项目节点关系.png

根据图中的节点关系，由于我们这边的设计需求，每个界面都有一个与手机屏幕等尺寸的灰色背景，展示弹窗内容的部分因为比手机屏幕小（也就是图中的白色区域），如果整体都做缩放动画，会影响视觉体验。所以一般都是灰色背景瞬间铺满屏幕，内容部分以动画展现，效果也就是上文中GIF的样式。所以我的项目中这个界面的展现代码是这样实现的:

headImage() {
        this.myCardInfoLayer.active = true;
        cc.vv.fadeInFadeOut.startFadeIn(this.myCardInfoLayer, this.myCardInfoLayer.getChildByName("mycard_container_bg"));
    },

总结一下FadeInFadeOur.js使用方法：

• ①新建FadeInFadeOur全局实例对象;
  (注： cc.vv是我的游戏项目中全局对象。这个我是参照麒麟子大神那个开源的幽麟游戏源码，应该不少CocosCreator朋友也这么写的吧(*^^*))

 /**
   * 界面淡入淡出动画效果
  */
  let FadeInFadeOur = require("FadeInFadeOur");
  cc.vv.fadeInFadeOut = new FadeInFadeOur();
  cc.vv.fadeInFadeOut.init();

• ②设置界面显示效果;

 this.shareLayer.active = true;
 cc.vv.fadeInFadeOut.startFadeIn(this.shareLayer,  this.shareLayer.getChildByName("share_bg"));

• ③设置关闭界面效果。

 closeBtnOnClicked() {
     cc.vv.fadeInFadeOut.startFadeOut();
 },

github源脚本地址

CocosCreator载入界面动画效果