VisActor · neuqzxy · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025
diff --git a/packages/vchart/src/animation/animate-manager.ts b/packages/vchart/src/animation/animate-manager.ts
diff --git a/packages/vchart/src/core/vchart.ts b/packages/vchart/src/core/vchart.ts
@@ -814,8 +814,12 @@ export class VChart implements IVChart {
         }
         return diffState;
       };
-      this._compiler.getRootMarks().forEach(mark => {
-        mark.updateAnimationState(updateGraphicAnimationState);
+
+      this._chart?.getAllRegions().forEach(region => {
+        region.updateAnimateStateCallback(updateGraphicAnimationState);
+      });
+      this._chart?.getAllComponents().forEach(component => {
+        component.updateAnimateStateCallback(updateGraphicAnimationState);
       });
     }
   }
@@ -1901,16 +1905,22 @@ export class VChart implements IVChart {
 
   /** 停止正在进行的所有动画 */
   stopAnimation() {
-    // this._compiler?.getVGrammarView()?.animate?.stop();
+    this.getStage()?.stopAnimation(true);
+  }
+
+  reRunNormalAnimation() {
+    this.getStage()?.reApplyAnimationState('normal', true);
   }
 
   /** 暂停正在进行的所有动画 */
   pauseAnimation() {
+    this.getStage()?.pauseAnimation(true);
     // this._compiler?.getVGrammarView()?.animate?.pause();
   }
 
   /** 恢复暂停时正在进行的所有动画 */
   resumeAnimation() {
+    this.getStage()?.resumeAnimation(true);
     // this._compiler?.getVGrammarView()?.animate?.resume();
   }
 

diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts
@@ -1075,7 +1075,6 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
     this._dataByKey = (mark as any)._dataByKey;
     this._prevDataByKey = (mark as any)._prevDataByKey;
     this.needClear = (mark as any).needClear;
-    this._aniamtionStateCallback = (mark as any)._aniamtionStateCallback;
   }
 
   private _parseProgressiv
10000
eContext(data: Datum[]) {
@@ -1272,7 +1271,19 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
   }
 
   protected _setAnimationState(g: IMarkGraphic) {
-    const customizedState = this._aniamtionStateCallback ? this._aniamtionStateCallback(g) : undefined;
+    const callback =
+      (this.type === MarkTypeEnum.component
+        ? this.model.getAnimationStateCallback()
+        : (this.model as ISeries).getRegion?.()?.getAnimationStateCallback()) ||
+      ((g: IMarkGraphic) => {
+        const diffState = g.context?.diffState;
+        return diffState === AnimationStateEnum.exit
+          ? AnimationStateEnum.exit
+          : diffState === AnimationStateEnum.update
+          ? AnimationStateEnum.update
+          : AnimationStateEnum.appear;
+      });
+    const customizedState = callback(g);
 
     g.context.animationState = customizedState ?? g.context.diffState;
 
@@ -1977,12 +1988,6 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
     }
   }
 
-  protected _aniamtionStateCallback: (g: IMarkGraphic) => AnimationStateValues;
-
-  updateAnimationState(callback: (graphic: IMarkGraphic) => AnimationStateValues) {
-    this._aniamtionStateCallback = callback;
-  }
-
   hasAnimationByState(state: AnimationStateValues) {
     if (!state || !this._animationConfig || !(this._animationConfig as any)[state]) {
       return false;

diff --git a/packages/vchart/src/mark/group.ts b/packages/vchart/src/mark/group.ts
@@ -29,6 +29,7 @@ export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
     return this._marks;
   }
 
+  protected _diffState = DiffState.enter;
   protected declare _product: Maybe<IGroup>;
   declare getProduct: () => Maybe<IGroup>;
 
@@ -117,12 +118,11 @@ export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
     }
 
     const style = this._simpleStyle ?? this.getAttributesOfState({});
-    const prevState = this._product.context?.diffState;
 
     this._product.context = {
       ...this._product.context,
       ...this._getCommonContext(),
-      diffState: prevState ? DiffState.update : DiffState.enter
+      diffState: this._diffState
     };
     this._setAnimationState(this._product as unknown as IMarkGraphic);
     const newAttrs = this._getAttrsFromConfig(style);
@@ -147,6 +147,11 @@ export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
     this.needClear = true;
   }
 
+  clearExitGraphics() {
+    // group 暂时不需要clear元素，完成首次渲染后 将状态设置为update
+    this._diffState = DiffState.update;
+  }
+
   render(): void {
     if (this._isCommited) {
       log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -159,14 +164,6 @@ export class GroupMark extends BaseMark<IGroupMarkSpec> implements IGroupMark {
     });
   }
 
