diff --git a/common/changes/@visactor/vchart/feat-optimize-datazoom-animation_2025-06-24-09-30.json b/common/changes/@visactor/vchart/feat-optimize-datazoom-animation_2025-06-24-09-30.json new file mode 100644 index 0000000000..e2d3a00d1f --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/vchart/src/chart/base/base-chart.ts b/packages/vchart/src/chart/base/base-chart.ts index 64f9672f7d..352ab86982 100644 --- a/packages/vchart/src/chart/base/base-chart.ts +++ b/packages/vchart/src/chart/base/base-chart.ts @@ -1270,22 +1270,12 @@ export class BaseChart 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( diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index abd7959e22..3ce40a90a1 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -224,6 +224,18 @@ export class BaseMark 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 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]; diff --git a/packages/vchart/src/mark/interface/common.ts b/packages/vchart/src/mark/interface/common.ts index c249f4f8d7..93eb2ff77f 100644 --- a/packages/vchart/src/mark/interface/common.ts +++ b/packages/vchart/src/mark/interface/common.ts @@ -232,6 +232,10 @@ export interface IMarkRaw extends ICompilableMark { runAnimation: () => void; /** 是否需要清除旧的数据 */ needClear?: boolean; + /** 禁用状态动画 */ + disableAnimationByState: (state: string | string[]) => void; + /** 启用状态动画 */ + enableAnimationByState: (state: string | string[]) => void; } export type IMark = IMarkRaw;