Skip to content

fix: fade ebg when bg is empty #922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HardyNLee wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

fix: fade ebg when bg is empty #922

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46b78b7
fix: fade ebg when bg is empty
HardyNLee Apr 1, 2026
a222189
fix: avoid unnecessary resource requests
HardyNLee Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
import { DEFAULT_BG_IN_DURATION } from '@/Core/constants';

let previousImageUrl = '';
let animation: Animation | null = null;

export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION) {
export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION, ease = 'ease-in-out') {
const ebg = document.getElementById('ebg') as HTMLElement;
if (ebg) {
ebg.style.backgroundImage = `url("${url}")`;
}
const ebgOverlay = document.getElementById('ebgOverlay') as HTMLElement;
if (ebgOverlay) {
ebgOverlay.style.backgroundImage = `url("${previousImageUrl}")`;
ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
if (animation) {
animation.cancel();
}
animation = ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
duration: duration,
easing: 'ease-in-out',
easing: ease,
});
}
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

当 url 或 previousImageUrl 为空时，使用 url("") 可能会导致浏览器产生无效的资源请求。此外，如果 previousImageUrl 为空，意味着没有前一个背景，此时执行淡出动画是没有意义的。建议在设置背景图时进行非空检查，并仅在有前置背景图时执行动画。

    ebg.style.backgroundImage = url ? `url("${url}")` : 'none';
  }
  const ebgOverlay = document.getElementById('ebgOverlay') as HTMLElement;
  if (ebgOverlay) {
    if (previousImageUrl) {
      ebgOverlay.style.backgroundImage = `url("${previousImageUrl}")`;
      if (animation) {
        animation.cancel();
      }
      animation = ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
        duration: duration,
        easing: ease,
      });
    } else {
      ebgOverlay.style.backgroundImage = 'none';
      if (animation) {
        animation.cancel();
        animation = null;
      }
    }
  }

previousImageUrl = url;
Expand Down
8 changes: 6 additions & 2 deletions packages/webgal/src/Stage/MainStage/useSetBg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { setEbg } from '@/Core/gameScripts/changeBg/setEbg';

import { getEnterExitAnimation } from '@/Core/Modules/animationFunctions';
import { WebGAL } from '@/Core/WebGAL';
import { DEFAULT_BG_OUT_DURATION } from '@/Core/constants';

export function useSetBg(stageState: IStageState) {
const bgName = stageState.bgName;
Expand All @@ -29,15 +30,17 @@ export function useSetBg(stageState: IStageState) {
WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, 'bg-main-softin', thisBgKey, stageState.effects);
setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects('bg-main-softin'), duration);
} else {
let exitDuration = DEFAULT_BG_OUT_DURATION;
const currentBg = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisBgKey);
if (currentBg) {
removeBg(currentBg);
exitDuration = removeBg(currentBg);
}
setEbg(bgName, exitDuration, 'cubic-bezier(0.5, 0, 0.75, 0)');
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

此处硬编码了 cubic-bezier(0.5, 0, 0.75, 0) 缓动函数，而 setEbg 的默认值以及在 bgName !== '' 分支（第29行）中的调用均使用默认的 ease-in-out。这种不一致可能会导致视觉上的突兀。建议统一使用常量管理缓动函数，或者确保这种差异是符合设计预期的。

}
}, [bgName]);
}

function removeBg(bgObject: IStageObject) {
function removeBg(bgObject: IStageObject): number {
WebGAL.gameplay.pixiStage?.removeAnimationWithSetEffects('bg-main-softin');
const oldBgKey = bgObject.key;
bgObject.key = 'bg-main-off' + String(new Date().getTime());
Expand All @@ -50,6 +53,7 @@ function removeBg(bgObject: IStageObject) {
WebGAL.gameplay.pixiStage?.removeAnimation(bgAniKey);
WebGAL.gameplay.pixiStage?.removeStageObjectByKey(bgKey);
}, duration);
return duration;
}

function addBg(type?: 'image' | 'spine', ...args: any[]) {
Expand Down
Loading