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 < 时 Line 对象的动画如何工作不使用 /i> 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
