和网易云音乐一起，用canvas实现节奏动感波纹动画

前端

2023-09-26 01:57:01

律动波纹，点燃听觉盛宴

在网易云音乐的视听盛宴中，动感波纹动画无疑是一道亮丽的风景线。当音乐的节拍响起，波纹随着旋律律动，仿佛将听觉盛宴幻化成一场视觉狂欢。让我们也来一探究竟，学习如何使用 canvas 和 JavaScript 实现这一迷人动画。

参数设置，奠定动画基础

在开始动画之前，我们需要先设置好动画的基本参数。这些参数将决定动画的外观和行为。

canvas宽高 ：动画的画布大小，通常与容器的宽高一致。
波纹数量 ：决定了动画中同时出现的波纹数量。
波纹颜色 ：设置波纹的颜色，通常与音乐的主题或风格相匹配。
波纹大小 ：决定了波纹的初始大小。
波纹速度 ：决定了波纹扩散的速度。
波纹透明度 ：决定了波纹的透明度，通常随着波纹的扩散而逐渐降低。

构造函数，动画的灵魂

有了基本参数，我们就可以开始编写构造函数了。构造函数将初始化动画所需的变量，并设置动画的基本逻辑。

function WaveAnimation(canvas, options) {
  // 初始化基本变量
  this.canvas = canvas;
  this.ctx = canvas.getContext("2d");
  this.width = canvas.width;
  this.height = canvas.height;
  this.waves = [];

  // 初始化动画参数
  this.waveCount = options.waveCount || 10;
  this.waveColor = options.waveColor || "#000";
  this.waveSize = options.waveSize || 100;
  this.waveSpeed = options.waveSpeed || 0.5;
  this.waveAlpha = options.waveAlpha || 0.5;

  // 初始化波纹
  for (let i = 0; i < this.waveCount; i++) {
    this.waves.push({
      x: Math.random() * this.width,
      y: Math.random() * this.height,
      size: this.waveSize,
      alpha: this.waveAlpha,
    });
  }

  // 启动动画循环
  this.animate();
}

动画循环，点亮音乐节拍

动画循环是动画的核心，它将不断更新动画的状态，并重新绘制动画。

WaveAnimation.prototype.animate = function () {
  // 清除画布
  this.ctx.clearRect(0, 0, this.width, this.height);

  // 更新波纹状态
  for (let i = 0; i < this.waves.length; i++) {
    this.waves[i].size += this.waveSpeed;
    this.waves[i].alpha -= 0.01;

    // 当波纹大小超出画布或透明度降为0时，重新初始化波纹
    if (this.waves[i].size > this.width || this.waves[i].alpha <= 0) {
      this.waves[i].x = Math.random() * this.width;
      this.waves[i].y = Math.random() * this.height;
      this.waves[i].size = this.waveSize;
      this.waves[i].alpha = this.waveAlpha;
    }
  }

  // 绘制波纹
  for (let i = 0; i < this.waves.length; i++) {
    this.ctx.fillStyle = this.waveColor;
    this.ctx.globalAlpha = this.waves[i].alpha;
    this.ctx.beginPath();
    this.ctx.arc(this.waves[i].x, this.waves[i].y, this.waves[i].size, 0, Math.PI * 2);
    this.ctx.fill();
  }

  // 循环动画
  requestAnimationFrame(this.animate.bind(this));
};