Comment définir la durée de l'animation dans le texte à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la durée de l'animation dans le texte à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 22:17:09

avant

1100 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment définir la durée du texte animé à l'aide de FabricJS. Nous pouvons afficher du texte sur le canevas en ajoutant une instance de Fabric.Text. Non seulement il nous permet de déplacer, redimensionner et modifier les dimensions du texte, mais il fournit également des fonctionnalités supplémentaires telles que l'alignement du texte, la décoration du texte, la hauteur de ligne, qui sont disponibles respectivement via les propriétés textAlign, underline et lineHeight. De même, nous pouvons également utiliser l'attribut durée pour modifier la durée du texte animé.

Grammaire

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

Copier après la connexion

Paramètres

property - Cette propriété accepte une valeur String ou Object, qui détermine la propriété que nous voulons animer.
value - Cette propriété accepte un number ou un objectvalue qui est utilisé pour déterminer la valeur de la propriété animée.
< /里>

Touche d'option

durée - Cette propriété accepte les numéros. Il peut être utilisé pour modifier la durée de l'animation. La valeur par défaut est de 500 millisecondes.

Exemple 1

Utiliser la valeur par défaut de la propriété de durée

Regardons un exemple de code pour voir à quoi ressemble un objet texte lorsque la méthode animate est utilisée en conjonction avec la valeur par défaut de la propriété uration. Dans cet exemple, l'animation a une durée de 500 millisecondes.

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

Copier après la connexion

Exemple 2

Utilisez la méthode d'animation et l'option de durée de réussite

Dans cet exemple, nous verrons comment contrôler la durée d'une animation en utilisant la propriété animate et l'option de durée. Dans ce cas, nous avons mentionné que la durée est de 2 000 millisecondes, c'est pourquoi l'animation asymétrique se produit pendant 2 000 millisecondes.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!