修复背景切换时不顺畅的问题

liudi5200 · Apr 20, 2022 · e190bb0 · e190bb0
1 parent e6eaea2
commit e190bb0
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 87 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,15 @@
-import { Provider } from 'reto/provider';
-import { GuiStateStore } from './Core/store/GUI';
+import {Provider} from 'reto/provider';
+import {GuiStateStore} from './Core/store/GUI';
 import Title from './Components/UI/Title/Title';
-import { useEffect, useRef } from 'react';
-import { storeRef } from './Core/store/storeRef';
-import { initializeScript } from './Core/initializeScript';
-import { stageStateStore } from './Core/store/stage';
-import { userDataStateStore } from './Core/store/userData';
+import {useEffect, useRef} from 'react';
+import {storeRef} from './Core/store/storeRef';
+import {initializeScript} from './Core/initializeScript';
+import {stageStateStore} from './Core/store/stage';
+import {userDataStateStore} from './Core/store/userData';
 import Menu from './Components/UI/Menu/Menu';
-import { MainStage } from './Components/Stage/MainStage';
-import { BottomControlPanel } from './Components/UI/BottomControlPanel/ButtomControlPanel';
-import { Backlog } from './Components/UI/Backlog/Backlog';
+import {MainStage} from './Components/Stage/MainStage';
+import {BottomControlPanel} from './Components/UI/BottomControlPanel/ButtomControlPanel';
+import {Backlog} from './Components/UI/Backlog/Backlog';
 
 function App() {
     // 建立对所有状态存储的引用，方便管理
@@ -26,15 +26,15 @@ function App() {
 
     // Provider用于对各组件提供存储
     return (
-        <div className="App" style={{ height: '100%', width: '100%', background: 'rgba(0, 0, 0, 0.6)' }}>
+        <div className="App" style={{height: '100%', width: '100%', background: 'rgba(0, 0, 0, 0.6)'}}>
             <Provider of={userDataStateStore} storeRef={userDataStoreRef}>
                 <Provider of={stageStateStore} storeRef={stageStoreRef}>
                     <Provider of={GuiStateStore} storeRef={GuiStoreRef}>
-                        <Title />
-                        <Menu />
-                        <MainStage />
-                        <BottomControlPanel />
-                        <Backlog />
+                        <Title/>
+                        <Menu/>
+                        <MainStage/>
+                        <BottomControlPanel/>
+                        <Backlog/>
                     </Provider>
                 </Provider>
             </Provider>

diff --git a/src/Components/Stage/MainStage.tsx b/src/Components/Stage/MainStage.tsx
@@ -44,18 +44,18 @@ export const MainStage: FC = () => {
         }, 100);
     });
     return <div className={styles.MainStage_main}>
-        <div key={'bgMain' + stageStore.stageState.bgName}
-             id="MainStage_bg_MainContainer"
-             className={styles.MainStage_bgContainer} style={{
-            backgroundImage: `url("${stageStore.stageState.bgName}")`,
-            backgroundSize: "cover"
-        }}/>
         <div key={'bgOld' + stageStore.stageState.oldBgName}
              id="MainStage_bg_OldContainer"
              className={styles.MainStage_oldBgContainer} style={{
             backgroundImage: `url("${stageStore.stageState.oldBgName}")`,
             backgroundSize: "cover"
         }}/>
+        <div key={'bgMain' + stageStore.stageState.bgName}
+             id="MainStage_bg_MainContainer"
+             className={styles.MainStage_bgContainer} style={{
+            backgroundImage: `url("${stageStore.stageState.bgName}")`,
+            backgroundSize: "cover"
+        }}/>
         <FigureContainer/>
         {GuiState.GuiState.showTextBox && <TextBox/>}
         <EventHandler/>

diff --git a/src/Components/Stage/TextBox/textbox.module.scss b/src/Components/Stage/TextBox/textbox.module.scss
@@ -10,7 +10,7 @@
   position: absolute;
   z-index: 6;
   width: 100%;
-  height: 38.5%;
+  min-height: 37.5%;
   background: linear-gradient(transparent,
           rgba(0, 0, 0, .25) 25%,
           rgba(0, 0, 0, .35) 75%,

diff --git a/src/Components/Stage/mainStage.module.scss b/src/Components/Stage/mainStage.module.scss
@@ -3,21 +3,27 @@
     height: 100%;
     position: absolute;
     z-index: 1;
-    animation: MainStage_showBgSoftly 100ms forwards;
-    opacity: 0;
+    //animation: MainStage_showBgSoftly 100ms forwards;
+    opacity: 1;
 }
 
 .MainStage_bgContainer {
+    top: 0;
+    position: absolute;
     background-size: cover;
     width: 100%;
     height: 100%;
+    z-index: 1;
 }
 
