fix: clear animation before exiting

Hardy--Lee · Hardy--Lee · commit fa4c9e82f76c · 2025-09-23T10:38:53.000+08:00
diff --git a/packages/webgal/src/Core/Modules/animationFunctions.ts b/packages/webgal/src/Core/Modules/animationFunctions.ts
@@ -93,3 +93,7 @@ export function getEnterExitAnimation(
     return { duration, animation };
   }
 }
+
+export function getAnimationPerformName(target: string) {
+  return `animation-${target}`;
+}
diff --git a/packages/webgal/src/Core/gameScripts/changeBg/index.ts b/packages/webgal/src/Core/gameScripts/changeBg/index.ts
@@ -11,7 +11,7 @@ import { ITransform } from '@/store/stageInterface';
 import { generateTransformAnimationObj } from '@/Core/controller/stage/pixi/animations/generateTransformAnimationObj';
 import { AnimationFrame, IUserAnimation } from '@/Core/Modules/animations';
 import cloneDeep from 'lodash/cloneDeep';
-import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
+import { getAnimateDuration, getAnimationPerformName } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 
 /**
@@ -32,11 +32,18 @@ export const changeBg = (sentence: ISentence): IPerform => {
     dispatch(unlockCgInUserData({ name: unlockName, url, series }));
   }
 
-  /**
-   * 删掉相关 Effects，因为已经移除了
-   */
-  if (webgalStore.getState().stage.bgName !== sentence.content) {
+  // 检测 url 是否变化
+  let isUrlChanged = webgalStore.getState().stage.bgName !== sentence.content;
+  if (isUrlChanged) {
+    // 移除旧的 effect
     dispatch(stageActions.removeEffectByTargetId(`bg-main`));
+    // 清除动画演出
+    WebGAL.gameplay.performController.unmountPerform(getAnimationPerformName('bg-main'), true);
+    // 标记旧的背景为退出中，防止旧背景继承新参数
+    const oldStageObject = WebGAL.gameplay.pixiStage?.getStageObjByKey('bg-main');
+    if (oldStageObject) {
+      oldStageObject.isExiting = true;
+    }
   }
 
   // 处理 transform 和 默认 transform
diff --git a/packages/webgal/src/Core/gameScripts/changeFigure.ts b/packages/webgal/src/Core/gameScripts/changeFigure.ts
@@ -9,10 +9,10 @@ import { AnimationFrame, IUserAnimation } from '@/Core/Modules/animations';
 import { generateTransformAnimationObj } from '@/Core/controller/stage/pixi/animations/generateTransformAnimationObj';
 import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
 import { logger } from '@/Core/util/logger';
-import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
+import { getAnimateDuration, getAnimationPerformName } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
-import { WEBGAL_NONE } from '../constants';
+import { STAGE_KEYS, WEBGAL_NONE } from '../constants';
 /**
  * 更改立绘
  * @param sentence 语句
@@ -46,9 +46,24 @@ export function changeFigure(sentence: ISentence): IPerform {
   }
 
   // id 与 自由立绘
-  let key = getStringArgByKey(sentence, 'id') ?? '';
-  const isFreeFigure = key ? true : false;
-  const id = key ? key : `fig-${pos}`;
+  let idFromArgs = getStringArgByKey(sentence, 'id') ?? '';
+  const isFreeFigure = idFromArgs ? true : false;
+  let key = '';
+  if (isFreeFigure) {
+    key = idFromArgs;
+  } else {
+    switch (pos) {
+      case 'center':
+        key = STAGE_KEYS.FIG_C;
+        break;
+      case 'left':
+        key = STAGE_KEYS.FIG_L;
+        break;
+      case 'right':
+        key = STAGE_KEYS.FIG_R;
+        break;
+    }
+  }
 
   // live2d 或 spine 相关
   let motion = getStringArgByKey(sentence, 'motion') ?? '';
@@ -95,9 +110,9 @@ export function changeFigure(sentence: ISentence): IPerform {
   const dispatch = webgalStore.dispatch;
 
   const currentFigureAssociatedAnimation = webgalStore.getState().stage.figureAssociatedAnimation;
-  const filteredFigureAssociatedAnimation = currentFigureAssociatedAnimation.filter((item) => item.targetId !== id);
+  const filteredFigureAssociatedAnimation = currentFigureAssociatedAnimation.filter((item) => item.targetId !== key);
   const newFigureAssociatedAnimationItem = {
-    targetId: id,
+    targetId: key,
     animationFlag: animationFlag,
     mouthAnimation: {
       open: mouthOpen,
@@ -112,9 +127,7 @@ export function changeFigure(sentence: ISentence): IPerform {
   filteredFigureAssociatedAnimation.push(newFigureAssociatedAnimationItem);
   dispatch(setStage({ key: 'figureAssociatedAnimation', value: filteredFigureAssociatedAnimation }));
 
-  /**
-   * 如果 url 没变，不移除
-   */
+  // 检测 url 是否变化
   let isUrlChanged = true;
   if (key !== '') {
     const figWithKey = webgalStore.getState().stage.freeFigure.find((e) => e.key === key);
@@ -140,16 +153,19 @@ export function changeFigure(sentence: ISentence): IPerform {
       }
     }
   }
