How to use the @antv/matrix-util.transform function in @antv/matrix-util

export function scaleInY(
  shape: IShape | IGroup,
  animateCfg: AnimateCfg,
  coordinate: Coordinate,
  shapeModel: ShapeDrawCFG
) {
  const box = shape.getBBox();
  const x = (box.minX + box.maxX) / 2;
  const points = shapeModel.points as Point[];
  // 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
  const y = points[0].y - points[1].y <= 0 ? box.maxY : box.minY;

  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 1, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 1, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );

// x 数值如果为负值，那么应该从右往左生长
  const x = points[0].y - points[1].y > 0 ? box.maxX : box.minX;
  const y = (box.minY + box.maxY) / 2;

  shape.applyToMatrix([x, y, 1]);

  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 0.01, 1],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 100, 1],
        ['t', x, y],
      ]),
    },
    animateCfg
  );
}

const x = (box.minX + box.maxX) / 2;
  const points = shapeModel.points as Point[];
  // 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
  const y = points[0].y - points[1].y <= 0 ? box.maxY : box.minY;

  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 1, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 1, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );
}

export function rotate(element: IGroup | IShape, rotateRadian: number) {
  const { x, y } = element.attr();
  const matrix = transform(element.getMatrix(), [
    ['t', -x, -y],
    ['r', rotateRadian],
    ['t', x, y],
  ]);
  element.setMatrix(matrix);
}

animateCfg: AnimateCfg,
  coordinate: Coordinate,
  shapeModel: ShapeDrawCFG
) {
  const { x, y } = coordinate.getCenter();
  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 0.01, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 100, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );
}

export function transformShape(shape: IShape | IGroup, vector: [number, number], direct: string): number[] {
  let scaledMatrix;

  const [x, y] = vector;
  shape.applyToMatrix([x, y, 1]);
  if (direct === 'x') {
    shape.setMatrix(
      transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 0.01, 1],
        ['t', x, y],
      ])
    );
    scaledMatrix = transform(shape.getMatrix(), [
      ['t', -x, -y],
      ['s', 100, 1],
      ['t', x, y],
    ]);
  } else if (direct === 'y') {
    shape.setMatrix(
      transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 1, 0.01],
        ['t', x, y],
      ])
    );
    scaledMatrix = transform(shape.getMatrix(), [
      ['t', -x, -y],
      ['s', 1, 100],
      ['t', x, y],

export function grow(shape: IShape | IGroup, animateCfg: AnimateCfg, coordinate: Coordinate, shapeModel: ShapeDrawCFG) {
  const bbox = shape.getBBox();
  const x = (bbox.minX + bbox.maxX) / 2;
  const y = (bbox.minY + bbox.maxY) / 2;
  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 0.01, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 100, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );

containerHeight,
        panelClip ? panelClip.getBBox() : panelRange,
        this.get('enterable')
      );
      x = position[0];
      y = position[1];
    }

    const markerItems = this.get('markerItems');
    if (!Util.isEmpty(markerItems)) {
      endx = markerItems[0].x;
      endy = markerItems[0].y;
    }

    const ulMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
    const mat = transform(ulMatrix, [['t', x, y]]);
    container.stopAnimate();
    container.animate(
      {
        matrix: mat,
      },
      this.get('animationDuration')
    );

    const crosshairGroup = this.get('crosshairGroup');
    if (crosshairGroup) {
      const items = this.get('items');
      crosshairGroup.setPosition(endx, endy, items);
    }
    super.setPosition(x, y);
  }

export function zoomIn(
  shape: IShape | IGroup,
  animateCfg: AnimateCfg,
  coordinate: Coordinate,
  shapeModel: ShapeDrawCFG
) {
  const { x, y } = coordinate.getCenter();
  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 0.01, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 100, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );

export function shrink(
  shape: IShape | IGroup,
  animateCfg: AnimateCfg,
  coordinate: Coordinate,
  shapeModel: ShapeDrawCFG
) {
  const bbox = shape.getBBox();
  const x = (bbox.minX + bbox.maxX) / 2;
  const y = (bbox.minY + bbox.maxY) / 2;
  shape.applyToMatrix([x, y, 1]);

  const { easing, duration, delay } = animateCfg;
  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 0.01, 0.01],
        ['t', x, y],
      ]),
    },
    duration,
    easing,
    () => {
      shape.remove(true);
    },
    delay
  );
}