-  updateAnimationState(callback: (g: IMarkGraphic) => AnimationStateValues) {
-    super.updateAnimationState(callback);
-
-    this.getMarks().forEach(mark => {
-      mark.updateAnimationState(callback);
-    });
-  }
-
   release() {
     super.release();
     this.removeProduct();

diff --git a/packages/vchart/src/mark/interface/common.ts b/packages/vchart/src/mark/interface/common.ts
@@ -228,8 +228,6 @@ export interface IMarkRaw<T extends ICommonSpec> extends ICompilableMark {
   renderProgressive: () => void;
   /** 增量流程后，是否执行动画 */
   canAnimateAfterProgressive: () => boolean;
-  /** 更新图元动画状态 */
-  updateAnimationState: (callback: (graphic: IMarkGraphic) => AnimationStateValues) => void;
   /** 执行动画 */
   runAnimation: () => void;
   /** 是否需要清除旧的数据 */

diff --git a/packages/vchart/src/model/base-model.ts b/packages/vchart/src/model/base-model.ts
@@ -6,14 +6,21 @@ import type {
   IModel,
   IModelInitOption,
   IModelOption,
-  IModelRenderOption,
   IModelEvaluateOption,
   IModelSpec,
   IModelMarkInfo,
   IModelSpecInfo
 } from './interface';
 import type { CoordinateT
1E0A
ype } from '../typings/coordinate';
-import type { ICompileMarkConfig, IMark, IMarkOption, IMarkRaw, IMarkStyle } from '../mark/interface';
+import type {
+  AnimationStateValues,
+  ICompileMarkConfig,
+  IMark,
+  IMarkGraphic,
+  IMarkOption,
+  IMarkRaw,
+  IMarkStyle
+} from '../mark/interface';
 import type {
   Datum,
   StateValueType,
@@ -324,4 +331,14 @@ export abstract class BaseModel<T extends IModelSpec> extends CompilableBase imp
     }
     return index;
   }
+
+  private _aniamtionStateCallback: (graphic: IMarkGraphic) => AnimationStateValues;
+
+  updateAnimateStateCallback(callback: (graphic: IMarkGraphic) => AnimationStateValues) {
+    this._aniamtionStateCallback = callback;
+  }
+
+  getAnimationStateCallback() {
+    return this._aniamtionStateCallback;
+  }
 }
diff --git a/packages/vchart/src/model/interface.ts b/packages/vchart/src/model/interface.ts
@@ -1,13 +1,12 @@
 import type { IBoundsLike } from '@visactor/vutils';
 import type { DataSet, DataView } from '@visactor/vdataset';
 import type { IEvent, IEventDispatcher } from '../event/interface';
-import type { IMark, IMarkRaw, IMarkStyle, MarkTypeEnum } from '../mark/interface';
+import type { AnimationStateValues, IMark, IMarkGraphic, IMarkRaw, IMarkStyle, MarkTypeEnum } from '../mark/interface';
 import type { RenderMode } from '../typings/spec/common';
 import type { StringOrNumber } from '../typings/common';
 import type { IGroupMarkSpec, ConvertToMarkStyleSpec, ICommonSpec } from '../typings/visual';
 import type { IRect } from '../typings/space';
 import type { IPoint, CoordinateType } from '../typings/coordinate';
-import type { ITheme } from '../theme/interface';
 import type { StateValueType } from '../typings/spec';
 import type { ICompilable, ICompilableInitOption } from '../compile/interface';
 import type { IGlobalScale } from '../scale/interface';
@@ -23,9 +22,6 @@ import type { IVChart } from '../core/interface';
 import type { ICompilableData } from '../compile/data/interface';
 import type { IDimensionData, IDimensionInfo } from '../event/events/dimension/interface';
 import type { IAxis } from '../component/axis';
-import type { CrossHairStateItem } from '../component/crosshair/interface/common';
-import type { RectCrosshairAttrs } from '@visactor/vrender-components';
-
 // TODO:
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IModelInitOption {}
@@ -139,6 +135,9 @@ export interface IModel extends ICompilable {
   initMarkStyleWithSpec: (mark?: IMark, spec?: any) => void;
 
   getSpecInfo: () => IModelSpecInfo;
+
+  updateAnimateStateCallback: (callback: (graphic: IMarkGraphic) => AnimationStateValues) => void;
+  getAnimationStateCallback: () => (graphic: IMarkGraphic) => AnimationStateValues;
 }
 
 export interface ILayoutModel extends IModel {

diff --git a/packages/vchart/src/region/region.ts b/packages/vchart/src/region/region.ts
@@ -89,6 +89,7 @@ export class Region<T extends IRegionSpec = IRegionSpec> extends LayoutModel<T>
     super.created();
     const clip = this._spec.clip ?? this._getClipDefaultValue();
     this._groupMark = this._createGroupMark('regionGroup', this.userId, this.layoutZIndex);
+
     if ((this._spec as IGeoRegionSpec).roam) {
       this._groupMark.setMarkConfig({ interactive: true });
     }