Home >Web Front-end >JS Tutorial >How to set animation duration in text using FabricJS?

How to set animation duration in text using FabricJS?

WBOYforward: 2023-08-24 22:17:091179browse

如何使用 FabricJS 设置文本中的动画持续时间？

In this tutorial, we will learn how to set the duration of animated text using FabricJS. We can display text on the canvas by adding an instance of Fabric.Text. Not only does it allow us to move, scale and change the dimensions of text, but it also provides additional features such as text alignment, text decoration, line height, which are available through the properties textAlign, underline and lineHeight respectively. Similarly, we can also use the duration attribute to change the duration of animated text.

grammar

animate(property: String | Object, value: Number | Object, { duration: Number })

parameter

property - This property accepts a String or Object value, which determines which properties we want to animate.
value - This property accepts a numeric or object value that is used to determine the value of the animated property.

Option key

duration - This property accepts numbers. It can be used to change the duration of animation. The default value is 500 milliseconds.

Example 1

Use the default value of the duration attribute

Let's look at a code example to see how a text object looks when the animate method is used in conjunction with the default value of the uration property. In this example, the animation has a duration of 500 milliseconds.

<!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 skewY animation occurs 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 text object
      var text = new fabric.Text("ADD SAMPLE text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "#ccccff",
         stroke: "black",
         strokeWidth: 2,
         fontSize: 50,
      });

      // Using the animate method
      text.animate("skewY", "-=10", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 500,
      });
      
      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Example 2

Use animate method and pass duration option

In this example, we will see how to control the duration of the animation by using the animate property and the duration option. In this case, we mentioned that the duration is 2000 milliseconds, which is why the skewY animation occurs for 2000 milliseconds.

<!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 and passing the duration option</h2>
   <p>You can see that the skewY animation occurs for 2000ms</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("ADD SAMPLE text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "#ccccff",
         stroke: "black",
         strokeWidth: 2,
         fontSize: 50
      });

      // Using the animate method
      text.animate('skewY', '-=10', { onChange: canvas.renderAll.bind(canvas), duration: 2000 });

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

The above is the detailed content of How to set animation duration in text using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String Object Property 对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create an array with random values with the help of JavaScript?Next article：How to create an array with random values with the help of JavaScript?

See more