Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
175 Views
To Continue Learning Please Login