如何使用 FabricJS 在文本中添加动画？

在本教程中，我们将学习如何使用 FabricJS 在文本中添加动画。我们可以通过添加 fabric.Text 的实例在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸，还提供其他功能，例如文本对齐、文本修饰、行高，这些功能可以通过 textAlign、underline 和 lineHeight 属性分别获得。同样，我们也可以使用 animate 方法对文本进行动画处理。

语法

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

参数

  • 属性 − 此属性接受字符串或对象值，用于确定我们要为其设置动画的属性。

  • 值 − 此属性接受数字或对象值，用于确定为属性设置动画的值

示例 1

文本对象的默认外观

让我们看一个代码示例，看看当不使用 animate 方法时我们的文本对象是什么样子。在这种情况下，不会显示任何动画。

<!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>Default appearance of the Text object</h2>
   <p>You can see that the text has no animation</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 text object
      var text = new fabric.Text("Sparse is better than dense!", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
      });

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

示例 2

使用 animate 方法

在这个例子中，我们将看到如何通过使用 animate 属性轻松创建我们自己的动画。第一个参数是我们想要设置动画的属性。例如，这里我们使用了 stroke 属性作为参数来更改其颜色。此属性还允许我们使用相对值，就像我们指定 left 值为 +=100 一样，这使得文本移动。

<!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 the animate method</h2>
   <p>You can see the animation now</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 text object
      var text = new fabric.Text("Sparse is better than dense!", {
         width: 700,
         left: 50,
         top: 70,
         fill: "#ccccff",
         stroke: "black",
         strokeWidth: 2,
         fontSize: 25
      });

      // Using the animate method
      text.animate('stroke', '87ceeb', {
         onChange: canvas.renderAll.bind(canvas)
      })
      
      text.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });

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

更新于： 2022年9月13日

712 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告