Skip to content

fix: missing sync animation #734

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
merged 6 commits into from
Jul 22, 2025
Merged

fix: missing sync animation #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
91d5169
fix: missing sync animation
Jul 16, 2025
969668e
eslint
MakinoharaShoko Jul 20, 2025
6d43f9d
change: remove timeout list
Jul 20, 2025
6042008
change: simplify condition of removing effect
Jul 20, 2025
88473dc
refactor: use default enter animation if no effect
Jul 22, 2025
09340cd
remove useless imports
MakinoharaShoko Jul 22, 2025
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
6 changes: 5 additions & 1 deletion packages/webgal/src/Core/Modules/animationFunctions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 0 additions & 1 deletion packages/webgal/src/Core/Modules/gamePlay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 1 addition & 4 deletions packages/webgal/src/Core/Modules/perform/performController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
// 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
Expand Down Expand Up @@ -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() {
Expand Down
24 changes: 20 additions & 4 deletions packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -269,6 +274,17 @@ export default class PixiStage {
}
}

public removeAllAnimations() {
while (this.stageAnimations.length > 0) {
this.removeAnimationByIndex(0);
}
}
Comment on lines +277 to +281
Copy link

Choose a reason for hiding this comment

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

medium

The current implementation of removeAllAnimations uses a while loop, which can be inefficient if the number of animations is large. A more performant approach would be to iterate through the array once to perform the cleanup actions and then clear the array. This would have a time complexity of O(n).

  public removeAllAnimations() {
    this.stageAnimations.forEach((animation) => {
      this.currentApp?.ticker.remove(animation.animationObject.tickerFunc);
      animation.animationObject.setEndState();
      this.unlockStageObject(animation.targetKey ?? 'default');
    });
    this.stageAnimations.length = 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) {
Expand Down
1 change: 1 addition & 0 deletions packages/webgal/src/Core/controller/stage/resetStage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const resetStage = (resetBacklog: boolean, resetSceneAndVar = true) => {
}

// 清空所有演出和timeOut
WebGAL.gameplay.pixiStage?.removeAllAnimations();
WebGAL.gameplay.performController.removeAllPerform();
WebGAL.gameplay.resetGamePlay();

Expand Down
4 changes: 3 additions & 1 deletion packages/webgal/src/Core/gameScripts/changeBg/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion packages/webgal/src/store/stageReducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const initState: IStageState = {
{
target: 'stage-main',
transform: baseTransform,
}
},
],
bgFilter: '', // 现在不用，先预留
bgTransform: '', // 现在不用，先预留
Expand Down