From a9ee4f25f270d028bc9d439d67145a1ef7ca2839 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 24 Jun 2025 17:32:18 +0800 Subject: [PATCH 1/2] feat: optimize datazoom animation --- ...e-datazoom-animation_2025-06-24-09-30.json | 10 ++++++++++ packages/vchart/src/chart/base/base-chart.ts | 14 ++------------ packages/vchart/src/mark/base/base-mark.ts | 19 ++++++++++++++++++- packages/vchart/src/mark/interface/common.ts | 4 ++++ 4 files changed, 34 insertions(+), 13 deletions(-) create mode 100644 common/changes/@visactor/vchart/feat-optimize-datazoom-animation_2025-06-24-09-30.json 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..e045cdd936 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 _disabledAnimationState?: string[] = []; + + disableAnimationByState(state: string | string[]) { + const states = array(state); + this._disabledAnimationState = [...new Set([...this._disabledAnimationState, ...states])]; + } + + enableAnimationByState(state: string | string[]) { + const states = array(state); + this._disabledAnimationState = this._disabledAnimationState.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._disabledAnimationState.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; From 8d5599c20e9c02ad2aa66421f65b6ba16542a04a Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 24 Jun 2025 17:35:17 +0800 Subject: [PATCH 2/2] refactor: rename variable --- packages/vchart/src/mark/base/base-mark.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index e045cdd936..3ce40a90a1 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -224,16 +224,16 @@ export class BaseMark extends GrammarItem implements IMar this._animationConfig = animationConfig; } - protected _disabledAnimationState?: string[] = []; + protected _disabledAnimationStates?: string[] = []; disableAnimationByState(state: string | string[]) { const states = array(state); - this._disabledAnimationState = [...new Set([...this._disabledAnimationState, ...states])]; + this._disabledAnimationStates = [...new Set([...this._disabledAnimationStates, ...states])]; } enableAnimationByState(state: string | string[]) { const states = array(state); - this._disabledAnimationState = this._disabledAnimationState.filter(s => !states.includes(s)); + this._disabledAnimationStates = this._disabledAnimationStates.filter(s => !states.includes(s)); } /** 布局标记 */ @@ -2005,7 +2005,7 @@ export class BaseMark extends GrammarItem implements IMar !state || !this._animationConfig || !(this._animationConfig as any)[state] || - this._disabledAnimationState.includes(state) + this._disabledAnimationStates.includes(state) ) { return false; }