Merge pull request #818 from HardyNLee/feat/ebg-fading

MakinoharaShoko · web-flow · commit 75f9683681ef · 2026-01-05T23:06:58.000+08:00
feat: add ebg fading
diff --git a/packages/webgal/index.html b/packages/webgal/index.html
@@ -7,6 +7,10 @@
     <link rel="manifest" href="/manifest.json" />
     <title>WebGAL</title>
     <style>
+      body {
+        background: black;
+      }
+
       .html-body__effect-background {
         height: 100vh;
         width: 100vw;
@@ -17,6 +21,20 @@
         position: absolute;
         top: 0;
         left: 0;
+        background-color: black;
+      }
+
+      .html-body__effect-background-overlay {
+        height: 100%;
+        width: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: black;
+        opacity: 0;
       }
 
       .html-body__title-enter {
@@ -115,7 +133,9 @@
   </head>
   <body>
     <!-- 背景模糊 -->
-    <div class="html-body__effect-background"></div>
+    <div id="ebg" class="html-body__effect-background">
+      <div id="ebgOverlay" class="html-body__effect-background-overlay"></div>
+    </div>
     <!-- 落地页 -->
     <div class="html-body__title-enter">
       <div class="title-enter__initial-background"></div>
diff --git a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
@@ -1,6 +1,19 @@
-export function setEbg(url: string) {
-  const ebg = document.querySelector('.html-body__effect-background') as HTMLElement;
+import { DEFAULT_BG_IN_DURATION } from '@/Core/constants';
+
+let previousImageUrl = '';
+
+export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION) {
+  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 }], {
+      duration: duration,
+      easing: 'ease-in-out',
+    });
+  }
+  previousImageUrl = url;
 }
diff --git a/packages/webgal/src/Stage/MainStage/useSetBg.ts b/packages/webgal/src/Stage/MainStage/useSetBg.ts
@@ -23,9 +23,9 @@ export function useSetBg(stageState: IStageState) {
         }
       }
       addBg(undefined, thisBgKey, bgName);
-      setEbg(bgName);
       logger.debug('重设背景');
       const { duration, animation } = getEnterExitAnimation('bg-main', 'enter', true);
+      setEbg(bgName, duration);
       WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, 'bg-main-softin', thisBgKey, stageState.effects);
       setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects('bg-main-softin'), duration);
     } else {

Original file line number	Diff line number	Diff line change
`@@ -23,9 +23,9 @@ export function useSetBg(stageState: IStageState) {`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`	`addBg(undefined, thisBgKey, bgName);`
`26`		`- setEbg(bgName);`
`27`	`26`	`logger.debug('重设背景');`
`28`	`27`	`const { duration, animation } = getEnterExitAnimation('bg-main', 'enter', true);`
	`28`	`+ setEbg(bgName, duration);`
`29`	`29`	`WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, 'bg-main-softin', thisBgKey, stageState.effects);`
`30`	`30`	`setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects('bg-main-softin'), duration);`
`31`	`31`	`} else {`