Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add transition-in and transition-out animation to a Polyline using FabricJS?
We can create a Polyline object by creating an instance of fabric.Polyline. A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc.
In order to add transition-in and transition-out animation, we can use the left property in conjunction with animate method.
Syntax
animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array.<fabric.AnimationContext>
Parameters
property ? This property accepts a String or Object value which determines which properties we want to animate
value ? This property accepts a Number or Object value which determines the values to animate properties.
Options Keys
left ? This property accepts a Number that allows us to control the position of the object from the left side of the canvas.
Example 1: Adding transition-in animation to the polyline
Let?s see a code example to see how we can add transition-in animation by using the animate method along with the left property. In order to create a transition-in effect, we need to set the left from "-50" to "200". Since we have passed the duration property a value of 5000, this animation will last for 5 seconds.
<!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>Adding transition-in animation to the polyline</h2>
<p>You can see the transition-in effect has been added to the polyline</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 polyline object
var polyline = new fabric.Polyline(
[
{ x: 50, y: 0 },
{ x: 25, y: 43.30},
{ x: -25, y: 43.301 },
{ x: -50, y: 0},
{ x: -25, y: -43.301},
{ x: 25, y: -43.301 },
{ x: 50, y: 0 },
],
{
fill: "teal",
stroke: "orange",
strokeWidth: 5,
top: 50,
left: -50,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polyline);
// Using the animate method
polyline.animate("left", "200", {
onChange: canvas.renderAll.bind(canvas),
duration: 5000,
});
</script>
</body>
</html>
Example 2: Adding transition-out animation to the polyline
In this example, we will see how we can create the transition-out animation by using the animate method along with left property. In order to create the transition-out effect, we need to set the right from 300 to 1000. Since we have passed the duration property a value of 5000, this animation will last for 5 seconds.
<!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>Adding transition-out animation to the polyline</h2>
<p>You can see the transition-out effect has been added to the Polyline</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 polyline object
var polyline = new fabric.Polyline(
[
{ x: 50, y: 0 },
{ x: 25, y: 43.30},
{ x: -25, y: 43.301 },
{ x: -50, y: 0},
{ x: -25, y: -43.301},
{ x: 25, y: -43.301 },
{ x: 50, y: 0 },
],
{
fill: "teal",
stroke: "orange",
strokeWidth: 5,
top: 50,
left: 300,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polyline);
// Using the animate method
polyline.animate("left", "1000", {
onChange: canvas.renderAll.bind(canvas),
duration: 5000,
});
</script>
</body>
</html>
393 Views
