如何使用 FabricJS 为折线添加进入和退出动画？

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

为了添加进入和退出动画，我们可以结合使用`left`属性和`animate`方法。

语法

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

参数

  • property − 此属性接受字符串或对象值，用于确定要动画化的属性。

  • value − 此属性接受数字或对象值，用于确定要动画化的属性值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

选项键

  • left − 此属性接受一个数字，允许我们控制对象在画布左侧的位置。

示例 1：为折线添加进入动画

让我们来看一个代码示例，了解如何使用`animate`方法和`left`属性添加进入动画。为了创建进入效果，我们需要将`left`从“-50”设置为“200”。由于我们将`duration`属性的值设置为 5000，因此此动画将持续 5 秒。

Open Compiler
<!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`属性创建退出动画。为了创建退出效果，我们需要将`left`从 300 设置为 1000。由于我们将`duration`属性的值设置为 5000，因此此动画将持续 5 秒。

Open Compiler
<!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>

更新于：2023年2月16日

252 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告