FabricJS 如何为Polyline添加过渡进和过渡出的动画

我们可以通过创建一个 fabric.Polyline 的实例来创建一个Polyline对象。一个折线对象可以由一组连接的直线段来描述。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。

为了添加过渡进和过渡出的动画，我们可以使用左侧属性与 animate 方法相结合。

语法

animate(property: String | Object, value: Number | Object):
fabric.Object | fabric.AnimationContext | Array.<fabric.AnimationContext>

参数

property – 这个属性接受一个字符串或对象的值，它决定了我们要将哪些属性变成动画。
value – 这个属性接受一个数字或对象值，它决定了动画属性的值。

选项键

left – 这个属性接受一个数字，允许我们控制对象在画布左边的位置。

例子1：给多段线添加过渡动画

让我们看一个代码例子，看看我们如何通过使用 animate 方法和 left 属性来添加过渡动画。为了创建一个过渡效果，我们需要将left从”-50 “设置到 “200”。由于我们传递给持续时间属性的值是5000，这个动画将持续5秒。

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Adding transition-in animation to the polyline</h2>
   <p>You can see the transition-in effect has been added to the polyline</p>
   <canvas id="canvas"></canvas>
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a polyline object
      var polyline = new fabric.Polyline(
         [
            { x: 50, y: 0 },
            { x: 25, y: 43.30},
            { x: -25, y: 43.301 },
            { x: -50, y: 0},
            { x: -25, y: -43.301},
            { x: 25, y: -43.301 },
            { x: 50, y: 0 },

         ],
         {
            fill: "teal",
            stroke: "orange",
            strokeWidth: 5,
            top: 50,
            left: -50,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );

      // Adding it to the canvas
      canvas.add(polyline);

      // Using the animate method
      polyline.animate("left", "200", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 5000, 
      });
   </script>
</body>
</html>

例2：为多段线添加过渡输出动画

在这个例子中，我们将看到如何通过使用animate方法和 left 属性来创建过渡输出动画。为了创建过渡输出的效果，我们需要将右键从300设置为1000。由于我们把持续时间属性的值定为5000，这个动画将持续5秒。

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Adding transition-out animation to the polyline</h2>
   <p>You can see the transition-out effect has been added to the Polyline</p>
   <canvas id="canvas"></canvas>
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a polyline object
      var polyline = new fabric.Polyline(
         [
            { x: 50, y: 0 },
            { x: 25, y: 43.30},
            { x: -25, y: 43.301 },
            { x: -50, y: 0},
            { x: -25, y: -43.301},
            { x: 25, y: -43.301 },
            { x: 50, y: 0 },

         ],
         { 
            fill: "teal",
            stroke: "orange",
            strokeWidth: 5,
            top: 50,
            left: 300,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );

      // Adding it to the canvas
      canvas.add(polyline);

      // Using the animate method
      polyline.animate("left", "1000", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 5000,
      });
   </script>
</body>
</html>