如何在 FabricJS 中设置线条动画的持续时间？

在本教程中，我们将学习如何在 FabricJS 中设置线条动画的持续时间。线条元素是 FabricJS 提供的基本元素之一，用于创建直线。由于线条元素在几何上是一维的，并且不包含内部，因此它们永远不会被填充。我们可以通过创建 `fabric.Line` 的实例，指定线条的 x 和 y 坐标并将其添加到画布上来创建线条对象。为了更改动画文本的持续时间，我们使用 `duration` 属性。

语法

animate(property: String | Object, value: Number | Object)

参数

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

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

选项键

  • duration − 此属性接受一个数字。它可以用来更改动画的持续时间。默认值为 500 毫秒。

使用duration属性的默认值

示例

让我们来看一个代码示例，看看当 `animate` 方法与 `duration` 属性的默认值一起使用时，我们的线条对象是什么样子。在这种情况下，左侧动画的持续时间为 500 毫秒。

<!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>Using default value of duration property</h2>
   <p>You can see that the left animation happens for 500ms</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Using the animate method
      line.animate("left", "+=100", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 500,
      });
      line.animate("angle", "90", {
         onChange: canvas.renderAll.bind(canvas),
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

使用duration属性的自定义值

示例

在这个例子中，我们将看到如何通过使用 `animate` 方法和 `duration` 属性来控制动画持续的时间。在这里，我们指定持续时间为 1000 毫秒，这意味着我们的左侧动画将持续 1 秒。

<!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>Using a custom value for duration property</h2>
   <p>You can see that the left animation happens for 1000ms</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Using the animate method
      line.animate("left", "+=100", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 1000,
      });
      line.animate("angle", "90", {
         onChange: canvas.renderAll.bind(canvas),
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

更新于：2022年10月25日

275 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告