利用G渲染器实现的音频可视化方案

<audio
  controls
  onPlay="{play}"
  onPause="{pause}"
  ref="{audio}"
  src="{audioURL}"
  crossorigin="anonymous"
></audio>

['t', -x, -y],
['r', 旋转角度],
['t', x, y],

import { Canvas } from "@antv/g-canvas";
import { ext } from "@antv/matrix-util";

const { transform } = ext; // G提供的矩阵变换快捷方法

type ImageCircleConfig = {
  x: number;
  y: number;
  r: number;
  shadowColor?: string;
};
export function getImageCircle(
  canvas: Canvas,
  { x, y, r, shadowColor }: ImageCircleConfig
) {
  const shadowConfig = shadowColor
    ? {
        shadowColor,
        shadowBlur: 16,
      }
    : {};
  canvas.addShape("circle", {
    attrs: {
      x,
      y,
      r,
      fill: "#262626",
      ...shadowConfig,
    },
  });
  const shape = canvas.addShape("image", {
    attrs: {
      x: x - r,
      y: y - r,
      width: 2 * r,
      height: 2 * r,
      img: `https://source.unsplash.com/random/${2 * r}x${2 * r}?Nature`,
    },
  });
  shape.setClip({
    type: "circle",
    attrs: {
      x,
      y,
      r,
    },
  });
  // 旋转动画
  const matrix = shape.getMatrix();
  const radian = 2 * Math.PI; // 旋转360度
  shape.animate(
    (ratio: number) => {
      return {
        matrix: transform(matrix, [
          ["t", -x, -y],
          ["r", radian * ratio],
          ["t", x, y],
        ]),
      };
    },
    {
      duration: 10000,
      repeat: true,
    }
  );
  // 创建后先暂停动画，等待播放后再恢复
  setTimeout(() => {
    shape.pauseAnimate();
  });
  return shape;
}

// POINT_NUM = 64 柱状条数
sArr.current = Array.from({ length: POINT_NUM }, (item, index: number) => {
  const deg = index * (360 / POINT_NUM) - 150; // 当前角度
  const l = Math.cos((deg * Math.PI) / 180); // x方向偏移系数
  const t = Math.sin((deg * Math.PI) / 180); // y方向偏移系数
  const r = R + OFFSET;
  return (canvas.current as Canvas)
    .addShape("rect", {
      attrs: {
        width: RECT_WIDTH,
        height: RECT_WIDTH,
        radius: RECT_WIDTH / 2,
        x: X + l * r - RECT_WIDTH / 2,
        y: Y + t * r - RECT_WIDTH / 2,
        fill: RECT_COLOR,
      },
    })
    .rotateAtPoint(X + l * r, Y + t * r, ((deg - 90) * Math.PI) / 180);
});

export function getCirclePath(cx: number, cy: number, r: number) {
  return `M ${cx - r}, ${cy}
  a ${r}, ${r} 0 1, 0 ${r * 2}, 0
  a ${r}, ${r} 0 1, 0 ${-r * 2}, 0`;
}

Array.from({ length: CIRCLE_NUM }, (item, index) => {
  circleArrStart.current.push(false);
  // circle大圆
  circleArr.current.push(addCircle());
  circleArr.current[index].animate((ratio: number) => {
    return {
      r: R + ratio * CIRCLE_SCALE_OFFSET,
      // path: getCirclePath(X, Y, R + ratio * 80),
      opacity: ratio > 0.02 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0,
    };
  }, animateOption);
  // circle-dot大圆上的点
  circleDotArr.current.push(addCircleDot());
  circleDotDegArr.current.push(0);
  circleDotArr.current[index].animate((ratio: number) => {
    if (props.data && ratio < 0.05 && !circleDotDegArr.current[index]) {
      circleDotDegArr.current[index] = pickStartPoint();
    } else if (ratio > 0.9) {
      circleDotDegArr.current[index] = 0;
    }
    const deg = circleDotDegArr.current[index] + ratio * 360 - 180;
    const l = Math.cos((deg * Math.PI) / 180);
    const t = Math.sin((deg * Math.PI) / 180);
    const r = R + ratio * CIRCLE_SCALE_OFFSET;
    return {
      x: X + l * r,
      y: Y + t * r,
      r: DOT_R * (1 - ratio / 2),
      opacity: ratio > 0.05 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0,
    };
  }, animateOption);
});

// POINT_NUM = 64 样点数
// PARTICLE_NUM = 12 样点周围粒子数
Array.from({ length: POINT_NUM }, (point, index1) => {
  Array.from({ length: PARTICLE_NUM }, (particle, index2) => {
    const deg = index1 * (360 / POINT_NUM) - 150 + (Math.random() - 0.5) * 10;
    const l = Math.cos((deg * Math.PI) / 180);
    const t = Math.sin((deg * Math.PI) / 180);
    const r = R + OFFSET;
    const x = X + l * r;
    const y = Y + t * r;
    const particleShape = (canvas.current as Canvas).addShape("circle", {
      attrs: {
        x,
        y,
        r: 0.8,
        fill: "#fff",
        opacity: 0,
        // ⚠开启阴影会掉帧
        // shadowColor: '#fcc8d9',
        // shadowBlur: 1
      },
    });
    particleShape.animate(
      (ratio: number) => {
        const deg = index1 * (360 / POINT_NUM) - 150 + Math.sin(ratio * 20) * 4;
        const l = Math.cos((deg * Math.PI) / 180);
        const t = Math.sin((deg * Math.PI) / 180);
        const _index = POINT_NUM * index1 + index2;
        if (particleActiveArr.current[_index]) {
          if (ratio < 0.02) {
            particleActiveArr.current[_index] =
              index1 >= currentActiveIndex.current - 1 &&
              index1 <= currentActiveIndex.current + 1
                ? POINT_ACTIVE_MOVE_LENGTH
                : POINT_MOVE_LENGTH;
          } else if (ratio > 0.98) {
            particleActiveArr.current[_index] = POINT_MOVE_LENGTH;
          }
        }
        const offset = particleActiveArr.current[_index] || POINT_MOVE_LENGTH;
        return {
          x: x + l * ratio * offset,
          y: y + t * ratio * offset,
          opacity: 1 - ratio,
        };
      },
      {
        duration: POINT_CREATE_DELAY,
        repeat: true,
        easing: "easeSinInOut",
      }
    );
    particleArr.current.push(particleShape);
    particleStartArr.current.push(false);
    particleActiveArr.current.push(POINT_MOVE_LENGTH);
  });
});