Feat: Support parallel animation for setAnimation command; Fix: potential runtime error caused by undefined parameters reported by review bot

Author: TremblingMoeNew

packages/webgal/public/game/scene/demo_parallel_animation.txt

@@ -0,0 +1,31 @@
+changeBg:WebGalEnter.webp -next;
+changeFigure:stand.webp -id=figure01 -transform={"position":{"x":1000,"y":720}};
+;演示setAnimation平行执行
+setAnimation:shockwaveIn -target=figure01 -next
+setAnimation:move-front-and-back -target=figure01 -parallel
+;演示通过-continue接续执行两个常规setTransform正常运作、不被打断
+setTransform:{"position":{"x":-1000}} -duration=5000 -target=figure01 -continue
+setTransform:{"position":{"x":1000}} -duration=5000 -target=figure01
+;演示setTransform平行执行
+setTransform:{"position":{"x":-1000},"scale":{"x":0.5},"contrast":0.5} -duration=5000 -target=figure01 -ease=easeOut -next -keep
+wait:2000
+setTransform:{"position":{"y":0},"scale":{"y":0.5},"saturation":0} -duration=5000 -target=figure01 -ease=linear -parallel -continue
+setTransform:{"position":{"y":-720},"scale":{"y":1},"saturation":1} -duration=5000 -target=figure01 -ease=linear -next
+setTransform:{"position":{"x":1000},"scale":{"x":1},"contrast":1} -duration=5000 -target=figure01 -ease=easeIn -parallel;
+;演示参数解耦改动后setTempAnimation普通运作是否正常
+setTempAnimation:[{"duration":0}, {"duration":500,"position":{"x":-1000}}, {"duration":500,"position":{"y":720},"scale":{"y":0.5},"saturation":0}, {"duration":500,"position":{"x":-1000, "y":720}}, {"duration":500}, {"duration":500,"position":{"x":-1000},"scale":{"x":0.5},"contrast":0.5}] -target=figure01
+setTempAnimation:[{"duration":0}, {"duration":500,"position":{"x":1000}}, {"duration":500,"position":{"y":720}}, {"duration":500,"position":{"x":1000, "y":720}}, {"duration":500}, {"duration":500,"position":{"x":1000}}] -target=figure01
+;演示参数解耦改动后setTransform的-writeDefault参数是否运作正常
+setTransform:{} -writeDefault -target=figure01 -duration=500
+setTransform:{"position":{"x":1000,"y":720}} -target=figure01 -next;
+setAnimation:shockwaveOut -target=figure01 -parallel
+;演示setTempAnimation平行执行
+setTempAnimation:[{"duration":0},{"position":{"x":-1000},"scale":{"x":0.5},"contrast":0.5,"duration":5000,"ease":"easeOut"},{"position":{"x":-1000},"scale":{"x":0.5},"contrast":0.5,"duration":2000},{"position":{"x":600},"scale":{"x":1},"contrast":1,"duration":5000,"ease":"easeIn"},{"duration":2000}] -target=figure01 -next;
+setTempAnimation:[{"duration":2000},{"position":{"y":0},"scale":{"y":0.5},"saturation":0,"duration":5000,"ease":"linear"},{"position":{"y":-720},"scale":{"y":1},"saturation":1,"duration":5000,"ease":"linear"},{"duration":2000}] -target=figure01 -parallel -continue;
+;演示并行执行多条终止时间点不一致的setTransform
+setTransform:{"position":{"x":-1000}} -duration=5000 -next -target=figure01;
+setTransform:{"position":{"y":0}} -duration=3000 -parallel -target=figure01;
+setTransform:{"position":{"x":1000}} -duration=3000 -next -target=figure01;
+setTransform:{"position":{"y":-720}} -duration=5000 -parallel -target=figure01;
+changeBg: -next;
+changeFigure: -id=figure01

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

