How to use the @antv/g.Shapes.Rect function in @antv/g

private _initialAnimation() {
    // clipIn动画
    const { start, end, width, height } = this.view.get('coord');
    const clipRect = new Shapes.Rect({
      attrs: {
        x: start.x,
        y: end.y,
        width: 0,
        height,
      },
    });
    this.container.attr('clip', clipRect);
    this.container.setSilent('animating', true);
    clipRect.animate(
      {
        width,
      },
      600,
      'easeQuadOut',
      () => {},

export function doGroupScaleIn(container, animateCfg, coord, zeroY, type) {
  const { start, end, width, height } = getCoordRange(coord);
  let x;
  let y;

  const clip = new Shapes.Rect({
    attrs: {
      x: start.x,
      y: end.y,
      width,
      height,
    },
  });

  if (type === 'y') {
    x = start.x + width / 2;
    y = zeroY.y < start.y ? zeroY.y : start.y;
  } else if (type === 'x') {
    x = zeroY.x > start.x ? zeroY.x : start.x;
    y = start.y + height / 2;
  } else if (type === 'xy') {
    if (coord.isPolar) {

const radius = coord.getRadius();
    clip = new Shapes.Fan({
      attrs: {
        x: center.x,
        y: center.y,
        rs: 0,
        re: radius + margin,
        startAngle,
        endAngle: startAngle,
      },
    });
    clip.endState = {
      endAngle,
    };
  } else {
    clip = new Shapes.Rect({
      attrs: {
        x: start.x - margin,
        y: end.y - margin,
        width: coord.isTransposed ? width + margin * 2 : 0,
        height: coord.isTransposed ? 0 : height + margin * 2,
      },
    });

    if (coord.isTransposed) {
      clip.endState = {
        height: height + margin * 2,
      };
    } else {
      clip.endState = {
        width: width + margin * 2,
      };