Merge pull request #734 from HardyNLee/fix-sync-animation-missing

fix: missing sync animation

Author: MakinoharaShoko

packages/webgal/src/Core/Modules/animationFunctions.ts

@@ -62,8 +62,12 @@ export function getEnterExitAnimation(
     }
     // 走默认动画
     let animation: IAnimationObject | null = generateUniversalSoftInAnimationObj(realTarget ?? target, duration);
+
+    const transformState = webgalStore.getState().stage.effects;
+    const targetEffect = transformState.find((effect) => effect.target === target);
+
     const animarionName = WebGAL.animationManager.nextEnterAnimationName.get(target);
-    if (animarionName) {
+    if (animarionName && !targetEffect) {
       logger.debug('取代默认进入动画', target);
       animation = getAnimationObject(animarionName, realTarget ?? target, getAnimateDuration(animarionName), false);
       duration = getAnimateDuration(animarionName);

packages/webgal/src/Core/Modules/gamePlay.ts

@@ -13,7 +13,6 @@ export class Gameplay {
   public pixiStage: PixiStage | null = null;
   public performController = new PerformController();
   public resetGamePlay() {
-    this.performController.timeoutList = [];
     this.isAuto = false;
     this.isFast = false;
     const autoInterval = this.autoInterval;

packages/webgal/src/Core/Modules/perform/performController.ts

@@ -16,7 +16,6 @@ export const getRandomPerformName = (): string => {
 
 export class PerformController {
   public performList: Array<IPerform> = [];
-  public timeoutList: Array<ReturnType<typeof setTimeout>> = [];
 
   public arrangeNewPerform(perform: IPerform, script: ISentence, syncPerformState = true) {
     // 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
@@ -108,12 +107,10 @@ export class PerformController {
 
   public removeAllPerform() {
     for (const e of this.performList) {
+      clearTimeout(e.stopTimeout);
       e.stopFunction();
     }
     this.performList = [];
-    for (const e of this.timeoutList) {
-      clearTimeout(e);
-    }
   }
 
   private goNextWhenOver() {

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts

@@ -3,7 +3,13 @@ import { v4 as uuid } from 'uuid';
 import { webgalStore } from '@/store/store';
 import { setStage, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
-import { baseTransform, IEffect, IFigureAssociatedAnimation, IFigureMetadata, ITransform } from '@/store/stageInterface';
+import {
+  baseTransform,
+  IEffect,
+  IFigureAssociatedAnimation,
+  IFigureMetadata,
+  ITransform,
+} from '@/store/stageInterface';
 import { logger } from '@/Core/util/logger';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
@@ -75,7 +81,7 @@ export default class PixiStage {
    * 当前的 PIXI App
    */
   public currentApp: PIXI.Application | null = null;
-  public readonly mainStageContainer : WebGALPixiContainer;
+  public readonly mainStageContainer: WebGALPixiContainer;
   public readonly foregroundEffectsContainer: PIXI.Container;
   public readonly backgroundEffectsContainer: PIXI.Container;
   public frameDuration = 16.67;
@@ -258,8 +264,7 @@ export default class PixiStage {
    * 移除动画
    * @param key
    */
-  public removeAnimation(key: string) {
-    const index = this.stageAnimations.findIndex((e) => e.key === key);
+  public removeAnimationByIndex(index: number) {
     if (index >= 0) {
       const thisTickerFunc = this.stageAnimations[index];
       this.currentApp?.ticker.remove(thisTickerFunc.animationObject.tickerFunc);
@@ -269,6 +274,17 @@ export default class PixiStage {
     }
   }
 
+  public removeAllAnimations() {
+    while (this.stageAnimations.length > 0) {
+      this.removeAnimationByIndex(0);
+    }
+  }
+
+  public removeAnimation(key: string) {
+    const index = this.stageAnimations.findIndex((e) => e.key === key);
+    this.removeAnimationByIndex(index);
+  }
+
   public removeAnimationWithSetEffects(key: string) {
     const index = this.stageAnimations.findIndex((e) => e.key === key);
     if (index >= 0) {

packages/webgal/src/Core/controller/stage/resetStage.ts

@@ -16,6 +16,7 @@ export const resetStage = (resetBacklog: boolean, resetSceneAndVar = true) => {
   }
 
   // 清空所有演出和timeOut
+  WebGAL.gameplay.pixiStage?.removeAllAnimations();
   WebGAL.gameplay.performController.removeAllPerform();
   WebGAL.gameplay.resetGamePlay();
 

packages/webgal/src/Core/gameScripts/changeBg/index.ts

@@ -38,7 +38,9 @@ export const changeBg = (sentence: ISentence): IPerform => {
   /**
    * 删掉相关 Effects，因为已经移除了
    */
-  dispatch(stageActions.removeEffectByTargetId(`bg-main`));
+  if (webgalStore.getState().stage.bgName !== sentence.content) {
+    dispatch(stageActions.removeEffectByTargetId(`bg-main`));
+  }
 
   // 处理 transform 和 默认 transform
   const transformString = getSentenceArgByKey(sentence, 'transform');

packages/webgal/src/store/stageReducer.ts

@@ -52,7 +52,7 @@ export const initState: IStageState = {
     {
       target: 'stage-main',
       transform: baseTransform,
-    }
+    },
   ],
   bgFilter: '', // 现在不用，先预留
   bgTransform: '', // 现在不用，先预留