fix: changeFigure and changeBg duration

Hardy--Lee · Hardy--Lee · commit 66963a46f6c8 · 2025-06-15T21:33:12.000+08:00
diff --git a/packages/webgal/src/Core/Modules/animationFunctions.ts b/packages/webgal/src/Core/Modules/animationFunctions.ts
@@ -7,6 +7,8 @@ import { baseTransform } from '@/store/stageInterface';
 import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/timeline';
 import { WebGAL } from '@/Core/WebGAL';
 import PixiStage, { IAnimationObject } from '@/Core/controller/stage/pixi/PixiController';
+import { AnimationFrame, IUserAnimation } from './animations';
+import { generateTransformAnimationObj } from '../controller/stage/pixi/animations/generateTransformAnimationObj';
 
 // eslint-disable-next-line max-params
 export function getAnimationObject(animationName: string, target: string, duration: number, writeDefault: boolean) {
@@ -89,3 +91,23 @@ export function getEnterExitAnimation(
     return { duration, animation };
   }
 }
+
+export function createDefaultEnterExitAnimation(type: 'enter' | 'exit', target: string, frame: AnimationFrame, duration: number, ease: string) {
+  if (type === 'enter') {
+    // 设置默认入场动画
+    const enterAnimationObj = generateTransformAnimationObj(target, frame, duration, ease, 'enter');
+    const enterAnimationName = (Math.random() * 10).toString(16);
+    const newEnterAnimation: IUserAnimation = { name: enterAnimationName, effects: enterAnimationObj };
+    WebGAL.animationManager.addAnimation(newEnterAnimation);
+    duration = getAnimateDuration(enterAnimationName);
+    WebGAL.animationManager.nextEnterAnimationName.set(target, enterAnimationName);
+  } else {
+    // 设置默认退场动画
+    const exitAnimationObj = generateTransformAnimationObj(target, frame, duration, ease, 'exit');
+    const exitAnimationName = (Math.random() * 10).toString(16);
+    const newExitAnimation: IUserAnimation = { name: exitAnimationName, effects: exitAnimationObj };
+    WebGAL.animationManager.addAnimation(newExitAnimation);
+    duration = getAnimateDuration(exitAnimationName);
+    WebGAL.animationManager.nextExitAnimationName.set(target + '-off', exitAnimationName);
+  }
+}
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -28,6 +28,7 @@ interface IStageAnimationObject {
   targetKey?: string;
   type: 'common' | 'preset';
   animationObject: IAnimationObject;
+  stopFunction?: () => void;
 }
 
 export interface IStageObject {
@@ -212,6 +213,7 @@ export default class PixiStage {
     key: string,
     target = 'default',
     currentEffects: IEffect[],
+    stopFunction: () => void,
   ) {
     if (!animationObject) return;
     const effect = currentEffects.find((effect) => effect.target === target);
@@ -223,7 +225,7 @@ export default class PixiStage {
       }
       return;
     }
-    this.stageAnimations.push({ uuid: uuid(), animationObject, key: key, targetKey: target, type: 'preset' });
+    this.stageAnimations.push({ uuid: uuid(), animationObject, key: key, targetKey: target, type: 'preset', stopFunction });
     // 上锁
     this.lockStageObject(target);
     animationObject.setStartState();
@@ -247,6 +249,7 @@ export default class PixiStage {
       const thisTickerFunc = this.stageAnimations[index];
       this.currentApp?.ticker.remove(thisTickerFunc.animationObject.tickerFunc);
       thisTickerFunc.animationObject.setEndState();
+      thisTickerFunc.stopFunction?.();
       this.unlockStageObject(thisTickerFunc.targetKey ?? 'default');
       this.stageAnimations.splice(index, 1);
     }
diff --git a/packages/webgal/src/Core/controller/stage/pixi/animations/generateTransformAnimationObj.ts b/packages/webgal/src/Core/controller/stage/pixi/animations/generateTransformAnimationObj.ts
@@ -8,29 +8,48 @@ type AnimationObj = Array<AnimationFrame>;
 export function generateTransformAnimationObj(
   target: string,
   applyFrame: AnimationFrame,
-  duration: number | string | boolean | null,
+  duration: number,
   ease: string,
+  type: 'enter' | 'exit' | 'normal',
 ): AnimationObj {
-  let animationObj;
+  let animationObj: AnimationFrame[] = [];
   // 获取那个 target 的当前变换
   const transformState = webgalStore.getState().stage.effects;
   const targetEffect = transformState.find((effect) => effect.target === target);
 
-  applyFrame.duration = 500;
-  if (!isNull(duration) && typeof duration === 'number') {
-    applyFrame.duration = duration;
+  switch (type) {
+    case 'normal': {
+      if (targetEffect) {
+        // 找到存在的 effect 时, 将该 effect 作为起始状态
+        const effectWithDuration = { ...targetEffect!.transform!, duration: 0, ease };
+        applyFrame = { ...applyFrame, duration, ease };
+        animationObj.push(effectWithDuration);
+        animationObj.push(applyFrame);
+        break;
+      } else {
+        // 找不到 effect 时, 作为 enter 动画考虑
+        type = 'enter';
+        // 不加 break, 继续执行接下来的 case
+      }
+    }
+    case 'enter': {
+      // 在最开头加上 applyFrame 的 alpha 0 版本, 实现透明度淡入动画
+      const effectWithDuration = { ...applyFrame, alpha: 0, duration: 0, ease };
+      applyFrame = { ...applyFrame, duration, ease };
+      animationObj.push(effectWithDuration);
+      animationObj.push(applyFrame);
+      break;
+    }
+    case 'exit': {
+      // 在最末尾加上 applyFrame 的 alpha 0 版本, 实现透明度淡出动画
+      // 按理说应该拿 targetEffect 才对, 但是退场动画在调用这个函数前
+      // 就已经把 effect 清掉了, 故需要手动传进来
+      applyFrame = { ...applyFrame, duration: 0, ease };
+      const effectWithDuration = { ...applyFrame, alpha: 0, duration, ease };
+      animationObj.push(applyFrame);
+      animationObj.push(effectWithDuration);
+    }
   }
-  applyFrame.ease = ease;
-  animationObj = [applyFrame];
 
-  // 找到 effect
-  if (targetEffect) {
-    const effectWithDuration = { ...targetEffect!.transform!, duration: 0, ease };
-    animationObj.unshift(effectWithDuration);
-  } else {
-    // 应用默认effect，也就是最终的 effect 的 alpha = 0 版本
-    const effectWithDuration = { ...applyFrame, alpha: 0, duration: 0, ease };
-    animationObj.unshift(effectWithDuration);
-  }
   return animationObj;
 }
diff --git a/packages/webgal/src/Core/gameScripts/changeBg/index.ts b/packages/webgal/src/Core/gameScripts/changeBg/index.ts
@@ -7,11 +7,11 @@ import { setStage, stageActions } from '@/store/stageReducer';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { unlockCgInUserData } from '@/store/userDataReducer';
 import { logger } from '@/Core/util/logger';
-import { ITransform } from '@/store/stageInterface';
+import { baseTransform, 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 { createDefaultEnterExitAnimation, getAnimateDuration } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 
 /**
@@ -21,6 +21,7 @@ import { WebGAL } from '@/Core/WebGAL';
  */
 export const changeBg = (sentence: ISentence): IPerform => {
   const url = sentence.content;
+  const key = 'bg-main';
   let name = '';
   let series = 'default';
   sentence.args.forEach((e) => {
@@ -35,10 +36,18 @@ export const changeBg = (sentence: ISentence): IPerform => {
   const dispatch = webgalStore.dispatch;
   if (name !== '') dispatch(unlockCgInUserData({ name, url, series }));
 
+    
+  // 储存一下现有的 transform 给退场动画当起始帧用, 因为马上就要清除了
+  const currentEffect = webgalStore.getState().stage.effects.find((e) => e.target === key);
+  let currentTransform = baseTransform;
+  if (currentEffect && currentEffect.transform) {
+    currentTransform = currentEffect.transform;
+  }
+
   /**
    * 删掉相关 Effects，因为已经移除了
    */
-  dispatch(stageActions.removeEffectByTargetId(`bg-main`));
+  dispatch(stageActions.removeEffectByTargetId(key));
 
   // 处理 transform 和 默认 transform
   const transformString = getSentenceArgByKey(sentence, 'transform');
@@ -49,54 +58,45 @@ export const changeBg = (sentence: ISentence): IPerform => {
   }
   let animationObj: AnimationFrame[];
   if (transformString) {
+    console.log(transformString);
     try {
-      const frame = JSON.parse(transformString.toString()) as AnimationFrame;
-      animationObj = generateTransformAnimationObj('bg-main', frame, duration, ease);
-      // 因为是切换，必须把一开始的 alpha 改为 0
-      animationObj[0].alpha = 0;
-      const animationName = (Math.random() * 10).toString(16);
-      const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
-      WebGAL.animationManager.addAnimation(newAnimation);
-      duration = getAnimateDuration(animationName);
-      WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
+      const transform = JSON.parse(transformString.toString()) as ITransform;
+      const enterFrame = {...transform, duration: 0, ease: ''};
+      const exitFrame = {...currentTransform, duration: 0, ease: ''};
+      createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+      createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
     } catch (e) {
       // 解析都错误了，歇逼吧
-      applyDefaultTransform();
+      const enterFrame = {...baseTransform, duration: 0, ease: ''};
+      const exitFrame = {...currentTransform, duration: 0, ease: ''};
+      createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+      createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
     }
   } else {
-    applyDefaultTransform();
-  }
-
-  function applyDefaultTransform() {
-    // 应用默认的
-    const frame = {};
-    animationObj = generateTransformAnimationObj('bg-main', frame as AnimationFrame, duration, ease);
-    // 因为是切换，必须把一开始的 alpha 改为 0
-    animationObj[0].alpha = 0;
-    const animationName = (Math.random() * 10).toString(16);
-    const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
-    WebGAL.animationManager.addAnimation(newAnimation);
-    duration = getAnimateDuration(animationName);
-    WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
+    const enterFrame = {...baseTransform, duration: 0, ease: ''};
+    const exitFrame = {...currentTransform, duration: 0, ease: ''};
+    createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+    createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
   }
 
   // 应用动画的优先级更高一点
   if (getSentenceArgByKey(sentence, 'enter')) {
-    WebGAL.animationManager.nextEnterAnimationName.set('bg-main', getSentenceArgByKey(sentence, 'enter')!.toString());
+    WebGAL.animationManager.nextEnterAnimationName.set(key, getSentenceArgByKey(sentence, 'enter')!.toString());
     duration = getAnimateDuration(getSentenceArgByKey(sentence, 'enter')!.toString());
   }
   if (getSentenceArgByKey(sentence, 'exit')) {
-    WebGAL.animationManager.nextExitAnimationName.set('bg-main-off', getSentenceArgByKey(sentence, 'exit')!.toString());
+    WebGAL.animationManager.nextExitAnimationName.set(key + '-off', getSentenceArgByKey(sentence, 'exit')!.toString());
     duration = getAnimateDuration(getSentenceArgByKey(sentence, 'exit')!.toString());
   }
   dispatch(setStage({ key: 'bgName', value: sentence.content }));
 
   return {
-    performName: `bg-main-${sentence.content}`,
+    performName: `${key}-${sentence.content}`,
     duration,
     isHoldOn: false,
     stopFunction: () => {
-      WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget('bg-main');
+      WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget(key);
+      WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget(key + '-old' + '-off');
     },
     blockingNext: () => false,
     blockingAuto: () => true,
diff --git a/packages/webgal/src/Core/gameScripts/changeFigure.ts b/packages/webgal/src/Core/gameScripts/changeFigure.ts
@@ -4,12 +4,12 @@ import { webgalStore } from '@/store/store';
 import { setStage, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
-import { IFreeFigure, IStageState, ITransform } from '@/store/stageInterface';
+import { baseTransform, IFreeFigure, IStageState, ITransform } from '@/store/stageInterface';
 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 { createDefaultEnterExitAnimation, getAnimateDuration } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 /**
  * 更改立绘
@@ -153,6 +153,24 @@ export function changeFigure(sentence: ISentence): IPerform {
       }
     }
   }
+
+  // 确定 key
+  if (!isFreeFigure) {
+    const positionMap = {
+      center: 'fig-center',
+      left: 'fig-left',
+      right: 'fig-right',
+    };
+    key = positionMap[pos];
+  }
+  
+  // 储存一下现有的 transform 给退场动画当起始帧用, 因为马上就要清除了
+  const currentEffect = webgalStore.getState().stage.effects.find((e) => e.target === key);
+  let currentTransform = baseTransform;
+  if (currentEffect && currentEffect.transform) {
+    currentTransform = currentEffect.transform;
+  }
+
   /**
    * 处理 Effects
    */
@@ -173,38 +191,27 @@ export function changeFigure(sentence: ISentence): IPerform {
     if (durationFromArg && typeof durationFromArg === 'number') {
       duration = durationFromArg;
     }
-    let animationObj: AnimationFrame[];
+    
     if (transformString) {
       console.log(transformString);
       try {
-        const frame = JSON.parse(transformString.toString()) as AnimationFrame;
-        animationObj = generateTransformAnimationObj(key, frame, duration, ease);
-        // 因为是切换，必须把一开始的 alpha 改为 0
-        animationObj[0].alpha = 0;
-        const animationName = (Math.random() * 10).toString(16);
-        const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
-        WebGAL.animationManager.addAnimation(newAnimation);
-        duration = getAnimateDuration(animationName);
-        WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
+        const transform = JSON.parse(transformString.toString()) as ITransform;
+        const enterFrame = {...transform, duration: 0, ease: ''};
+        const exitFrame = {...currentTransform, duration: 0, ease: ''};
+        createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+        createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
       } catch (e) {
         // 解析都错误了，歇逼吧
-        applyDefaultTransform();
+        const enterFrame = {...baseTransform, duration: 0, ease: ''};
+        const exitFrame = {...currentTransform, duration: 0, ease: ''};
+        createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+        createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
       }
     } else {
-      applyDefaultTransform();
-    }
-
-    function applyDefaultTransform() {
-      // 应用默认的
-      const frame = {};
-      animationObj = generateTransformAnimationObj(key, frame as AnimationFrame, duration, ease);
-      // 因为是切换，必须把一开始的 alpha 改为 0
-      animationObj[0].alpha = 0;
-      const animationName = (Math.random() * 10).toString(16);
-      const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
-      WebGAL.animationManager.addAnimation(newAnimation);
-      duration = getAnimateDuration(animationName);
-      WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
+      const enterFrame = {...baseTransform, duration: 0, ease: ''};
+      const exitFrame = {...currentTransform, duration: 0, ease: ''};
+      createDefaultEnterExitAnimation('enter', key, enterFrame, duration, ease);
+      createDefaultEnterExitAnimation('exit', key, exitFrame, duration, ease);
     }
     const enterAnim = getSentenceArgByKey(sentence, 'enter');
     const exitAnim = getSentenceArgByKey(sentence, 'exit');
@@ -239,18 +246,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);
     if (motion || overrideBounds) {
       dispatch(
@@ -272,6 +273,7 @@ export function changeFigure(sentence: ISentence): IPerform {
     isHoldOn: false,
     stopFunction: () => {
       WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget(key);
+      WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget(key + '-old' + '-off');
     },
     blockingNext: () => false,
     blockingAuto: () => true,
diff --git a/packages/webgal/src/Core/gameScripts/setTransform.ts b/packages/webgal/src/Core/gameScripts/setTransform.ts
@@ -21,7 +21,11 @@ export const setTransform = (sentence: ISentence): IPerform => {
   const animationName = (Math.random() * 10).toString(16);
   const animationString = sentence.content;
   let animationObj: AnimationFrame[];
-  const duration = getSentenceArgByKey(sentence, 'duration');
+  let duration = 500;
+  const durationFromArg = getSentenceArgByKey(sentence, 'duration');
+  if (durationFromArg && typeof durationFromArg === 'number') {
+    duration = durationFromArg;
+  }
   const ease = (getSentenceArgByKey(sentence, 'ease') as string) ?? '';
   const writeDefault = (getSentenceArgByKey(sentence, 'writeDefault') as boolean) ?? false;
   const target = (getSentenceArgByKey(sentence, 'target')?.toString() ?? '0') as string;
@@ -32,7 +36,7 @@ export const setTransform = (sentence: ISentence): IPerform => {
 
   try {
     const frame = JSON.parse(animationString) as AnimationFrame;
-    animationObj = generateTransformAnimationObj(target, frame, duration, ease);
+    animationObj = generateTransformAnimationObj(target, frame, duration, ease, 'normal');
     console.log('animationObj:', animationObj);
   } catch (e) {
     // 解析都错误了，歇逼吧
diff --git a/packages/webgal/src/Stage/MainStage/useSetBg.ts b/packages/webgal/src/Stage/MainStage/useSetBg.ts
diff --git a/packages/webgal/src/Stage/MainStage/useSetFigure.ts b/packages/webgal/src/Stage/MainStage/useSetFigure.ts