-.MainStage_bgContainer_onChange {
+.MainStage_bgContainer_Settled {
+    top: 0;
+    position: absolute;
     background-size: cover;
     width: 100%;
     height: 100%;
-    animation: MainStage_showBgSoftly 3000ms;
+    animation: MainStage_showBgSoftly 1ms forwards;
+    z-index: 1;
 }
 
 .MainStage_oldBgContainer {
@@ -26,7 +32,8 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    animation: MainStage_oldBgFadeout 1s forwards;
+    z-index: 0;
+    animation: MainStage_oldBgFadeout 3s forwards;
 }
 
 .MainStage_oldBgContainer_Settled {

diff --git a/src/Components/UI/BottomControlPanel/ButtomControlPanel.tsx b/src/Components/UI/BottomControlPanel/ButtomControlPanel.tsx
@@ -12,28 +12,28 @@ import {
 } from '@icon-park/react';
 import styles from './bottomControlPanel.module.scss';
 import {useStore} from 'reto';
-import {GuiStateStore, MenuPanelTag} from '../../../Core/store/GUI';
-import {switchAuto} from '../../../Core/controller/gamePlay/autoPlay';
-import {switchFast} from '../../../Core/controller/gamePlay/fastSkip';
-import {playBgm} from '../../../Core/util/playBgm';
+import {GuiStateStore, MenuPanelTag} from '@/Core/store/GUI';
+import {switchAuto} from '@/Core/controller/gamePlay/autoPlay';
+import {switchFast} from '@/Core/controller/gamePlay/fastSkip';
+import {playBgm} from '@/Core/util/playBgm';
 
 export const BottomControlPanel = () => {
-    const GUIstore = useStore(GuiStateStore);
-    return (
-        <div className={styles.main}>
-            {GUIstore.GuiState.showTextBox && (
-                <span className={styles.singleButton} onClick={() => GUIstore.setVisibility('showTextBox', false)}>
+    const GUIStore = useStore(GuiStateStore);
+    return (<div className={styles.ToCenter}>
+        {GUIStore.GuiState.showTextBox && <div className={styles.main}>
+            {GUIStore.GuiState.showTextBox && (
+                <span className={styles.singleButton} onClick={() => GUIStore.setVisibility('showTextBox', false)}>
                 <PreviewCloseOne className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
                 <span className={styles.button_text}>隐藏</span>
             </span>
             )}
-            {!GUIstore.GuiState.showTextBox && (
-                <span className={styles.singleButton} onClick={() => GUIstore.setVisibility('showTextBox', true)}>
+            {!GUIStore.GuiState.showTextBox && (
+                <span className={styles.singleButton} onClick={() => GUIStore.setVisibility('showTextBox', true)}>
                 <PreviewOpen className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
                 <span className={styles.button_text}>显示</span>
             </span>
             )}
-            <span className={styles.singleButton} onClick={() => GUIstore.setVisibility('showBacklog', true)}>
+            <span className={styles.singleButton} onClick={() => GUIStore.setVisibility('showBacklog', true)}>
                 <AlignTextLeftOne className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
                 <span className={styles.button_text}>回想</span>
             </span>
@@ -59,8 +59,8 @@ export const BottomControlPanel = () => {
             <span
                 className={styles.singleButton}
                 onClick={() => {
-                    GUIstore.setMenuPanelTag(MenuPanelTag.Save);
-                    GUIstore.setVisibility('showMenuPanel', true);
+                    GUIStore.setMenuPanelTag(MenuPanelTag.Save);
+                    GUIStore.setVisibility('showMenuPanel', true);
                 }}
             >
                 <Save className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
@@ -69,8 +69,8 @@ export const BottomControlPanel = () => {
             <span
                 className={styles.singleButton}
                 onClick={() => {
-                    GUIstore.setMenuPanelTag(MenuPanelTag.Load);
-                    GUIstore.setVisibility('showMenuPanel', true);
+                    GUIStore.setMenuPanelTag(MenuPanelTag.Load);
+                    GUIStore.setVisibility('showMenuPanel', true);
                 }}
             >
                 <FolderOpen className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
@@ -79,8 +79,8 @@ export const BottomControlPanel = () => {
             <span
                 className={styles.singleButton}
                 onClick={() => {
-                    GUIstore.setMenuPanelTag(MenuPanelTag.Option);
-                    GUIstore.setVisibility('showMenuPanel', true);
+                    GUIStore.setMenuPanelTag(MenuPanelTag.Option);
+                    GUIStore.setVisibility('showMenuPanel', true);
                 }}
             >
                 <SettingTwo className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
@@ -89,13 +89,14 @@ export const BottomControlPanel = () => {
             <span
                 className={styles.singleButton}
                 onClick={() => {
-                    GUIstore.setVisibility('showTitle', true);
-                    playBgm(GUIstore.GuiState.titleBgm);
+                    GUIStore.setVisibility('showTitle', true);
+                    playBgm(GUIStore.GuiState.titleBgm);
                 }}
             >
                 <Home className={styles.button} theme="outline" size="30" fill="#f5f5f7" strokeWidth={3.5}/>
                 <span className={styles.button_text}>标题</span>
             </span>
+        </div>}
         </div>
     );
 };
diff --git a/src/Components/UI/BottomControlPanel/bottomControlPanel.module.scss b/src/Components/UI/BottomControlPanel/bottomControlPanel.module.scss
@@ -1,47 +1,54 @@
+.ToCenter {
+    display: flex;
+    justify-content: center;
+}
+
 .main {
-  position: absolute;
-  bottom: 0.7em;
-  right: 2em;
-  z-index: 9;
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(150,150,150, 0.25);
-  padding: 0.15em 1.75em 0.15em 1.75em;
-  border-radius: 10px;
+    border-bottom: 2px solid rgba(255,255,255,0.25);
+    position: absolute;
+    bottom: 0.7em;
+    z-index: 9;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    align-items: center;
+    //background-color: rgba(150, 150, 150, 0.25);
+    padding: 0.15em 1.75em 0.15em 1.75em;
+    //background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
+    //border-radius: 10px;
 }
 
 .button {
-  position: relative;
-  top: 2px;
-  padding: 0 3px 0 0;
+    position: relative;
+    top: 2px;
+    padding: 0 3px 0 0;
 }
 
 .button_text {
-  position: relative;
-  bottom: 4px;
+    position: relative;
+    bottom: 4px;
 }
 
 .button_on {
-  height: 100%;
-  display: inline-block;
-  color: white;
-  font-size: 150%;
-  padding: 0.2em 0.35em 0 0.2em;
-  transition: background-color 0.5s;
-  background: rgba(255, 255, 255, 0.3);
+    height: 100%;
+    display: inline-block;
+    color: white;
+    font-size: 150%;
+    padding: 0.2em 0.6em 0 0.45em;
+    transition: background-color 0.5s;
+    background: rgba(255, 255, 255, 0.3);
 }
 
 .singleButton {
-  height: 100%;
-  display: inline-block;
-  color: white;
-  font-size: 150%;
-  padding: 0.2em 0.6em 0 0.45em;
-  transition: background-color 0.5s;
+    //border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    height: 100%;
+    display: inline-block;
+    color: white;
+    font-size: 150%;
+    padding: 0.2em 0.6em 0 0.45em;
+    transition: background-color 0.5s;
 }
 
 .singleButton:hover {
-  background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.3);
 }
diff --git a/src/Core/controller/gamePlay/scripts/changeBg.ts b/src/Core/controller/gamePlay/scripts/changeBg.ts
@@ -1,8 +1,8 @@
-import { ISentence } from '../../../interface/coreInterface/sceneInterface';
-import { IPerform } from '../../../interface/coreInterface/performInterface';
-import { getRandomPerformName } from '../../../util/getRandomPerformName';
+import {ISentence} from '@/Core/interface/coreInterface/sceneInterface';
+import {IPerform} from '@/Core/interface/coreInterface/performInterface';
+// import {getRandomPerformName} from '../../../util/getRandomPerformName';
 import styles from '../../../../Components/Stage/mainStage.module.scss';
-import { getRef } from '../../../store/storeRef';
+import {getRef} from '@/Core/store/storeRef';
 
 /**
  * 进行背景图片的切换
@@ -13,18 +13,18 @@ export const changeBg = (sentence: ISentence): IPerform => {
     const oldBgName = getRef('stageRef').stageState.bgName;
     getRef('stageRef').setStage('oldBgName', oldBgName); // 改变旧背景，使其渐变消失
     getRef('stageRef').setStage('bgName', sentence.content); // 改变新背景，使其呈现
-    const performInitName: string = getRandomPerformName();
+    // const performInitName: string = getRandomPerformName();
     return {
-        performName: performInitName,
+        performName: 'none',
         duration: 1000,
         isOver: false,
         isHoldOn: false,
         stopFunction: () => {
             // const bgContainer = document.getElementById('MainStage_bg_MainContainer');
             // if (bgContainer) bgContainer.className = styles.MainStage_bgContainer;
-            const oldBgContainer = document.getElementById('MainStage_bg_OldContainer');
-            if (oldBgContainer) {
-                oldBgContainer.className = styles.MainStage_oldBgContainer_Settled;
+            const BgContainer = document.getElementById('MainStage_bg_MainContainer');
+            if (BgContainer) {
+                BgContainer.className = styles.MainStage_bgContainer_Settled;
             }
         },
         blockingNext: () => false,