Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Animationsdauer im Text ein?

Wie stelle ich mit FabricJS die Animationsdauer im Text ein?

WBOYnach vorne: 2023-08-24 22:17:091108Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Dauer von animiertem Text festlegen. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Ebenso können wir das Attribut „duration“ verwenden, um die Dauer von animiertem Text zu ändern.

Grammatik

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

Parameter

property – Diese Eigenschaft akzeptiert einen String- oder Object-Wert, der bestimmt, welche Eigenschaft wir animieren möchten.
Wert – Diese Eigenschaft akzeptiert einen Zahlen- oder Objektwert, der zur Bestimmung des Werts der animierten Eigenschaft verwendet wird.
Wahltaste

– Diese Eigenschaft akzeptiert
Zahlen. Damit kann die Dauer der Animation geändert werden. Der Standardwert beträgt 500 Millisekunden.
Beispiel 1

Standardwert der Dauereigenschaft verwenden

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Textobjekt aussieht, wenn die animate-Methode in Verbindung mit dem Standardwert der uration-Eigenschaft verwendet wird. In diesem Beispiel hat die Animation eine Dauer von 500 Millisekunden.

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

Beispiel 2

Verwenden Sie die Animationsmethode und die Option „Durchlaufdauer“

In diesem Beispiel sehen wir, wie man die Dauer einer Animation mithilfe der animate-Eigenschaft und der Daueroption steuert. In diesem Fall haben wir erwähnt, dass die Dauer 2000 Millisekunden beträgt, weshalb die SkewY-Animation 2000 Millisekunden dauert.

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

Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Animationsdauer im Text ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String Object Property 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich mit Hilfe von JavaScript ein Array mit Zufallswerten?Nächster Artikel：Wie erstelle ich mit Hilfe von JavaScript ein Array mit Zufallswerten?

In Verbindung stehende Artikel

Mehr sehen