让等待不再枯燥！Canvas绘制波浪球加载动画

2024-01-20 18:47:26

在网络飞速发展的今天，等待已经成为不可避免的一部分。从加载网页到下载文件，用户总是需要经历一段等待时间。虽然我们无法完全消除等待，但我们可以通过一些方法让它不再那么令人沮丧。

加载动画就是让等待变得更有趣的一种有效方式。其中，波浪球加载动画以其简单、美观和引人入胜而备受青睐。它由不断变化的波浪组成，形成一个旋转的球体，营造出一种动感和趣味性。

使用Canvas绘制波浪球加载动画并不难。Canvas是一个HTML5元素，允许您使用JavaScript直接在浏览器中绘制图形。下面，我们将逐步介绍如何使用Canvas创建自己的波浪球加载动画：

创建画布

首先，我们需要创建一个Canvas元素并获取其上下文。上下文对象允许我们与画布进行交互，绘制图形并控制动画。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

绘制波浪球

接下来，我们需要绘制波浪球。我们将使用JavaScript的requestAnimationFrame函数来创建动画，它会在每个浏览器刷新时调用给定的函数。在我们的函数中，我们将绘制一个由多个波浪组成的球体。

function drawWaveBall() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 波浪数量
  const numWaves = 5;

  // 波浪宽度
  const waveWidth = 10;

  // 波浪高度
  const waveHeight = 10;

  // 波浪间距
  const waveSpacing = 10;

  // 波浪旋转角度
  const rotationAngle = 0;

  for (let i = 0; i < numWaves; i++) {
    // 计算波浪中心点
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // 计算波浪相对于中心点的偏移量
    const offsetX = waveWidth * i + waveSpacing * i;
    const offsetY = waveHeight * i + waveSpacing * i;

    // 旋转画布
    ctx.translate(centerX, centerY);
    ctx.rotate(rotationAngle);
    ctx.translate(-centerX, -centerY);

    // 绘制波浪
    ctx.beginPath();
    ctx.moveTo(centerX + offsetX, centerY + offsetY);
    ctx.bezierCurveTo(centerX + offsetX + waveWidth, centerY + offsetY, centerX + offsetX + waveWidth, centerY + offsetY + waveHeight, centerX + offsetX, centerY + offsetY + waveHeight);
    ctx.bezierCurveTo(centerX + offsetX - waveWidth, centerY + offsetY + waveHeight, centerX + offsetX - waveWidth, centerY + offsetY, centerX + offsetX, centerY + offsetY);
    ctx.fillStyle = '#000';
    ctx.fill();

    // 复原画布
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }

  // 更新旋转角度
  rotationAngle += 0.05;

  // 循环动画
  requestAnimationFrame(drawWaveBall);
}