Skip to content

feat: add ebg fading #818

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

Merged
MakinoharaShoko merged 1 commit into from
Jan 5, 2026
Merged

feat: add ebg fading #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 21 additions & 1 deletion packages/webgal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Comment on lines +27 to 38
Copy link

@gemini-code-assist gemini-code-assist bot Dec 29, 2025

Choose a reason for hiding this comment

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

medium

这个新的 CSS 类 .html-body__effect-background-overlay 与现有的 .html-body__effect-background 类（第 14-25 行）之间存在大量重复的样式属性，例如 background-position, background-repeat, background-size, position 等。

代码重复会增加未来维护的难度，当需要修改这些共享样式时，不得不在多个地方进行同步修改，容易出错。

为了遵循 DRY (Don't Repeat Yourself) 原则，建议进行重构。一个可能的方案是创建一个通用的类来包含共享的样式，然后让 .html-body__effect-background 和 .html-body__effect-background-overlay 都使用这个通用类，从而消除重复。


.html-body__title-enter {
Expand Down Expand Up @@ -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>
Expand Down
17 changes: 15 additions & 2 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,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 = '';
Copy link

@gemini-code-assist gemini-code-assist bot Dec 29, 2025

Choose a reason for hiding this comment

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

medium

使用模块级别的变量 previousImageUrl 来存储状态，会使 setEbg 函数变为有状态的（stateful）函数，并且不是可重入的（non-reentrant）。

虽然在当前的使用场景下（可能只有一个地方调用它），这可能不会造成问题，但如果未来有多个独立的组件需要调用 setEbg，它们会共享 previousImageUrl 这个状态，可能导致非预期的行为和竞态条件。

为了提高代码的健壮性和可维护性，建议将状态管理与函数逻辑分离。例如，可以创建一个 EbgManager 类来封装状态和逻辑，或者修改 setEbg 函数，让调用者负责维护和传递上一个 URL，使其成为一个无状态的纯函数。


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;
}
2 changes: 1 addition & 1 deletion packages/webgal/src/Stage/MainStage/useSetBg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down