-  /**
-   * 处理 Effects
-   */
+
   if (isUrlChanged) {
-    webgalStore.dispatch(stageActions.removeEffectByTargetId(id));
-    const oldStageObject = WebGAL.gameplay.pixiStage?.getStageObjByKey(id);
+    // 移除旧的 effect
+    webgalStore.dispatch(stageActions.removeEffectByTargetId(key));
+    // 清除动画演出
+    WebGAL.gameplay.performController.unmountPerform(getAnimationPerformName(key), true);
+    // 标记旧的立绘为退出中，防止旧立绘继承新参数
+    const oldStageObject = WebGAL.gameplay.pixiStage?.getStageObjByKey(key);
     if (oldStageObject) {
       oldStageObject.isExiting = true;
     }
   }
+
   const setAnimationNames = (key: string, sentence: ISentence) => {
     // 处理 transform 和 默认 transform
     let animationObj: AnimationFrame[];
@@ -242,18 +258,12 @@ export function changeFigure(sentence: ISentence): IPerform {
     /**
      * 下面的代码是设置与位置关联的立绘的
      */
-    const positionMap = {
-      center: 'fig-center',
-      left: 'fig-left',
-      right: 'fig-right',
-    };
     const dispatchMap: Record<string, keyof IStageState> = {
       center: 'figName',
       left: 'figNameLeft',
       right: 'figNameRight',
     };
 
-    key = positionMap[pos];
     setAnimationNames(key, sentence);
     setFigureData();
     dispatch(setStage({ key: dispatchMap[pos], value: content }));
diff --git a/packages/webgal/src/Core/gameScripts/setAnimation.ts b/packages/webgal/src/Core/gameScripts/setAnimation.ts
@@ -5,7 +5,7 @@ import { IAnimationObject } from '@/Core/controller/stage/pixi/PixiController';
 import { logger } from '@/Core/util/logger';
 import { webgalStore } from '@/store/store';
 
-import { getAnimateDuration, getAnimationObject } from '@/Core/Modules/animationFunctions';
+import { getAnimateDuration, getAnimationObject, getAnimationPerformName } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 
 /**
@@ -22,7 +22,7 @@ export const setAnimation = (sentence: ISentence): IPerform => {
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;
 
   const key = `${target}-${animationName}-${animationDuration}`;
-  const performInitName = `animation-${target}`;
+  const performInitName = getAnimationPerformName(target);
 
   WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
diff --git a/packages/webgal/src/Core/gameScripts/setTempAnimation.ts b/packages/webgal/src/Core/gameScripts/setTempAnimation.ts
@@ -8,7 +8,7 @@ import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/tim
 import cloneDeep from 'lodash/cloneDeep';
 import { baseTransform } from '@/store/stageInterface';
 import { IUserAnimation } from '../Modules/animations';
-import { getAnimateDuration, getAnimationObject } from '@/Core/Modules/animationFunctions';
+import { getAnimateDuration, getAnimationObject, getAnimationPerformName } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 
 /**
@@ -33,7 +33,7 @@ export const setTempAnimation = (sentence: ISentence): IPerform => {
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;
 
   const key = `${target}-${animationName}-${animationDuration}`;
-  const performInitName = `animation-${target}`;
+  const performInitName = getAnimationPerformName(target);
 
   WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
diff --git a/packages/webgal/src/Core/gameScripts/setTransform.ts b/packages/webgal/src/Core/gameScripts/setTransform.ts
@@ -10,7 +10,7 @@ import { baseTransform, ITransform } from '@/store/stageInterface';
 import { AnimationFrame, IUserAnimation } from '../Modules/animations';
 import { generateTransformAnimationObj } from '@/Core/controller/stage/pixi/animations/generateTransformAnimationObj';
 import { WebGAL } from '@/Core/WebGAL';
-import { getAnimateDuration, getAnimationObject } from '../Modules/animationFunctions';
+import { getAnimateDuration, getAnimationObject, getAnimationPerformName } from '@/Core/Modules/animationFunctions';
 
 /**
  * 设置变换
@@ -28,7 +28,7 @@ export const setTransform = (sentence: ISentence): IPerform => {
   const target = getStringArgByKey(sentence, 'target') ?? '0';
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;
 
-  const performInitName = `animation-${target}`;
+  const performInitName = getAnimationPerformName(target);
 
   WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 

Original file line number	Diff line number	Diff line change
`@@ -93,3 +93,7 @@ export function getEnterExitAnimation(`
`93`	`93`	`return { duration, animation };`
`94`	`94`	`}`
`95`	`95`	`}`
	`96`	`+`
	`97`	`+export function getAnimationPerformName(target: string) {`
	`98`	+ return `animation-${target}`;
	`99`	`+}`