feat: add geometry.animate()

antvis · Oct 17, 2019 · 5571313 · 5571313
1 parent c02f0ec
commit 5571313
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/src/geometry/base.ts b/src/geometry/base.ts
@@ -10,6 +10,7 @@ import { FIELD_ORIGIN, GROUP_ATTRS } from '../constant';
 import { Coordinate, IGroup, Scale } from '../dependents';
 import {
   AdjustType,
+  AnimateOption,
   Data,
   Datum,
   LooseObject,
@@ -118,15 +119,15 @@ export default class Geometry {
   /** 图形属性映射配置 */
   protected attributeOption: Record<string, AttributeOption> = {};
   /** tooltip 配置项 */
-  protected tooltipOption: TooltipOption | boolean = null;
+  protected tooltipOption: TooltipOption | boolean;
   /** adjust 配置项 */
-  protected adjustOption: AdjustOption[] = null;
+  protected adjustOption: AdjustOption[];
   /** style 配置项 */
-  protected styleOption: StyleOption = null;
+  protected styleOption: StyleOption;
   /** label 配置项 */
-  protected labelOption = null;
+  protected labelOption;
   /** animate 配置项 */
-  protected animateOption = null;
+  protected animateOption: AnimateOption | boolean = true;
   protected shapeFactory: ShapeFactory;
   protected elementsMap: Record<string, Element> = {};
   protected lastElementsMap: Record<string, Element> = {};
@@ -262,11 +263,7 @@ export default class Geometry {
     return this;
   }
 
-  /**
-   * TODO: 动画配置
-   * @param cfg
-   */
-  public animate(cfg): Geometry {
+  public animate(cfg: AnimateOption | boolean): Geometry {
     this.animateOption = cfg;
     return this;
   }
@@ -500,6 +497,7 @@ export default class Geometry {
       shape: obj.shape,
       isInCircle: this.coordinate.isPolar,
       data: obj[FIELD_ORIGIN],
+      animate: this.animateOption,
     };
 
     const styleOption = this.styleOption;

diff --git a/src/interface.ts b/src/interface.ts
@@ -39,7 +39,33 @@ export interface Point {
   readonly y: number;
 }
 
-/** 绘制 shape 时传入的信息 */
+export interface AnimateCfg {
+  /** 动画缓动函数 */
+  readonly easing?: string;
+  /** 动画执行函数 */
+  readonly animation?: string;
+  /** 动画执行时间 */
+  readonly duration?: number;
+  /** 动画延迟时间 */
+  readonly delay?: number;
+  // TODO: 完善 callback 的类型定义
+  /** 动画执行结束后的回调函数 */
+  readonly callback?: (...args) => any;
+}
+
+export interface AnimateOption {
+  /** 入场动画配置，false/null 表示关闭入场动画 */
+  enter?: AnimateCfg | false | null;
+  /** 更新动画配置，false/null 表示关闭更新动画 */
+  update?: AnimateCfg | false | null;
+  /** 销毁动画配置，false/null 表示关闭销毁动画 */
+  leave?: AnimateCfg | false | null;
+}
+
+/**
+ * @todo 重命名
+ * 绘制 shape 时传入的信息
+ */
 export interface ShapeDrawCFG {
   /** 映射的颜色值 */
   color?: string | null | undefined;
@@ -79,6 +105,9 @@ export interface ShapeDrawCFG {
 
   /** 数据是否发生了调整 */
   isStack?: boolean;
+  /** 动画配置，false 表示关闭动画 */
+  // TODO
+  animate?: AnimateOption | AnimateCfg | boolean;
 }
 
 /** shape 关键点信息 */

diff --git a/tests/unit/geometry/base-spec.ts b/tests/unit/geometry/base-spec.ts
@@ -232,7 +232,21 @@ describe('Geometry', () => {
     });
 
     it('animate', () => {
-      // todo
+      geometry.animate(false);
+      // @ts-ignore
+      expect(geometry.animateOption).toBe(false);
+
+      geometry.animate(true);
+      // @ts-ignore
+      expect(geometry.animateOption).toBe(true);
+
+      geometry.animate({
+        enter: null,
+      });
+      // @ts-ignore
+      expect(geometry.animateOption).toEqual({
+        enter: null,
+      });
     });
   });
 
@@ -355,6 +369,12 @@ describe('Geometry', () => {
       expect(geometry.adjustOption).toEqual([{ type: 'dodge' }]);
     });
 
+    it('animate()', () => {
+      geometry.animate(false);
+      // @ts-ignore
+      expect(geometry.animateOption).toBe(false);
+    });
+
     it('init()', () => {
       geometry.initial();
 
@@ -395,6 +415,7 @@ describe('Geometry', () => {
       expect(elements.length).toBe(4);
       expect(geometry.elementsMap).not.toBe(undefined);
       expect(geometry.container.get('children').length).toBe(4);
+      expect(elements[0].model.animate).toBe(false);
     });
 
     it('getGroupScales()', () => {