fabricjs-动画效果animate

//canvas元素动画效果
  function animate() {
    try {
      canvas
        .item(0) 
        .animate("left", canvas.item(0).get("left") === 300 ? "100" : "300", {
          duration: 1000,
          onChange: canvas.renderAll.bind(canvas),
          onComplete: animate
        });
    } catch (error) {
      setTimeout(animate, 500);
    }
  }
  animate()

//图片动画效果
    function animate() {
        img.animate("opacity", img.get("opacity") === 0.7 ? 0.2 : 0.7, {
          duration: 1000,
          onChange: canvas.renderAll.bind(canvas),
          onComplete: animate
        })
      }
      animate()

canvas.item(0)的任意可变属性都可以做动画效果

改变宽度：

  function animate1() {
    try {
      canvas
        .item(0)
        .animate("width", canvas.item(0).get("width") == 50 ? "0" : "50", {
          duration: 1000,
          onChange: canvas.renderAll.bind(canvas),
          onComplete: animate1
        });
    } catch (error) {
      setTimeout(animate1, 500);
    }
  }
  animate1()

img同上

      function animate1() {
        img.animate("scaleY", img.get("scaleY") === 0.8 ? 0.2 : 0.8, {
          duration: 1000,
          onChange: canvas.renderAll.bind(canvas),
          onComplete: animate1
        })
      }
      animate1()