Egret社区
服务端控制页面的显示逻辑,但由于切后台导致计时器和动画停止,隔段时间后再回来,页面需要显示另一个样子
这时候需要将各个计时器和动画停止,再将动画运行到一半导致的图片属性变动重置
这样页面中的需要状态切换,动画等逻辑多了,代码需要改动的地方很多
这是我目前的做法,感觉很不好,有没有大神指点
分享到 :
1 人收藏

5 个回复

倒序浏览
df257666  圆转纯熟 | 2020-10-15 11:28:07
比如有个动画,刚好运行到一半切入后台,这时候动画把这张图片缩放了0.5,又半透明了,位置又移动了
等一段时间后切回前台,这时候界面要显示另一个样子,而这张图样子又停留在动画运行到一半时的时候
我这边得需要把动画停止,再把缩放改为1,半透明改回不透明
就是类似这样的动画很多,不同阶段的情况很多,这样需要加的代码就很多了,总感觉不太好的样子
siwenjie  登堂入室 | 2020-10-16 11:57:29
df257666 发表于 2020-10-15 11:28
比如有个动画,刚好运行到一半切入后台,这时候动画把这张图片缩放了0.5,又半透明了,位置又移动了
等一段 ...

你现在遇到的问题,恰好我们前段时间也遇到过,我们希望切换到后台,长连接不要断,逻辑不要停。

首先逻辑不要听,可以直接修改Main.ts文件里的lifecycle,将生命周期里的egret.ticker.pause()注释掉,这样切换到后台整个游戏不会暂停。
  1. <div>egret.lifecycle.onPause = () => {</div><div>    // egret.ticker.pause();</div><div>}</div>
复制代码
其次是动画部分,要根据不同的情况分别处理
1,延迟
下面两个差不多,都是延迟几秒后执行,这里需要注意的是,比如delay是3000,切换到后台2000毫秒,回来后会直接从2000开始,只需要再等1000毫秒就行了,所以使用的时候最好不要嵌套使用,不要在一个延迟里面放另一个延迟,因为里面的依然是从0开始。
egret.settimeout(delay),
egret.Tween.get(this).wait(delay).call(),
2,动画
动画切换到后台会暂停,切回到前台也分2种情况,第1种是放在延迟里,需要单独在别的地方记录暂停时间,然后play(Utils.pauseTime),在播放动画方法play里传参数进去,暂停时间超过动画时间,则直接执行最后一帧,第2种是没有放在延迟里,不要自己处理。
egret.tween.TweenGroup,
3,监听
下面3个都是类似于update的方法,监听时间改变,其中1和2的ontick方法有个参数,正常情况下参数=时间/帧数,就是每帧耗时,30毫秒左右。特殊情况比如卡顿,切到后台,再切回来,参数会是2帧之间的间隔,比如暂停2000毫秒,第一帧的参数就是2000,第二帧才会回到正常的30毫秒。3是没有参数,固定的每帧调用,无法得知暂停时间。
egret.Ticker.getInstance().register(this.onTick, this),
egret.startTick(this.onTick,this),
Event.ENTER_FRAME
4,统计暂停时间
如果你想知道此次切换到后台游戏暂停了多长时间,需要监听以下2个,每次切换到后台会触发onDeactivate,回到前台触发onActivate。
this.stage.addEventListener(egret.Event.ACTIVATE, this.onActivate, this);
this.stage.addEventListener(egret.Event.DEACTIVATE, this.onDeactivate, this);

  1. private oldPauseTime: number = 0;
  2. private onDeactivate() {
  3.     this.oldPauseTime = egret.getTimer();
  4. }
  5. private onActivate() {
  6.     Utils.pauseTime = egret.getTimer() - this.oldPauseTime;
  7. }
复制代码
5、注意事项
由于egret是运行在浏览器上,浏览器一共有4个事件:失去焦点,焦点,后台,前台。而我们游戏可以不需要焦点相关的两个方法,但是这两个方法也会触发onDeactivate和onActivate,如果不想触发,需要修改引擎里的文件。
比如我的引擎的版本是5.2.33,找到并打开WebHideHandler.ts文件,注释第46、47行:
  1. // window.addEventListener("focus", context.resume, false);
  2.         // window.addEventListener("blur", context.pause, false);
复制代码


panming0230  登堂入室 | 7 天前
记录一下
df257666  圆转纯熟 | 4 天前
siwenjie 发表于 2020-10-16 11:57
你现在遇到的问题,恰好我们前段时间也遇到过,我们希望切换到后台,长连接不要断,逻辑不要停。

首先逻 ...

如果用tween给一张图片做了缩放,位移,透明的动画,这tween运行到一半切入后台,

再等一会切回来,这时候服务器要求界面显示成另一个阶段的样子,这张图片需要显示成动画开始前的样子

这时候,这张图片缩放,位移,透明这些属性还是得需要自己再写代码手动重置下吧?

类似这样的,不同图片有不同的动画效果,多了后,就需要写很多重置代码

这应该是没有啥简便的方法去处理吧?
siwenjie  登堂入室 | 3 天前
df257666 发表于 2020-10-20 15:13
如果用tween给一张图片做了缩放,位移,透明的动画,这tween运行到一半切入后台,

再等一会切回来,这时 ...

不需要你重置啊,逻辑到下个阶段了,上个阶段的动画的最后一帧就是下个阶段的起始。只要你不放在延迟里,tween会自动处理的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部