使用js实现樱花飞舞背景效果

之前参观别人的博客发现了一个很赞的樱花飞舞效果，于是便想着自己也来实现一下。

效果预览

思路

首先要实现这种复杂的动画效果，肯定是要用到 canvas 了

要研究一个复杂的动画效果，其实可以从动画静止的时候进行切入研究

比如要实现一个樱花飞舞背景效果，先假设背景是静止的，那么在这一刻背景就是由一些位置不同、旋转角度不同的樱花的图片组成的

那么我们要实现的第一步就是生成很多图片，然后随机生成他们的位置和旋转角度、透明度等属性，并画到 canvas 上

这样我们就实现了静态效果，接下来是不是只要不停的更改这些图片的位置、旋转角度等属性，每次更改后再画到 canvas 上，就实现我们需要的动画效果

实现流程

明确思路后我们不难得出以下流程

准备好 canvas 画布
准备好樱花图片
随机生成樱花图片的位置、旋转角度、透明度等属性
画出樱花图片到 canvas 上
不停的更改樱花图片的位置、旋转角度、透明度等属性
画出新的樱花图片到 canvas 上
重复步骤 5、6

代码实现

先准备好一个基本的 html 界面，界面引入一个 js 文件

你也可以直接在代码写在 script 标签里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>樱花飞舞</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-image: url(https://img.hoshinagi.top/blog/post/front/js/sakura/bg.avif);
        background-size: cover;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script src="./script.js"></script>
</html>

编写 js 文件，实现流程的第三步和第四步

// 获取canvas元素
const canvas = document.getElementById("canvas");

// 设置canvas画布的宽高为浏览器视口宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 使用2d的绘图方式
const ctx = canvas.getContext("2d");

// 定义花瓣的数量
const SAKURA_SUM = 100;
// 花瓣数组
const sakuraArray = [];

class Sakura {
  // 构造方法
  constructor() {
    // 随机生成花瓣的x, y坐标
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height * 2 - canvas.height;
    // 随机生成花瓣的宽高
    this.width = Math.random() * 15 + 15;
    this.height = Math.random() * 12 + 10;
    // 随机透明度
    this.opacity = Math.random() * 0.5 + 0.5;
    // 设置一个随机数，后面实现旋转角度效果时会用到
    this.rotate = Math.random();
    // 速度初始化
    this.xSpeed = Math.random() * 2 + 1;
    this.ySpeed = Math.random() + 1.5;
    this.rotateSpeed = Math.random() * 0.02;
  }

  // 绘制
  draw() {
    // 当花瓣超过canvas画布边界后，重新设置花瓣的坐标、速度、和转速
    if (this.x > canvas.width || this.y > canvas.height) {
      this.x = -sakuraImg.width; // 刚好藏住
      this.y = Math.random() * canvas.height * 2 - canvas.height;
      this.rotate = Math.random();
      this.rotateSpeed = Math.random() * 0.02;
      // 让速度在一定范围随机
      this.xSpeed = Math.random() * 2 + 0.5;
      this.ySpeed = Math.random() + 1;
    }
    // 设置整个canvas透明度基数，也就是绘制图片时的透明度
    ctx.globalAlpha = this.opacity;
    // 绘制图片
    ctx.drawImage(
      sakuraImg,
      this.x,
      this.y,
      this.width * (0.6 + Math.abs(Math.cos(this.rotate)) / 3),
      this.height * (0.8 + Math.abs(Math.sin(this.rotate)) / 5)
    );
  }
}

/**
 * 定义渲染方法
 */
function render() {
  // 清除画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 遍历花瓣数组，调用animate方法进行动画绘制
  sakuraArray.forEach((sakura) => sakura.draw());
  // 不断执行render函数进行绘制
  window.requestAnimationFrame(render);
}

// 加载花瓣图片
const sakuraImg = new Image();
sakuraImg.src =
  "https://img.hoshinagi.top/blog/post/front/js/sakura/sakura.png";
// 等花瓣图片加载完毕，将数目为SAKURA_SUM的花瓣实例保存到数组中
sakuraImg.addEventListener("load", () => {
  for (let i = 0; i < SAKURA_SUM; i++) {
    sakuraArray.push(new Sakura());
  }
  // 调用渲染函数
  render();
});

打开 html 界面，我们已经能看到界面上有很多樱花图片了

接下来编写樱花类的动画函数，来让樱花动起来

更新樱花类代码如下，添加一个 animate 函数

每次调用 animate 函数，花瓣的位置、速度、旋转角度等属性都会更新，并且再调用 draw 函数来将樱花画到 canvas 上从而实现动画效果

/**
 * 定义花瓣类
 */
class Sakura {
  // 构造方法
  constructor() {
    // 随机生成花瓣的x, y坐标
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height * 2 - canvas.height;
    // 随机生成花瓣的宽高
    this.width = Math.random() * 15 + 15;
    this.height = Math.random() * 12 + 10;
    // 随机透明度
    this.opacity = Math.random() * 0.5 + 0.5;
    // 设置一个随机数，后面实现旋转角度效果时会用到
    this.rotate = Math.random();
    // 速度初始化
    this.xSpeed = Math.random() * 2 + 1;
    this.ySpeed = Math.random() + 1.5;
    this.rotateSpeed = Math.random() * 0.02;
  }

  // 绘制
  draw() {
    // 当花瓣超过canvas画布边界后，重新设置花瓣的坐标、速度、和转速
    if (this.x > canvas.width || this.y > canvas.height) {
      this.x = -sakuraImg.width; // 刚好藏住
      this.y = Math.random() * canvas.height * 2 - canvas.height;
      this.rotate = Math.random();
      this.rotateSpeed = Math.random() * 0.02;
      // 让速度在一定范围随机
      this.xSpeed = Math.random() * 2 + 0.5;
      this.ySpeed = Math.random() + 1;
    }
    // 设置整个canvas透明度基数，也就是绘制图片时的透明度
    ctx.globalAlpha = this.opacity;
    // 绘制图片
    ctx.drawImage(
      sakuraImg,
      this.x,
      this.y,
      this.width * (0.6 + Math.abs(Math.cos(this.rotate)) / 3),
      this.height * (0.8 + Math.abs(Math.sin(this.rotate)) / 5)
    );
  }

  animate() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
    this.rotate += this.rotateSpeed;
    this.draw();
  }
}