@@ -33,11 +33,11 @@ export function getAnimationObject(animationName: string, target: string, durati
       let newEffect;
 
       if (!writeDefault && targetSetEffect && targetSetEffect.transform) {
-        const targetScale = pickBy(targetSetEffect.transform.scale, (source, key)=> unionScaleKeys.has(key))
-        const targetPosition = pickBy(targetSetEffect.transform.position, (source, key)=> unionPositionKeys.has(key))
-        const originalTransform = { ...pickBy(targetSetEffect.transform, (source, key)=> unionKeys.has(key))};
-        originalTransform.scale = targetScale
-        originalTransform.position = targetPosition
+        const targetScale = pickBy(targetSetEffect.transform.scale || {}, (source, key) => unionScaleKeys.has(key));
+        const targetPosition = pickBy(targetSetEffect.transform.position || {}, (s, key) => unionPositionKeys.has(key));
+        const originalTransform = { ...pickBy(targetSetEffect.transform, (source, key) => unionKeys.has(key)) };
+        originalTransform.scale = targetScale;
+        originalTransform.position = targetPosition;
         newEffect = cloneDeep({ ...originalTransform, duration: 0, ease: '' });
       } else {
         newEffect = cloneDeep({ ...baseTransform, duration: 0, ease: '' });
@@ -66,14 +66,6 @@ export function getAnimateDuration(animationName: string) {
   return 0;
 }
 
-export function getAnimateDurationFromObj(animation: IUserAnimation) {
-    let duration = 0;
-    animation.effects.forEach((e) => {
-      duration += e.duration;
-    });
-    return duration;
-}
-
 // eslint-disable-next-line max-params
 export function getEnterExitAnimation(
   target: string,

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

@@ -19,7 +19,7 @@ export class PerformController {
   public performList: Array<IPerform> = [];
 
   public arrangeNewPerform(perform: IPerform, script: ISentence, syncPerformState = true) {
-    if (!perform.isParallel){
+    if (!perform.isParallel) {
       // 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
       const dupPerformIndex = this.performList.findIndex((p) => p.performName === perform.performName);
       if (dupPerformIndex > -1) {
@@ -106,7 +106,7 @@ export class PerformController {
   }
 
   public softUnmountPerformObject(perform: IPerform) {
-    const idx = this.performList.indexOf(perform)
+    const idx = this.performList.indexOf(perform);
     if (idx < 0) return;
     perform.stopFunction();
     clearTimeout(perform.stopTimeout as unknown as number);
@@ -122,7 +122,6 @@ export class PerformController {
       // nextSentence();
       this.goNextWhenOver();
     }
-    
   }
 
   public erasePerformFromState(name: string) {

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

@@ -23,7 +23,7 @@ export interface IPerform {
   arrangePerformPromise?: Promise<IPerform>;
   // 跳过由 nextSentence 函数引发的演出回收
   skipNextCollect?: boolean;
-  // 
+  //
   isParallel?: boolean;
 }
 

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

@@ -73,9 +73,9 @@ export default class PixiStage {
     if (!source) return;
     const targetScale = target.scale;
     const targetPosition = target.position;
-    if (target.scale) Object.assign(targetScale!, omitBy(source.scale,isUndefined));
-    if (target.position) Object.assign(targetPosition!, omitBy(source.position,isUndefined));
-    Object.assign(target, omitBy(source,isUndefined));
+    if (target.scale) Object.assign(targetScale!, omitBy(source.scale || {}, isUndefined));
+    if (target.position) Object.assign(targetPosition!, omitBy(source.position || {}, isUndefined));
+    Object.assign(target, omitBy(source, isUndefined));
     target.scale = targetScale;
     target.position = targetPosition;
   }

packages/webgal/src/Core/controller/stage/pixi/animations/generateTransformAnimationObj.ts

@@ -11,7 +11,7 @@ export function generateTransformAnimationObj(
   applyFrame: AnimationFrame,
   duration: number | string | boolean | null,
   ease: string,
-  writeFullEffect: boolean = true,
+  writeFullEffect = true,
 ): AnimationObj {
   let animationObj;
   // 获取那个 target 的当前变换
@@ -30,13 +30,16 @@ export function generateTransformAnimationObj(
     if (writeFullEffect) {
       const effectWithDuration = { ...targetEffect!.transform!, duration: 0, ease };
       animationObj.unshift(effectWithDuration);
-    }
-    else {
-      const targetScale = pickBy(targetEffect!.transform!.scale, (source, key)=> has(applyFrame.scale, key))
-      const targetPosition = pickBy(targetEffect!.transform!.position, (source, key)=> has(applyFrame.position, key))
-      const effectWithDuration = { ...pickBy(targetEffect!.transform!, (source, key)=> has(applyFrame, key) ), duration: 0, ease };
-      effectWithDuration.scale = targetScale
-      effectWithDuration.position = targetPosition
+    } else {
+      const targetScale = pickBy(targetEffect.transform?.scale || {}, (source, key) => has(applyFrame.scale, key));
+      const targetPosition = pickBy(targetEffect.transform?.position || {}, (sr, key) => has(applyFrame.position, key));
+      const effectWithDuration = {
+        ...pickBy(targetEffect.transform || {}, (source, key) => has(applyFrame, key)),
+        duration: 0,
+        ease,
+      };
+      effectWithDuration.scale = targetScale;
+      effectWithDuration.position = targetPosition;
       animationObj.unshift(effectWithDuration);
     }
   } else {

packages/webgal/src/Core/gameScripts/setAnimation.ts

@@ -20,11 +20,12 @@ export const setAnimation = (sentence: ISentence): IPerform => {
   target = target !== '' ? target : 'default_id';
   const writeDefault = getBooleanArgByKey(sentence, 'writeDefault') ?? false;
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;
+  const parallel = getBooleanArgByKey(sentence, 'parallel') ?? false;
 
   const key = `${target}-${animationName}-${animationDuration}`;
   const performInitName = `animation-${target}`;
 
-  WebGAL.gameplay.performController.unmountPerform(performInitName, true);
+  if (!parallel) WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
   let stopFunction;
   setTimeout(() => {
@@ -56,5 +57,6 @@ export const setAnimation = (sentence: ISentence): IPerform => {
     blockingNext: () => false,
     blockingAuto: () => !keep,
     stopTimeout: undefined, // 暂时不用，后面会交给自动清除
+    isParallel: parallel,
   };
 };

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 { getAnimateDurationFromObj, getAnimationObject } from '@/Core/Modules/animationFunctions';
+import { getAnimateDuration, getAnimationObject } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 import { v4 as uuid } from 'uuid';
 
@@ -28,7 +28,7 @@ export const setTempAnimation = (sentence: ISentence): IPerform => {
   }
   const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
   WebGAL.animationManager.addAnimation(newAnimation);
-  const animationDuration = getAnimateDurationFromObj(newAnimation);
+  const animationDuration = getAnimateDuration(animationName);
   const target = getStringArgByKey(sentence, 'target') ?? '0';
   const writeDefault = getBooleanArgByKey(sentence, 'writeDefault') ?? false;
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;

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 { getAnimateDurationFromObj, getAnimationObject } from '../Modules/animationFunctions';
+import { getAnimateDuration, getAnimationObject } from '../Modules/animationFunctions';
 import { v4 as uuid } from 'uuid';
 /**
  * 设置变换
@@ -45,7 +45,7 @@ export const setTransform = (sentence: ISentence): IPerform => {
 
   const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
   WebGAL.animationManager.addAnimation(newAnimation);
-  const animationDuration = getAnimateDurationFromObj(newAnimation);
+  const animationDuration = getAnimateDuration(animationName);
   const key = `${target}-${animationName}-${animationDuration}`;
   let keepAnimationStopped = false;
   setTimeout(() => {

packages/webgal/src/Stage/MainStage/useSetEffects.ts

@@ -43,5 +43,5 @@ function convertTransform(transform: ITransform | undefined) {
     return {};
   }
   const { position, ...rest } = transform;
-  return omitBy({ ...rest, x: position?.x, y: position?.y },isUndefined);
+  return omitBy({ ...rest, x: position?.x, y: position?.y }, isUndefined);
 }