feat: support AStageAnimate

Author: neuqzxy

common/changes/@visactor/vrender-animate/feat-stage-animate_2025-07-01-09-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-animate",
+      "comment": "feat: support AStageAnimate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-animate"
+}

common/changes/@visactor/vrender-core/feat-stage-animate_2025-07-01-09-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: support AStageAnimate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}

packages/vrender-animate/src/animate.ts

@@ -492,6 +492,10 @@ export class Animate implements IAnimate {
     this._onFrame = [];
     this._onEnd = [];
     this._onRemove = [];
+
+    this.forEachStep(step => {
+      step.release();
+    });
   }
 
   /**
@@ -716,4 +720,12 @@ export class Animate implements IAnimate {
   getLoop(): number {
     return this._loopCount;
   }
+
+  protected forEachStep(cb: (step: IStep) => void): void {
+    let step = this._firstStep;
+    while (step) {
+      cb(step);
+      step = step.next;
+    }
+  }
 }

packages/vrender-animate/src/custom/custom-animate.ts

@@ -1,5 +1,5 @@
 import type { ComponentAnimator } from '../component';
-import type { EasingType, IAnimateStepType, ICustomAnimate } from '@visactor/vrender-core';
+import type { EasingType, IAnimateStepType, ICustomAnimate, Stage } from '@visactor/vrender-core';
 import { Step } from '../step';
 
 export abstract class ACustomAnimate<T> extends Step implements ICustomAnimate {
@@ -52,3 +52,78 @@ export abstract class AComponentAnimate<T> extends ACustomAnimate<T> {
     this._animator && this._animator.stop();
   }
 }
+
+export abstract class AStageAnimate<T> extends ACustomAnimate<T> {
+  willCallBeforeStageRender: boolean = true;
+  willCallAfterStageRender: boolean = true;
+  constructor(customFrom: T, customTo: T, duration: number, easing: EasingType, params?: any) {
+    super(customFrom, customTo, duration, easing, params);
+    this.props = {} as T;
+  }
+
+  // 用户重载
+  protected beforeStageRender(stage: Stage, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false {
+    return false;
+  }
+
+  // 用户重载
+  protected afterStageRender(stage: Stage, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false {
+    return false;
+  }
+
+  onFirstRun(): void {
+    super.onFirstRun();
+    this.target.stage.setBeforeRender(this._beforeStageRender);
+    this.target.stage.setAfterRender(this._afterStageRender);
+    // 禁用脏矩形，因为stage动画可能会批量修改整体画面
+    this.target.stage.disableDirtyBounds();
+  }
+
+  stop() {
+    super.stop();
+    this.target.stage.removeBeforeRender(this._beforeStageRender);
+    this.target.stage.removeAfterRender(this._afterStageRender);
+  }
+  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {
+    super.onUpdate(end, ratio, out);
+    this.willCallBeforeStageRender = true;
+    this.willCallAfterStageRender = true;
+  }
+
+  protected _beforeStageRender = () => {
+    if (!this.willCallBeforeStageRender) {
+      return;
+    }
+    this.willCallBeforeStageRender = false;
+    const stage = this.target.stage as any;
+    const canvas = stage.window.getContext().canvas.nativeCanvas;
+    const outputCanvas = this.beforeStageRender(stage, canvas);
+    if (outputCanvas) {
+      this.renderToStage(stage, outputCanvas);
+    }
+  };
+
+  protected _afterStageRender = () => {
+    if (!this.willCallAfterStageRender) {
+      return;
+    }
+    this.willCallAfterStageRender = false;
+    const stage = this.target.stage as any;
+    const canvas = stage.window.getContext().canvas.nativeCanvas;
+    const outputCanvas = this.afterStageRender(stage, canvas);
+    if (outputCanvas) {
+      this.renderToStage(stage, outputCanvas);
+    }
+  };
+
+  protected renderToStage(stage: Stage, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false {
+    const stageCanvas = stage.window.getContext().canvas.nativeCanvas;
+    const ctx = stageCanvas.getContext('2d');
+    if (!ctx) {
+      return false;
+    }
+    ctx.clearRect(0, 0, stageCanvas.width, stageCanvas.height);
+    ctx.drawImage(canvas, 0, 0);
+    return stageCanvas;
+  }
+}

packages/vrender-animate/src/index.ts

@@ -9,7 +9,7 @@ export { Step as AnimateStep } from './step';
 export * from './utils/easing-func';
 export * from './utils/easing';
 export { registerAnimate } from './register';
-export { ACustomAnimate, AComponentAnimate } from './custom/custom-animate';
+export { ACustomAnimate, AComponentAnimate, AStageAnimate } from './custom/custom-animate';
 export { ComponentAnimator } from './component/component-animator';
 export { IncreaseCount } from './custom/number';
 export { MorphingPath, MultiToOneMorphingPath, oneToMultiMorph, multiToOneMorph, morphPath } from './custom/morphing';

packages/vrender-animate/src/step.ts

@@ -316,6 +316,10 @@ export class Step implements IStep {
   stop(): void {
     // ...
   }
+
+  release(): void {
+    // ...
+  }
 }
 
 export class WaitStep extends Step {

packages/vrender-core/src/core/stage.ts

@@ -185,8 +185,8 @@ export class Stage extends Group implements IStage {
     return this._eventSystem;
   }
 
-  protected _beforeRender?: (stage: IStage) => void;
-  protected _afterRender?: (stage: IStage) => void;
+  protected _beforeRenderList: Array<(stage: IStage) => void>;
+  protected _afterRenderList: Array<(stage: IStage) => void>;
   // 0: 正常渲染, > 0: 跳过隐藏canvas的渲染, < 0: 禁止渲染
   protected _skipRender?: number;
   protected _afterNextRenderCbs?: ((stage: IStage) => void)[];
@@ -245,6 +245,8 @@ export class Stage extends Group implements IStage {
     this.layerService = container.get<ILayerService>(LayerService);
     this.graphicService = container.get<IGraphicService>(GraphicService);
     this.pluginService.active(this, params);
+    this._beforeRenderList = [];
+    this._afterRenderList = [];
 
     this.window.create({
       width: params.width,
@@ -301,8 +303,12 @@ export class Stage extends Group implements IStage {
     params.enableLayout && this.enableLayout();
     this.hooks.beforeRender.tap('constructor', this.beforeRender);
     this.hooks.afterRender.tap('constructor', this.afterRender);
-    this._beforeRender = params.beforeRender;
-    this._afterRender = params.afterRender;
+    if (params.beforeRender) {
+      this._beforeRenderList.push(params.beforeRender);
+    }
+    if (params.afterRender) {
+      this._afterRenderList.push(params.afterRender);
+    }
     this.supportInteractiveLayer = params.interactiveLayer !== false;
     if (!params.optimize) {
       params.optimize = {
@@ -488,12 +494,12 @@ export class Stage extends Group implements IStage {
   }
 
   protected beforeRender = (stage: IStage) => {
-    this._beforeRender && this._beforeRender(stage);
+    this._beforeRenderList.forEach(cb => cb(stage));
   };
 
   protected afterRender = (stage: IStage) => {
     this.renderCount++;
-    this._afterRender && this._afterRender(stage);
+    this._afterRenderList.forEach(cb => cb(stage));
     this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage));
     this._afterNextRenderCbs = null;
     this.tickedBeforeRender = false;
@@ -506,11 +512,19 @@ export class Stage extends Group implements IStage {
   };
 
   setBeforeRender(cb: (stage: IStage) => void) {
-    this._beforeRender = cb;
+    this._beforeRenderList.push(cb);
+  }
+
+  removeBeforeRender(cb: (stage: IStage) => void) {
+    this._beforeRenderList = this._beforeRenderList.filter(c => c !== cb);
   }
 
   setAfterRender(cb: (stage: IStage) => void) {
-    this._afterRender = cb;
+    this._afterRenderList.push(cb);
+  }
+
+  removeAfterRender(cb: (stage: IStage) => void) {
+    this._afterRenderList = this._afterRenderList.filter(c => c !== cb);
   }
 
   afterNextRender(cb: (stage: IStage) => void) {

packages/vrender-core/src/event/event-target.ts

@@ -61,6 +61,6 @@ export const EventTarget: Omit<IEventTarget, Exclude<keyof INode, 'dispatchEvent
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   emit(eventName: string, object: Dict<any>) {
-    return this.dispatchEvent(new CustomEvent(eventName, object));
+    return (this as any).dispatchEvent(new CustomEvent(eventName, object));
   }
 };

packages/vrender-core/src/graphic/graphic.ts

@@ -691,6 +691,9 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
   }
 
   setAttributes(params: Partial<T>, forceUpdateTag: boolean = false, context?: ISetAttributeContext) {
+    if (!params) {
+      return;
+    }
     params =
       (this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context)) || params;
 

packages/vrender-core/src/interface/animation/animate.ts

@@ -66,6 +66,9 @@ export interface IStep {
 
   // 停止
   stop: () => void;
+
+  // 释放
+  release: () => void;
 }
 
 export interface IAnimate {