feat: Decouple properties in timeline animations & support parallel animation

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

@@ -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 { IUserAnimation } from './animations';
+import { pickBy } from 'lodash';
 import {
   DEFAULT_BG_IN_DURATION,
   DEFAULT_BG_OUT_DURATION,
@@ -16,15 +18,40 @@ import {
 import { stageActions } from '@/store/stageReducer';
 
 // eslint-disable-next-line max-params
-export function getAnimationObject(animationName: string, target: string, duration: number, writeDefault: boolean) {
+export function getAnimationObject(
+  animationName: string,
+  target: string,
+  duration: number,
+  writeDefault: boolean,
+  writeFullEffect = true,
+) {
   const effect = WebGAL.animationManager.getAnimations().find((ani) => ani.name === animationName);
   if (effect) {
+    const unionKeys = new Set<string>();
+    const unionScaleKeys = new Set<string>();
+    const unionPositionKeys = new Set<string>();
+    if (!writeFullEffect) {
+      effect.effects.forEach((effect) => {
+        Object.keys(effect).forEach((k) => unionKeys.add(k));
+        if (effect.scale) Object.keys(effect.scale).forEach((k) => unionScaleKeys.add(k));
+        if (effect.position) Object.keys(effect.position).forEach((k) => unionPositionKeys.add(k));
+      });
+    }
     const mappedEffects = effect.effects.map((effect) => {
       const targetSetEffect = webgalStore.getState().stage.effects.find((e) => e.target === target);
       let newEffect;
 
       if (!writeDefault && targetSetEffect && targetSetEffect.transform) {
-        newEffect = cloneDeep({ ...targetSetEffect.transform, duration: 0, ease: '' });
+        if (writeFullEffect) {
+          newEffect = cloneDeep({ ...targetSetEffect.transform, duration: 0, ease: '' });
+        } else {
+          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: '' });
       }

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

@@ -18,8 +18,17 @@ export const getRandomPerformName = (): string => {
 export class PerformController {
   public performList: Array<IPerform> = [];
 
+  /**
+   * 判断 perform 名称是否匹配（支持前缀匹配，用于清理并行演出）
+   * 并行演出的 performName 格式为 "baseName#uuid"，匹配时需要同时命中精确匹配和前缀匹配
+   */
+  private matchPerformName(performName: string, name: string): boolean {
+    return performName === name || performName.startsWith(name + '#');
+  }
+
   public arrangeNewPerform(perform: IPerform, script: ISentence, syncPerformState = true) {
     // 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
+    // 并行演出的 performName 带有唯一后缀，因此不会命中去重
     const dupPerformIndex = this.performList.findIndex((p) => p.performName === perform.performName);
     if (dupPerformIndex > -1) {
       // 结束并删除全部重复演出
@@ -50,7 +59,7 @@ export class PerformController {
       // perform.isOver = true;
       if (!perform.isHoldOn) {
         // 如果不是保持演出，清除
-        this.unmountPerform(perform.performName);
+        this.softUnmountPerformObject(perform);
       }
     }, perform.duration);
 
@@ -64,7 +73,7 @@ export class PerformController {
     if (!force) {
       for (let i = 0; i < this.performList.length; i++) {
         const e = this.performList[i];
-        if (!e.isHoldOn && e.performName === name) {
+        if (!e.isHoldOn && this.matchPerformName(e.performName, name)) {
           e.stopFunction();
           clearTimeout(e.stopTimeout as unknown as number);
           /**
@@ -85,15 +94,18 @@ export class PerformController {
     } else {
       for (let i = 0; i < this.performList.length; i++) {
         const e = this.performList[i];
-        if (e.performName === name) {
+        if (this.matchPerformName(e.performName, name)) {
           e.stopFunction();
           clearTimeout(e.stopTimeout as unknown as number);
+          /**
+           * 在演出列表里删除演出对象的操作必须在调用 goNextWhenOver 之前（同上）
+           */
+          this.performList.splice(i, 1);
+          i--;
           if (e.goNextWhenOver) {
             // nextSentence();
             this.goNextWhenOver();
           }
-          this.performList.splice(i, 1);
-          i--;
           /**
            * 从状态表里清除演出
            */
@@ -103,6 +115,25 @@ export class PerformController {
     }
   }
 
+  public softUnmountPerformObject(perform: IPerform) {
+    const idx = this.performList.indexOf(perform);
+    if (idx < 0) return;
+    perform.stopFunction();
+    clearTimeout(perform.stopTimeout as unknown as number);
+    /**
+     * 在演出列表里删除演出对象的操作必须在调用 goNextWhenOver 之前
+     * 因为 goNextWhenOver 会调用 nextSentence，而 nextSentence 会清除目前未结束的演出
+     * 那么 nextSentence 函数就会删除这个演出，但是此时，在这个上下文，i 已经被确定了
+     * 所以 goNextWhenOver 后的代码会多删东西，解决方法就是在调用 goNextWhenOver 前先删掉这个演出对象
+     * 此问题对所有 goNextWhenOver 属性为真的演出都有影响，但只有 2 个演出有此问题
+     */
+    this.performList.splice(idx, 1);
+    if (perform.goNextWhenOver) {
+      // nextSentence();
+      this.goNextWhenOver();
+    }
+  }
+
   public erasePerformFromState(name: string) {
     webgalStore.dispatch(stageActions.removePerformByName(name));
   }

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

@@ -10,6 +10,8 @@ import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 import { logger } from '@/Core/util/logger';
 import { v4 as uuid } from 'uuid';
 import { cloneDeep, isEqual } from 'lodash';
+import omitBy from 'lodash/omitBy';
+import isUndefined from 'lodash/isUndefined';
 import * as PIXI from 'pixi.js';
 import { INSTALLED } from 'pixi.js';
 import { GifResource } from './GifResource';
@@ -71,9 +73,9 @@ export default class PixiStage {
     if (!source) return;
     const targetScale = target.scale;
     const targetPosition = target.position;
-    if (target.scale) Object.assign(targetScale, source.scale);
-    if (target.position) Object.assign(targetPosition, source.position);
-    Object.assign(target, source);
+    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;
     if (convertAlpha) {

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

@@ -1,5 +1,6 @@
 import { AnimationFrame } from '@/Core/Modules/animations';
 import { webgalStore } from '@/store/store';
+import { has, pickBy } from 'lodash';
 import isNull from 'lodash/isNull';
 
 type AnimationObj = Array<AnimationFrame>;
@@ -10,6 +11,7 @@ export function generateTransformAnimationObj(
   applyFrame: AnimationFrame,
   duration: number | string | boolean | null,
   ease: string,
+  writeFullEffect = true,
 ): AnimationObj {
   let animationObj;
   // 获取那个 target 的当前变换
@@ -25,8 +27,21 @@ export function generateTransformAnimationObj(
 
   // 找到 effect
   if (targetEffect) {
-    const effectWithDuration = { ...targetEffect!.transform!, duration: 0, ease };
-    animationObj.unshift(effectWithDuration);
+    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 || {}, (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 {
     // 应用默认effect，也就是最终的 effect 的 alpha = 0 版本
     const effectWithDuration = { ...applyFrame, alpha: 0, duration: 0, ease };

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

@@ -30,7 +30,7 @@ export function generateTimelineObj(
     currentDelay += segmentDuration;
     const { position, scale, ...segmentValues } = segment;
     // 不能用 scale，因为 popmotion 不能用嵌套
-    values.push({ x: position.x, y: position.y, scaleX: scale.x, scaleY: scale.y, ...segmentValues });
+    values.push({ x: position?.x, y: position?.y, scaleX: scale?.x, scaleY: scale?.y, ...segmentValues });
     // Easing 需要比 values 的长度少一个
     if (i > 0) {
       easeArray.push(stringToEasing(segment.ease));
@@ -71,11 +71,11 @@ export function generateTimelineObj(
     if (target?.pixiContainer) {
       // 不能赋值到 position，因为 x 和 y 被 WebGALPixiContainer 代理，而 position 属性没有代理
       const { position, scale, ...state } = getStartStateEffect();
-      const assignValue = omitBy({ x: position.x, y: position.y, ...state }, isUndefined);
+      const assignValue = omitBy({ x: position?.x, y: position?.y, ...state }, isUndefined);
       // @ts-ignore
       PixiStage.assignTransform(target?.pixiContainer, assignValue);
-      if (target?.pixiContainer) {
-        if (!isUndefined(scale.x)) {
+      if (scale && target?.pixiContainer) {
+        if (!isUndefined(scale?.x)) {
           target.pixiContainer.scale.x = scale.x;
         }
         if (!isUndefined(scale?.y)) {
@@ -98,11 +98,11 @@ export function generateTimelineObj(
       // 不能赋值到 position，因为 x 和 y 被 WebGALPixiContainer 代理，而 position 属性没有代理
       // 不能赋值到 position，因为 x 和 y 被 WebGALPixiContainer 代理，而 position 属性没有代理
       const { position, scale, ...state } = getEndStateEffect();
-      const assignValue = omitBy({ x: position.x, y: position.y, ...state }, isUndefined);
+      const assignValue = omitBy({ x: position?.x, y: position?.y, ...state }, isUndefined);
       // @ts-ignore
       PixiStage.assignTransform(target?.pixiContainer, assignValue);
-      if (target?.pixiContainer) {
-        if (!isUndefined(scale.x)) {
+      if (scale && target?.pixiContainer) {
+        if (!isUndefined(scale?.x)) {
           target.pixiContainer.scale.x = scale.x;
         }
         if (!isUndefined(scale?.y)) {

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

@@ -19,12 +19,14 @@ 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}`;
+  const performName = parallel ? `${performInitName}#${animationName}` : performInitName;
   let keepAnimationStopped = false;
 
-  WebGAL.gameplay.performController.unmountPerform(performInitName, true);
+  if (!parallel) WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
   let stopFunction;
   setTimeout(() => {
@@ -37,6 +39,7 @@ export const setAnimation = (sentence: ISentence): IPerform => {
       target,
       animationDuration,
       writeDefault,
+      !parallel,
     );
     if (animationObj) {
       logger.debug(`动画${animationName}作用在${target}`, animationDuration);
@@ -55,7 +58,7 @@ export const setAnimation = (sentence: ISentence): IPerform => {
   };
 
   return {
-    performName: performInitName,
+    performName: performName,
     duration: animationDuration,
     isHoldOn: keep,
     stopFunction,

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

@@ -10,13 +10,14 @@ import { baseTransform } from '@/store/stageInterface';
 import { IUserAnimation } from '../Modules/animations';
 import { getAnimateDuration, getAnimationObject } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
+import { v4 as uuid } from 'uuid';
 
 /**
  * 设置临时动画
  * @param sentence
  */
 export const setTempAnimation = (sentence: ISentence): IPerform => {
-  const animationName = (Math.random() * 10).toString(16);
+  const animationName = uuid();
   const animationString = sentence.content;
   let animationObj;
   try {
@@ -30,12 +31,14 @@ export const setTempAnimation = (sentence: ISentence): IPerform => {
   const target = getStringArgByKey(sentence, 'target') ?? '0';
   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}`;
+  const performName = parallel ? `${performInitName}#${animationName}` : performInitName;
   let keepAnimationStopped = false;
 
-  WebGAL.gameplay.performController.unmountPerform(performInitName, true);
+  if (!parallel) WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
   let stopFunction = () => {};
   setTimeout(() => {
@@ -48,6 +51,7 @@ export const setTempAnimation = (sentence: ISentence): IPerform => {
       target,
       animationDuration,
       writeDefault,
+      !parallel,
     );
     if (animationObj) {
       logger.debug(`动画${animationName}作用在${target}`, animationDuration);
@@ -66,7 +70,7 @@ export const setTempAnimation = (sentence: ISentence): IPerform => {
   };
 
   return {
-    performName: performInitName,
+    performName: performName,
     duration: animationDuration,
     isHoldOn: keep,
     stopFunction,