Home > Article > Web Front-end > How to cancel running animation in Line using FabricJS?
In this tutorial, we will learn how to cancel a running animation in a Line using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. To cancel a running animation, we use the dispose method.
dispose()
Let’s look at a code example to understand when dispose method. Here we create a simple animation where a line object completes a full rotation and expands in width.
<!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>
In this example, we use the dispose method to cancel the running animation. all The running animation of the line instance will therefore be cancelled.
<!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>
The above is the detailed content of How to cancel running animation in Line using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!