Feat: Decouple properties in timeline animations & support parallel animation for setTransform command

Author: TremblingMoeNew

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,
@@ -18,12 +20,25 @@ import {
 export function getAnimationObject(animationName: string, target: string, duration: number, writeDefault: boolean) {
   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>();
+    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: '' });
+        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
+        newEffect = cloneDeep({ ...originalTransform, duration: 0, ease: '' });
       } else {
         newEffect = cloneDeep({ ...baseTransform, duration: 0, ease: '' });
       }
@@ -51,6 +66,14 @@ 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,17 +19,19 @@ export class PerformController {
   public performList: Array<IPerform> = [];
 
   public arrangeNewPerform(perform: IPerform, script: ISentence, syncPerformState = true) {
-    // 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
-    const dupPerformIndex = this.performList.findIndex((p) => p.performName === perform.performName);
-    if (dupPerformIndex > -1) {
-      // 结束并删除全部重复演出
-      for (let i = 0; i < this.performList.length; i++) {
-        const e = this.performList[i];
-        if (e.performName === perform.performName) {
-          e.stopFunction();
-          clearTimeout(e.stopTimeout as unknown as number);
-          this.performList.splice(i, 1);
-          i--;
+    if (!perform.isParallel){
+      // 检查演出列表内是否有相同的演出，如果有，一定是出了什么问题
+      const dupPerformIndex = this.performList.findIndex((p) => p.performName === perform.performName);
+      if (dupPerformIndex > -1) {
+        // 结束并删除全部重复演出
+        for (let i = 0; i < this.performList.length; i++) {
+          const e = this.performList[i];
+          if (e.performName === perform.performName) {
+            e.stopFunction();
+            clearTimeout(e.stopTimeout as unknown as number);
+            this.performList.splice(i, 1);
+            i--;
+          }
         }
       }
     }

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

@@ -23,6 +23,8 @@ export interface IPerform {
   arrangePerformPromise?: Promise<IPerform>;
   // 跳过由 nextSentence 函数引发的演出回收
   skipNextCollect?: boolean;
+  // 
+  isParallel?: boolean;
 }
 
 // next之后，可以被打断的演出会被打断，不能被打断的演出会继续，阻塞next的演出会阻止next被响应。

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;
   }

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: boolean = true,
 ): AnimationObj {
   let animationObj;
   // 获取那个 target 的当前变换
@@ -25,8 +27,18 @@ 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, (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
+      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

@@ -33,7 +33,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));
@@ -74,11 +74,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)) {
@@ -101,11 +101,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/setTransform.ts

@@ -10,15 +10,15 @@ 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 { getAnimateDuration, getAnimationObject } from '../Modules/animationFunctions';
-
+import { getAnimateDurationFromObj, getAnimationObject } from '../Modules/animationFunctions';
+import { v4 as uuid } from 'uuid';
 /**
  * 设置变换
  * @param sentence
  */
 export const setTransform = (sentence: ISentence): IPerform => {
   const startDialogKey = webgalStore.getState().stage.currentDialogKey;
-  const animationName = (Math.random() * 10).toString(16);
+  const animationName = uuid();
   const animationString = sentence.content;
   let animationObj: AnimationFrame[];
 
@@ -27,14 +27,16 @@ export const setTransform = (sentence: ISentence): IPerform => {
   const writeDefault = getBooleanArgByKey(sentence, 'writeDefault') ?? false;
   const target = getStringArgByKey(sentence, 'target') ?? '0';
   const keep = getBooleanArgByKey(sentence, 'keep') ?? false;
+  const parallel = getBooleanArgByKey(sentence, 'parallel') ?? false;
 
   const performInitName = `animation-${target}`;
 
-  WebGAL.gameplay.performController.unmountPerform(performInitName, true);
+  if (!parallel) WebGAL.gameplay.performController.unmountPerform(performInitName, true);
 
   try {
     const frame = JSON.parse(animationString) as AnimationFrame;
-    animationObj = generateTransformAnimationObj(target, frame, duration, ease);
+    // writeDefault时需要完整的当前effect，其他时候不需要
+    animationObj = generateTransformAnimationObj(target, frame, duration, ease, writeDefault);
     console.log('animationObj:', animationObj);
   } catch (e) {
     // 解析都错误了，歇逼吧
@@ -43,8 +45,7 @@ export const setTransform = (sentence: ISentence): IPerform => {
 
   const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
   WebGAL.animationManager.addAnimation(newAnimation);
-  const animationDuration = getAnimateDuration(animationName);
-
+  const animationDuration = getAnimateDurationFromObj(newAnimation);
   const key = `${target}-${animationName}-${animationDuration}`;
   let keepAnimationStopped = false;
   setTimeout(() => {
@@ -82,5 +83,6 @@ export const setTransform = (sentence: ISentence): IPerform => {
     blockingNext: () => false,
     blockingAuto: () => !keep,
     stopTimeout: undefined, // 暂时不用，后面会交给自动清除
+    isParallel: parallel,
   };
 };

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

@@ -2,6 +2,7 @@ import { baseTransform, IEffect, IStageState, ITransform } from '@/store/stageIn
 
 import { WebGAL } from '@/Core/WebGAL';
 import PixiStage from '@/Core/controller/stage/pixi/PixiController';
+import { isUndefined, omitBy } from 'lodash';
 
 export function setStageObjectEffects(stageState: IStageState) {
   const effects = stageState.effects;
@@ -42,5 +43,5 @@ function convertTransform(transform: ITransform | undefined) {
     return {};
   }
   const { position, ...rest } = transform;
-  return { ...rest, x: position.x, y: position.y };
+  return omitBy({ ...rest, x: position?.x, y: position?.y },isUndefined);
 }

packages/webgal/src/store/stageInterface.ts

@@ -25,41 +25,41 @@ export interface IChooseItem {
 }
 
 export interface ITransform {
-  alpha: number;
-  scale: {
-    x: number;
-    y: number;
+  alpha?: number;
+  scale?: {
+    x?: number;
+    y?: number;
   };
   // pivot: {
   //   x: number;
   //   y: number;
   // };
-  position: {
-    x: number;
-    y: number;
+  position?: {
+    x?: number;
+    y?: number;
   };
-  rotation: number;
-  blur: number;
-  brightness: number;
-  contrast: number;
-  saturation: number;
-  gamma: number;
-  colorRed: number;
-  colorGreen: number;
-  colorBlue: number;
-  bevel: number;
-  bevelThickness: number;
-  bevelRotation: number;
-  bevelSoftness: number;
-  bevelRed: number;
-  bevelGreen: number;
-  bevelBlue: number;
-  bloom: number;
-  bloomBrightness: number;
-  bloomBlur: number;
-  bloomThreshold: number;
-  shockwaveFilter: number;
-  radiusAlphaFilter: number;
+  rotation?: number;
+  blur?: number;
+  brightness?: number;
+  contrast?: number;
+  saturation?: number;
+  gamma?: number;
+  colorRed?: number;
+  colorGreen?: number;
+  colorBlue?: number;
+  bevel?: number;
+  bevelThickness?: number;
+  bevelRotation?: number;
+  bevelSoftness?: number;
+  bevelRed?: number;
+  bevelGreen?: number;
+  bevelBlue?: number;
+  bloom?: number;
+  bloomBrightness?: number;
+  bloomBlur?: number;
+  bloomThreshold?: number;
+  shockwaveFilter?: number;
+  radiusAlphaFilter?: number;
 }
 
 /**

packages/webgal/src/store/stageReducer.ts

@@ -23,6 +23,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
 import { commandType } from '@/Core/controller/scene/sceneInterface';
 import { STAGE_KEYS } from '@/Core/constants';
+import { isUndefined, omitBy } from 'lodash';
 
 // 初始化舞台数据
 
@@ -123,7 +124,13 @@ const stageSlice = createSlice({
       const effectIndex = state.effects.findIndex((e) => e.target === target);
       if (effectIndex >= 0) {
         // Update the existing effect
-        state.effects[effectIndex].transform = transform;
+        const targetScale = state.effects[effectIndex]!.transform!.scale;
+        const targetPosition = state.effects[effectIndex]!.transform!.position;
+        if (transform!.scale) Object.assign(targetScale!, omitBy(transform!.scale,isUndefined));
+        if (transform!.position) Object.assign(targetPosition!, omitBy(transform!.position,isUndefined));
+        Object.assign(state.effects[effectIndex]!.transform!, omitBy(transform,isUndefined))
+        state.effects[effectIndex].transform!.scale = targetScale;
+        state.effects[effectIndex].transform!.position = targetPosition;
       } else {
         // Add a new effect
         state.effects.push({