Maison > Article > interface Web > Comment annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment annuler une animation en cours d'exécution dans une ligne à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour annuler une animation en cours, nous utilisons la méthode dispose.
dispose()
Voyons un exemple de code pour comprendre quand la méthode dispose est utilisée. Ici, nous créons une animation simple dans laquelle un objet ligne effectue une rotation complète et s'agrandit en largeur.
<!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>
Dans cet exemple, nous utilisons la méthode dispose pour annuler l'animation en cours. tous L'animation en cours d'exécution de l'instance de ligne sera donc annulée.
<!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>
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!