最后我们还需要修改渲染函数，每次调用 render 函数，遍历花瓣数组，调用 animate 方法进行动画绘制而不是调用 draw 方法进行绘制

更新渲染函数如下

/**
 * 定义渲染方法
 */
function render() {
  // 清除画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 遍历花瓣数组，调用animate方法进行动画绘制
  sakuraArray.forEach((sakura) => sakura.animate());
  // 不断执行render函数进行绘制
  window.requestAnimationFrame(render);
}

这样我们的效果就已经实现了

总代码

这里选择将所有代码合并到一个 html 文件中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>樱花飞舞</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-image: url(https://img.hoshinagi.top/blog/post/front/js/sakura/bg.avif);
        background-size: cover;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    // 获取canvas元素
    const canvas = document.getElementById("canvas");

    // 设置canvas画布的宽高为浏览器视口宽高
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 使用2d的绘图方式
    const ctx = canvas.getContext("2d");

    // 定义花瓣的数量
    const SAKURA_SUM = 100;
    // 花瓣数组
    const sakuraArray = [];

    /**
     * 定义花瓣类
     */
    class Sakura {
      // 构造方法
      constructor() {
        // 随机生成花瓣的x, y坐标
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height * 2 - canvas.height;
        // 随机生成花瓣的宽高
        this.width = Math.random() * 15 + 15;
        this.height = Math.random() * 12 + 10;
        // 随机透明度
        this.opacity = Math.random() * 0.5 + 0.5;
        // 设置一个随机数，后面实现旋转角度效果时会用到
        this.rotate = Math.random();
        // 速度初始化
        this.xSpeed = Math.random() * 2 + 1;
        this.ySpeed = Math.random() + 1.5;
        this.rotateSpeed = Math.random() * 0.02;
      }

      // 绘制
      draw() {
        // 当花瓣超过canvas画布边界后，重新设置花瓣的坐标、速度、和转速
        if (this.x > canvas.width || this.y > canvas.height) {
          this.x = -sakuraImg.width; // 刚好藏住
          this.y = Math.random() * canvas.height * 2 - canvas.height;
          this.rotate = Math.random();
          this.rotateSpeed = Math.random() * 0.02;
          // 让速度在一定范围随机
          this.xSpeed = Math.random() * 2 + 0.5;
          this.ySpeed = Math.random() + 1;
        }
        // 设置绘制图片时的透明度
        ctx.globalAlpha = this.opacity;
        // 绘制图片
        ctx.drawImage(
          sakuraImg,
          this.x,
          this.y,
          this.width * (0.6 + Math.abs(Math.cos(this.rotate)) / 3),
          this.height * (0.8 + Math.abs(Math.sin(this.rotate)) / 5)
        );
      }

      animate() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
        this.rotate += this.rotateSpeed;
        this.draw();
      }
    }

    /**
     * 定义渲染方法
     */
    function render() {
      // 清除画布内容
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 遍历花瓣数组，调用animate方法进行动画绘制
      sakuraArray.forEach((sakura) => sakura.animate());
      // 不断执行render函数进行绘制
      window.requestAnimationFrame(render);
    }

    // 加载花瓣图片
    const sakuraImg = new Image();
    sakuraImg.src =
      "https://img.hoshinagi.top/blog/post/front/js/sakura/sakura.png";
    // 等花瓣图片加载完毕，将数目为SAKURA_SUM的花瓣实例保存到数组中
    sakuraImg.addEventListener("load", () => {
      for (let i = 0; i < SAKURA_SUM; i++) {
        sakuraArray.push(new Sakura());
      }
      render();
    });
    // 监听浏览器窗口大小变化，重新设置canvas的宽高
    window.addEventListener("resize", () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  </script>
</html>