fix: 修复 chart.annotation() 接口中 animateOption 属性不生效的问题，Closed #2146

antvis · Mar 11, 2020 · 6a3ecba · 6a3ecba
1 parent 83f9ad0
commit 6a3ecba
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 19 deletions.
diff --git a/src/chart/controller/annotation.ts b/src/chart/controller/annotation.ts
@@ -620,7 +620,7 @@ export default class Annotation extends Controller<BaseOption[]> {
         end: this.parsePosition(end),
       };
     }
-    // 合并主题，用户配置优先级高于主题
+    // 合并主题，用户配置优先级高于默认主题
     const cfg = deepMix({}, theme, {
       ...o,
       top: option.top,
@@ -630,7 +630,7 @@ export default class Annotation extends Controller<BaseOption[]> {
     });
     cfg.container = this.getComponentContainer(cfg);
     cfg.animate = this.view.getOptions().animate && cfg.animate && get(option, 'animate', cfg.animate); // 如果 view 关闭动画，则不执行
-    cfg.animateOption = deepMix({}, DEFAULT_ANIMATE_CFG, cfg.animateOption);
+    cfg.animateOption = deepMix({}, DEFAULT_ANIMATE_CFG, cfg.animateOption, option.animateOption);
 
     return cfg;
   }

diff --git a/src/chart/controller/axis.ts b/src/chart/controller/axis.ts
@@ -3,6 +3,8 @@ import { COMPONENT_TYPE, DIRECTION, LAYER } from '../../constant';
 import { CircleAxis, CircleGrid, IGroup, LineAxis, LineGrid, Scale } from '../../dependents';
 import { AxisCfg, AxisOption, ComponentOption } from '../../interface';
 
+import { DEFAULT_ANIMATE_CFG } from '../../animate/';
+
 import {
   getAxisDirection,
   getAxisFactorByRegion,
@@ -21,22 +23,6 @@ type Option = Record<string, AxisOption> | boolean;
 
 type Cache = Map<string, ComponentOption>;
 
-const DEFAULT_ANIMATE_CFG = {
-  appear: null,
-  update: {
-    duration: 400,
-    easing: 'easeQuadInOut',
-  }, // 更新时发生变更的动画配置
-  enter: {
-    duration: 400,
-    easing: 'easeQuadInOut',
-  }, // 更新时新增元素的入场动画配置
-  leave: {
-    duration: 300,
-    easing: 'easeQuadIn',
-  }, // 更新时销毁动画配置
-};
-
 // update 组件的时候，忽略的数据更新
 const OMIT_CFG = ['container'];
 
@@ -712,7 +698,9 @@ export default class Axis extends Controller<Option> {
   private getAnimateCfg(cfg: object) {
     return {
       animate: this.view.getOptions().animate && get(cfg, 'animate'), // 如果 view 关闭动画，则不执行动画
-      animateOption: deepMix({}, DEFAULT_ANIMATE_CFG, get(cfg, 'animateOption', {})),
+      animateOption: deepMix({}, DEFAULT_ANIMATE_CFG, {
+        appear: null, // 默认不做出场动画
+      }, get(cfg, 'animateOption', {})),
     };
   }
 }
diff --git a/src/interface.ts b/src/interface.ts
@@ -414,6 +414,8 @@ export interface AnnotationBaseOption {
   readonly style?: object;
   /** 是否进行动画 */
   readonly animate?: boolean;
+  /** 动画参数配置，当且仅当 `animate` 属性为 true，即动画开启时生效。 */
+  animateOption?: ComponentAnimateOption;
   /** x 方向的偏移量 */
   readonly offsetX?: number;
   /** y 方向的偏移量 */