fabric.js动画简单的播放器

老规矩先上代码，

<template>
  <div class="animate">
    <canvas id="canvas" width="300" height="300"></canvas>
    <el-button id="toggle">▷</el-button>
  </div>
</template>

<script>
import { fabric } from "fabric";
export default {
  data() {
    return {
      tempModel: [{ left: 0 }, { top: 0 }, { opacity: 0 }],
    };
  },
  mounted() {
    let playing = false;
    var canvas = new fabric.Canvas("canvas", { backgroundColor: "#ddd" });
    var rect = new fabric.Rect({  100, height: 50, left: 100, top: 100 });

    //animate(设置动画属性，动画结束值,可选对象)
    //可选对象为动画详细信息，包括持续时间、回调、缓动等
    //在每个动画帧上调用canvas.renderAll才能够看到实际的动画，重新渲染
    rect.animate("angle", 360, {
      duration: 2000,
      onChange: () => playing && canvas.renderAll(),
      onComplete: () => playing && setAnimate(rect),
      easing: fabric.util.ease.easeInOutCubic,
    });

    canvas.add(rect);

    // 左上方按钮
    document.querySelector("#toggle").addEventListener("click", (e) => {
      const targetEl = e.target;
      // When playing is true, it should save the statement.
      if (playing) {
        targetEl.innerHTML = "▷";
        this.tempModel.left = canvas.getObjects()[0].left;
        this.tempModel.top = canvas.getObjects()[0].top;
        this.tempModel.opacity = canvas.getObjects()[0].opacity;
      } else {
          // Else, it should load in the shape what'll move.
        targetEl.innerHTML = "▢";
        // think about the initial suitation, it should be divided.
        if (this.tempModel.left) {
          rect.set("left", this.tempModel.left);
          rect.set("top", this.tempModel.top);
          rect.set("opacity", this.tempModel.opacity);
        }
        setAnimate(rect);
      }
    // Change statement model
      playing = !playing;
    });
    // 取得乱数
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 设定动画函数
    function setAnimate(rect) {
      //   rect.animate("angle", 360, {
      //     duration: getRandomInt(1000, 5000),
      //     // easing: fabric.util.ease.easeInOutCubic,
      //     onChange: () => {
      //       canvas.renderAll();
      //     },
      //     onComplete: () => setAnimate(rect),

      //     // onComplete: () => playing && setAnimate(rect),
      //   });

      // 变化透明度
      rect.animate("opacity", getRandomInt(0.2, 1), {
        duration: getRandomInt(1000, 5000),
      });
      // 变化座标
      rect.animate("left", getRandomInt(0, 300), {
        easing: fabric.util.ease.easeInOutCubic,
        duration: getRandomInt(1000, 5000),
      });
      // 变化座标
      rect.animate("top", getRandomInt(0, 300), {
        onChange: () => {
          playing && canvas.renderAll();
        },
        onComplete: () => playing && setAnimate(rect),
        easing: fabric.util.ease.easeInOutCubic,
        duration: getRandomInt(1000, 5000),
      });
    }
  },
};
</script>
<style>
</style>

效果图

第一个旋转动画不知道为什么没了，不过这个保存暂停时状态，即将运动之前取出状态再装入的思路挺好的。

参考网页Fabric.js 动画 - 略知三二一 (321332211.com)