fabric.js动画制作简单的落雪效果播放

老规矩先上代码

<template>
  <div class="animate">
    <el-button
      id="toggle"
      @keyup.space.native
      class="elBtn"
      :class="{ active: isFirst && autoPlay }"
      >▷</el-button
    >
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import { fabric } from "fabric";
export default {
  data() {
    return {
      // radius/left/top/opacity is belong to circle
      radius: [],
      left: [],
      top: [],
      opacity: [],
      // decide the tag of first pause
      isFirst: false,
      // autoPlay is the same statement with [playing]
      autoPlay: false,
    };
  },
  mounted() {
    let playing = false;
    let snowBallN = 100;
    let cir = [];

    this.radius = Array(snowBallN).fill("");
    this.left = Array(snowBallN).fill("");
    this.top = Array(snowBallN).fill("");
    this.opacity = Array(snowBallN).fill("");

    const windowSize = {
      width: "1000",
      height: "600",
    };

    // 产生静态 canvas
    const canvas = new fabric.StaticCanvas("canvas", {
      height: windowSize.height,
      width: windowSize.width,
    });

    //animate(设置动画属性，动画结束值,可选对象)
    //可选对象为动画详细信息，包括持续时间、回调、缓动等
    //在每个动画帧上调用canvas.renderAll才能够看到实际的动画，重新渲染

    // add snowBallN circle
    for (let i = 0; i < snowBallN; i++) {
      // cir Array is the gather of the single CIRCLE ANIMATION
      cir[i] = new fabric.Circle({
        radius: getRandomInt(0.1, 1),
        left: getRandomInt(0, windowSize.width),
        top: getRandomInt(0, windowSize.height),
        opacity: getRandomInt(0.1, 1),
        fill: "#fff",
      });
      // tag the last add cir[i]
      cir[i].lastAdd = i === snowBallN - 1;
      canvas.add(cir[i]);
      // set animate when it achieve the last circle
      playing && setAnimate(cir[i]);
    }
    console.log("Circle Array", cir);

    // pause button
    document.querySelector("#toggle").addEventListener("click", (e) => {
      const targetEl = e.target;
      this.isFirst = true;

      // When playing is true, it should save the statement.
      if (playing) {
        targetEl.innerHTML = "▷";

        for (let i = 0; i < snowBallN; i++) {
          this.radius[i] = canvas.getObjects()[i].radius;
          this.left[i] = canvas.getObjects()[i].left;
          this.top[i] = canvas.getObjects()[i].top;
          this.opacity[i] = canvas.getObjects()[i].opacity;
        }
        // EveryTime, this array and the next is same,
        // but the root of CANNOT SAVE is the simple CIRCLE.
        // Just load every circle into the big cir Array, it's done.
        // console.table("暂停Before Pause this.left", this.left.slice(0, 5));
        // console.table("Before Pause this.top", this.top.slice(0, 5));
      } else {
        // Else, it should load in the shape what'll move.
        targetEl.innerHTML = "▢";
        // console.log("this.left[0]", this.left[0]);
        // think about the initial suitation, it should be divided.
        // When radius/left/top/opacity array isn't null, it should reload in cir.
        if (this.left[0]) {
          for (let i = 0; i < snowBallN; i++) {
            cir[i].set("radius", this.radius[i]);
            // console.log("INNER DPACE", this.left[i]);
            cir[i].set("left", this.left[i]);
            cir[i].set("top", this.top[i]);
            cir[i].set("opacity", this.opacity[i]);
          }
        }
        //   console.table("开始Before Play this.left", this.left.slice(0, 5));
        //   console.table("Before Play this.top", this.top.slice(0, 5));
        // When it begin to play first, every circle need to set Animation.
        canvas.getObjects().forEach((key) => setAnimate(key));
      }
      this.autoPlay = !this.autoPlay;

      // Change statement model
      playing = !playing;
    });
    // get Random number
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 设定动画函数
    function setAnimate(circle) {
      // 变化半径
      circle.animate("radius", getRandomInt(0.1, 5), {
        duration: getRandomInt(1000, 5000),
      });
      // 变化透明度
      circle.animate("opacity", getRandomInt(0.1, 0.9), {
        duration: getRandomInt(1000, 5000),
      });
      // 变化坐标
      circle.animate("left", getRandomInt(0, windowSize.width), {
        easing: fabric.util.ease.easeInOutCubic,
        duration: getRandomInt(1000, 5000),
      });
      // 变化坐标
      circle.animate("top", getRandomInt(0, windowSize.height), {
        // onChange and onComplete is two statement about the animation
        // onChange decide the movement,
        // onComplete decide the end action when the animation ends.
        onChange: () => {
          if (circle.lastAdd) playing && canvas.renderAll();
        },
        onComplete: () => playing && setAnimate(circle),
        easing: fabric.util.ease.easeInOutCubic,
        duration: getRandomInt(1000, 5000),
      });
    }
  },
};
</script>
<style>
.animate {
  background-image: url(../assets/black.png);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
#toggle {
  position: absolute;
  z-index: 999;
  width: 200px;
  height: 200px;
  font-size: 100px;
}
.elBtn {
  opacity: 0.4;
}
.active {
  opacity: 0;
}
</style>

这个落雪效果是我仿照

Fabric.js 动画 - 略知三二一 (321332211.com)

这个网页的一百个圆随机动画制作的，加入了暂停与恢复播放的状态保存，优化了暂停播放按钮效果，在第一次通过鼠标点击播放后能够使用空格控制播放。

【注意点：每次animation动画暂停（onChange），如果不保存状态，就会从随机位置再次播放！←我设定的是这样的】

做的还是有点麻瓜，过程也有点不撞南墙不回头的意思，一直重复着一百个雪花的失败，脑袋都不清醒了，晚上睡觉前忽然想到要控制下数量，化繁为简，早上立马就发现问题所在了！总之，还是要淡定~

效果如图