feat: optimize datazoom animation

common/changes/@visactor/vchart/feat-optimize-datazoom-animation_2025-06-24-09-30.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: optimize datazoom animation effect",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/chart/base/base-chart.ts

@@ -1270,22 +1270,12 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
 
   protected _enableMarkAnimation(states: string | string[]) {
     const marks = this.getAllMarks();
-    marks.forEach(mark => {
-      const product = mark.getProduct();
-      if (product && product.animate) {
-        // product.animate.enableAnimationState(states);
-      }
-    });
+    marks.forEach(mark => mark.enableAnimationByState(states));
   }
 
   protected _disableMarkAnimation(states: string | string[]) {
     const marks = this.getAllMarks();
-    marks.forEach(mark => {
-      const product = mark.getProduct();
-      if (product && product.animate) {
-        // product.animate.disableAnimationState(states);
-      }
-    });
+    marks.forEach(mark => mark.disableAnimationByState(states));
   }
 
   filterGraphicsByDatum(

packages/vchart/src/mark/base/base-mark.ts

@@ -224,6 +224,18 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
     this._animationConfig = animationConfig;
   }
 
+  protected _disabledAnimationStates?: string[] = [];
+
+  disableAnimationByState(state: string | string[]) {
+    const states = array(state);
+    this._disabledAnimationStates = [...new Set([...this._disabledAnimationStates, ...states])];
+  }
+
+  enableAnimationByState(state: string | string[]) {
+    const states = array(state);
+    this._disabledAnimationStates = this._disabledAnimationStates.filter(s => !states.includes(s));
+  }
+
   /** 布局标记 */
   private _skipBeforeLayouted = false;
 
@@ -1989,7 +2001,12 @@ export class BaseMark<T extends ICommonSpec> extends GrammarItem implements IMar
   }
 
   hasAnimationByState(state: AnimationStateValues) {
-    if (!state || !this._animationConfig || !(this._animationConfig as any)[state]) {
+    if (
+      !state ||
+      !this._animationConfig ||
+      !(this._animationConfig as any)[state] ||
+      this._disabledAnimationStates.includes(state)
+    ) {
       return false;
     }
     const stateAnimationConfig = (this._animationConfig as any)[state];

packages/vchart/src/mark/interface/common.ts

@@ -232,6 +232,10 @@ export interface IMarkRaw<T extends ICommonSpec> extends ICompilableMark {
   runAnimation: () => void;
   /** 是否需要清除旧的数据 */
   needClear?: boolean;
+  /** 禁用状态动画 */
+  disableAnimationByState: (state: string | string[]) => void;
+  /** 启用状态动画 */
+  enableAnimationByState: (state: string | string[]) => void;
 }
 
 export type IMark = IMarkRaw<ICommonSpec>;