fix: fade ebg when bg is empty

packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts

@@ -1,19 +1,32 @@
 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}")`;
+    ebg.style.backgroundImage = getValidBgImage(url);
   }
   const ebgOverlay = document.getElementById('ebgOverlay') as HTMLElement;
   if (ebgOverlay) {
-    ebgOverlay.style.backgroundImage = `url("${previousImageUrl}")`;
-    ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
+    ebgOverlay.style.backgroundImage = getValidBgImage(previousImageUrl);
+    if (animation) {
+      animation.cancel();
+    }
+    animation = ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
       duration: duration,
-      easing: 'ease-in-out',
+      easing: ease,
     });
   }
   previousImageUrl = url;
 }
+
+function getValidBgImage(url: string): string {
+  if (url === '') {
+    return 'none';
+  } else {
+    return `url("${url}")`;
+  }
+}
+

packages/webgal/src/Stage/MainStage/useSetBg.ts

@@ -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;
@@ -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)');
     }
   }, [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());
@@ -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[]) {