【原创博文，转载请注明出处！】
游戏中不少类似弹窗这样的界面，比如设置、分享、用户信息...，显示的时候最暴力的方式就是设置根节点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();
},
图片发自简书App
