【原創(chuàng)博文，轉(zhuǎn)載請注明出處！】

游戲中不少類似彈窗這樣的界面，比如設(shè)置、分享、用戶信息...，顯示的時候最暴力的方式就是設(shè)置根節(jié)點(diǎn)node.active = true or false；這樣界面通常在瞬間展現(xiàn)，毫無動畫，有一種生硬的感覺。于是我嘗試寫了個通用動畫組件，給界面增加一種類似“FadeInFadeOut”的效果(為了演示效果，我故意將動畫縮放時間*2，所以GIF看起來有點(diǎn)慢??)，先看一下GIF演示效果，如果覺得OK，可以繼續(xù)看下實現(xiàn)源碼(*￣︶￣)。

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

    /**
     * 執(zhí)行彈進(jìn)動畫
     * @param {界面根節(jié)點(diǎn)(包含黑色蒙版)} pageNode 
     * @param {需要進(jìn)行縮放的根節(jié)點(diǎn)（也就是去掉黑色蒙版后所有子節(jié)點(diǎn)父視圖）} 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彈窗層數(shù)",this.viewQueue.length);
    },

    /**
     *  彈進(jìn)動畫完成回調(diào)
     */
    onFadeInFinish() {
        console.log("彈進(jìn)動畫完成回調(diào)");
        let index = this.viewQueue.length-1;
        let viewObject = this.viewQueue[index];
        cc.eventManager.resumeTarget(viewObject.allNodeContainer, true);
    },

    /**
     * 執(zhí)行彈出動畫
     */
    startFadeOut() {
        this.toppestViewObject = this.viewQueue.pop();
        cc.eventManager.pauseTarget(this.toppestViewObject.allNodeContainer, true);
        this.toppestViewObject.allNodeContainer.runAction(this.actionFadeOut);
    },

    /**
     * 彈出動畫完成回調(diào)
     */
    onFadeOutFinish() {
        this.toppestViewObject.pageNode.active = false;
        this.toppestViewObject = null;
        console.log("界面上FadeInFadeOut彈窗層數(shù)",this.viewQueue.length);
    },

});

解釋一下：

startFadeIn(pageNode, allNodeContainer) {};這個方法帶了兩個參數(shù)pageNode、allNodeContainer。
其中：
pageNode是整個界面的根節(jié)點(diǎn)；
allNodeContainer是界面中需要做縮放部分的組件的根節(jié)點(diǎn)；
貌似對這兩個參數(shù)的解釋有點(diǎn)繞口，沒事我截圖項目文件說明一下

項目節(jié)點(diǎn)關(guān)系.png

根據(jù)圖中的節(jié)點(diǎn)關(guān)系，由于我們這邊的設(shè)計需求，每個界面都有一個與手機(jī)屏幕等尺寸的灰色背景，展示彈窗內(nèi)容的部分因為比手機(jī)屏幕?。ㄒ簿褪菆D中的白色區(qū)域），如果整體都做縮放動畫，會影響視覺體驗。所以一般都是灰色背景瞬間鋪滿屏幕，內(nèi)容部分以動畫展現(xiàn)，效果也就是上文中GIF的樣式。所以我的項目中這個界面的展現(xiàn)代碼是這樣實現(xiàn)的:

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

總結(jié)一下FadeInFadeOur.js使用方法：

• ①新建FadeInFadeOur全局實例對象;
  (注： cc.vv是我的游戲項目中全局對象。這個我是參照麒麟子大神那個開源的幽麟游戲源碼，應(yīng)該不少CocosCreator朋友也這么寫的吧(*^^*))

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

• ②設(shè)置界面顯示效果;

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

• ③設(shè)置關(guān)閉界面效果。

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

github源腳本地址

圖片發(fā)自簡書App