为 Geometry 添加动画

src/chart/view.ts

@@ -119,6 +119,8 @@ export default class View extends EE {
   // 分面类实例
   protected facetInstance: Facet;
 
+  private doAnimation: boolean = true;
+
   constructor(props: ViewCfg) {
     super();
 
@@ -372,7 +374,13 @@ export default class View extends EE {
     return this;
   }
 
-  public animate(): View {
+  /*
+   * 开启或者关闭动画
+   * @param status 动画状态，true 表示开始，false 表示关闭
+   * @returns
+   */
+  public animate(status: boolean): View {
+    this.doAnimation = status;
     return this;
   }
 
@@ -857,8 +865,13 @@ export default class View extends EE {
    * @private
    */
   private paintGeometries() {
+    const doAnimation = this.doAnimation;
     // geometry 的 paint 阶段
     this.geometries.map((geometry: Geometry) => {
+      if (!doAnimation) {
+        // 如果 view 不执行动画，那么 view 下所有的 geometry 都不执行动画
+        geometry.animate(false);
+      }
       geometry.paint();
     });
   }

src/geometry/animate/action.ts

@@ -0,0 +1,160 @@
+import { transform } from '@antv/matrix-util';
+import { ShapeDrawCFG } from 'interface';
+import { Coordinate, IGroup, IShape } from '../../dependents';
+import { getAngle, getCoordinateClipCfg, getSectorPath } from './util';
+
+/**
+ * 垂直方向的缩放动画
+ * @param shape
+ * @param animateCfg
+ * @param shapeModel
+ */
+export function scaleInY(shape: IShape | IGroup, animateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
+  const box = shape.getBBox();
+  const x = (box.minX + box.maxX) / 2;
+  const { points } = shapeModel;
+  // 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
+  const y = points[0].y - points[1].y <= 0 ? box.maxY : box.minY;
+
+  const v = [x, y, 1];
+  shape.applyToMatrix(v);
+
+  const matrix = transform(shape.getMatrix(), [['t', -x, -y], ['s', 1, 0.01], ['t', x, y]]);
+  shape.setMatrix(matrix);
+
+  const endState = {
+    matrix: transform(shape.getMatrix(), [['t', -x, -y], ['s', 1, 100], ['t', x, y]]),
+  };
+
+  shape.animate(endState, animateCfg);
+}
+
+/**
+ * x 方向的缩放动画
+ * @param shape
+ * @param animateCfg
+ * @param shapeModel
+ */
+export function scaleInX(shape: IShape | IGroup, animateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
+  const box = shape.getBBox();
+  const { points } = shapeModel;
+  // x 数值如果为负值，那么应该从右往左生长
+  const x = points[0].y - points[1].y > 0 ? box.maxX : box.minX;
+  const y = (box.minY + box.maxY) / 2;
+
+  const v = [x, y, 1];
+  shape.applyToMatrix(v);
+
+  const matrix = transform(shape.getMatrix(), [['t', -x, -y], ['s', 0.01, 1], ['t', x, y]]);
+  shape.setMatrix(matrix);
+
+  const endState = {
+    matrix: transform(shape.getMatrix(), [['t', -x, -y], ['s', 100, 1], ['t', x, y]]),
+  };
+
+  shape.animate(endState, animateCfg);
+}
+
+/**
+ * 渐隐动画
+ * @param shape
+ * @param animateCfg
+ * @param shapeModel
+ */
+export function fadeOut(shape: IShape | IGroup, animateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
+  const endState = {
+    fillOpacity: 0,
+    strokeOpacity: 0,
+  };
+  const { easing, duration, delay } = animateCfg;
+  shape.animate(
+    endState,
+    duration,
+    easing,
+    () => {
+      shape.remove(true);
+    },
+    delay
+  );
+}
+
+// TODO: 待 G 4.0 修复，关联 issue https://github.com/antvis/g/issues/218
+export function clipIn(shape: IShape | IGroup, animateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
+  const clipCfg = getCoordinateClipCfg(coordinate); // 根据坐标系类型获取整体的剪切区域配置信息
+  const endState = clipCfg.endState;
+  // 为 shape 设置剪切区域
+  const clipShape = shape.setClip(clipCfg);
+
+  // 对剪切图形做动画
+  const { easing, duration, delay } = animateCfg;
+  clipShape.animate(
+    endState,
+    duration,
+    easing,
+    () => {
+      if (shape && !shape.get('destroyed')) {
+        shape.set('clipShape', null);
+      }
+    },
+    delay
+  );
+}
+
+// TODO: 待 G 4.0 修复，关联 issue https://github.com/antvis/g/issues/218
+export function pieChartEnter(shape: IShape | IGroup, animateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
+  const { endAngle } = getAngle(shapeModel, coordinate);
+  const coordinateStartAngle = coordinate.startAngle;
+  const center = coordinate.getCenter();
+  // @ts-ignore FIXME: coordinate 支持下
+  const radius = coordinate.getRadius();
+
+  const startPath = getSectorPath(center.x, center.y, radius, coordinateStartAngle, coordinateStartAngle);
+  const clipShape = shape.setClip({
+    type: 'path',
+    attrs: {
+      path: startPath,
+    },
+  });
+  const { easing, duration, delay } = animateCfg;
+  clipShape.animate(
+    (ratio) => {
+      const diff = (endAngle - coordinateStartAngle) * ratio + coordinateStartAngle;
+      const path = getSectorPath(center.x, center.y, radius, coordinateStartAngle, diff);
+      return {
+        path,
+      };
+    },
+    duration,
+    easing,
+    () => {
+      if (shape && !shape.get('destroyed')) {
+        shape.set('clipShape', null);
+      }
+    },
+    delay
+  );
+}
+
+export function pieChartUpdate(
+  shape: IShape | IGroup,
+  animateCfg,
+  coordinate: Coordinate,
+  shapeModel: ShapeDrawCFG,
+  toAttrs
+) {
+  const { startAngle: currentStartAngle, endAngle: currentEndAngle } = getAngle(shapeModel, coordinate);
+  const { startAngle: preStartAngle, endAngle: preEndAngle } = getAngle(shape.get('origin'), coordinate);
+  const center = coordinate.getCenter();
+  // @ts-ignore FIXME: coordinate 支持下
+  const radius = coordinate.getRadius();
+  const diffStartAngle = currentStartAngle - preStartAngle;
+  const diffEndAngle = currentEndAngle - preEndAngle;
+  shape.animate((ratio) => {
+    const onFrameStartAngle = preStartAngle + ratio * diffStartAngle;
+    const onFrameEndAngle = preEndAngle + ratio * diffEndAngle;
+    return {
+      ...toAttrs,
+      path: getSectorPath(center.x, center.y, radius, onFrameStartAngle, onFrameEndAngle),
+    };
+  }, animateCfg);
+}

src/geometry/animate/index.ts

@@ -0,0 +1,115 @@
+import * as _ from '@antv/util';
+import { AnimateCfg, Data, Datum, ShapeDrawCFG } from 'interface';
+import { Coordinate, IGroup, IShape } from '../../dependents';
+import * as Action from './action';
+
+// 默认动画配置
+const DEFAULT_ANIMATE_CFG = {
+  interval: {
+    enter(coordinate: Coordinate) {
+      let animation;
+      if (coordinate.isRect) {
+        animation = coordinate.isTransposed ? 'scaleInX' : 'scaleInY';
+      } else {
+        if (coordinate.isTransposed) {
+          // pie chart
+          animation = 'pieChartEnter';
+        }
+      }
+      return {
+        animation,
+        duration: 450,
+        easing: 'easeQuadOut',
+      };
+    },
+    update(coordinate: Coordinate) {
+      if (coordinate.type === 'theta') {
+        return {
+          animation: 'pieChartUpdate',
+          duration: 450,
+          easing: 'easeQuadInOut',
+        };
+      }
+
+      return {
+        duration: 450,
+        easing: 'easeQuadInOut',
+      };
+    },
+    leave: {
+      animation: 'fadeOut',
+      duration: 400,
+      easing: 'easeQuadIn',
+      callback: (shape: IShape | IGroup) => {
+        shape.remove(true);
+      },
+    },
+  },
+  // line: {
+  //   enter: {
+  //     animation: 'clipIn',
+  //     duration: 450,
+  //     easing: 'easeQuadOut',
+  //   },
+  //   update: {
+  //     duration: 450,
+  //     easing: 'easeQuadInOut',
+  //   },
+  //   leave: {
+  //     animation: 'fadeOut',
+  //     duration: 350,
+  //     easing: 'easeQuadIn',
+  //     callback: (shape: IShape | IGroup) => {
+  //       shape.remove(true);
+  //     },
+  //   },
+  // },
+};
+
+function getAnimateConfig(animateCfg: AnimateCfg, data: Data | Datum) {
+  return {
+    delay: _.isFunction(animateCfg.delay) ? animateCfg.delay(data) : animateCfg.delay,
+    easing: _.isFunction(animateCfg.easing) ? animateCfg.easing(data) : animateCfg.easing,
+    duration: _.isFunction(animateCfg.duration) ? animateCfg.duration(data) : animateCfg.duration,
+    callback: animateCfg.callback,
+  };
+}
+
+/**
+ * 获取默认的动画配置
+ * @param geometryType 几何标记类型
+ * @param animateType 动画类型
+ * @param coordinate 坐标系
+ * @returns default animate cfg
+ */
+export function getDefaultAnimateCfg(geometryType: string, animateType: string, coordinate: Coordinate): AnimateCfg {
+  const animateCfg = _.get(DEFAULT_ANIMATE_CFG, [geometryType, animateType], {});
+
+  if (_.isFunction(animateCfg)) {
+    return animateCfg(coordinate);
+  }
+
+  return animateCfg;
+}
+
+/**
+ * 工具函数根据用户传入的配置为 shape 执行动画
+ * @param shape 执行动画的图形元素
+ * @param cfg 图形配置
+ * @param [toAttrs] shape 最终状态的图形属性
+ */
+export function doAnimate(shape: IGroup | IShape, cfg: ShapeDrawCFG, coordinate: Coordinate, toAttrs?: object) {
+  const { animate, data, origin } = cfg;
+  const animation = animate.animation;
+  const animateCfg = getAnimateConfig(animate, data);
+  if (animation) {
+    // 用户声明了动画执行函数
+    const animateFunction = Action[animation];
+    if (animateFunction) {
+      animateFunction(shape, animateCfg, coordinate, origin, toAttrs);
+    }
+  } else {
+    // 没有声明，则根据 toAttrs 做差值动画
+    shape.animate(toAttrs, animateCfg);
+  }
+}