Heim > Artikel > Web-Frontend > Wie kann ich die laufende Animation in Line mit FabricJS abbrechen?

Wie kann ich die laufende Animation in Line mit FabricJS abbrechen?

PHPznach vorne: 2023-09-07 17:05:02850Durchsuche

如何使用 FabricJS 取消 Line 中的运行动画？

In diesem Tutorial erfahren wir, wie man mit FabricJS eine laufende Animation in einer Linie abbricht. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um eine laufende Animation abzubrechen, verwenden wir die Methode dispose.

Syntax

 dispose()

Die Methode dispose wird nicht verwendet

Beispiel

Sehen wir uns ein Codebeispiel an, um zu verstehen, wann die Methode dispose verwendet wird. Hier erstellen wir eine einfache Animation, bei der ein Linienobjekt eine vollständige Drehung durchführt und sich in der Breite ausdehnt.

<!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>Without using dispose method</h2>
   <p>You can see the animation is happening properly</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([250, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Using the animate method
      line.animate("angle", "+=360", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 1700,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Verwenden Sie die Entsorgungsmethode

Beispiel

In diesem Beispiel verwenden wir die Methode

dispose, um die laufende Animation abzubrechen. alle Die laufende Animation der Linieninstanz wird daher abgebrochen.

<!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 dispose method</h2>
   <p>You can see that the animation no longer happens</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([250, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Using the animate method
      line.animate("angle", "+=360", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 1700,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using dispose method
      line.dispose()
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie kann ich die laufende Animation in Line mit FabricJS abbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Erstellen Sie serverlose Anwendungen mit JavaScript und AWS LambdaNächster Artikel：Erstellen Sie serverlose Anwendungen mit JavaScript und AWS Lambda

In Verbindung stehende Artikel

Mehr sehen