Fabric.js easeInOutCubic() Method - GeeksforGeeks

29 Jan, 2021
In games or animations, there are many moving objects which can move them from point A to B in a linear fashion, but after applying an easing, or easing function, it can make it look more natural. An easing function says an animation of how to progress. In this way, a straight motion can take an interesting shape.
Easing functions specify the rate of change of a parameter over time. It is whose equations which make something move slowly at the start and speed up, or slow down near the end. The most common set of easing equations come from Robert Penner’s book and webpage.
The easeInOutCubic() method is used for cubic easing in and out.
Syntax:
easeInOutCubic(t, b, c, d)
Parameters: This method accepts four parameters as mentioned above and described below:
t: This parameter holds the specified time when animation will start. For example, if value of t is 0, it means animation is just started.
b: This parameter holds the specified starting position of the object on x-axis. For example, if value of b is 10, it means the starting position of the objects on x-coordinate is 10.
c: This parameter holds the specified change in value for the object. For example, if value of c is 30, it means, the object has to move 30 to the right, ending at 40.
d: This parameter holds the specified duration of the whole process. For example, if the value of d is 2, it means, the object has 2 second to perform this motion from 10 to 40.
Return Value: This method returns the eased position of the object i.e., the position of the object at a specific time.
Example 1:
Javascript
<!DOCTYPE html><html>  <head>  <!-- Adding the FabricJS library -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">  </script></head>  <body><script type="text/javascript">   // Initializing easeInOutCubic() function function easeInOutCubic (t, b, c, d) {    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;    return c / 2 * ((t -= 2) * t * t + 2) + b; }   // Calling the easeInOutCubic() function over // the specified parameter values console.log(fabric.util.ease.easeInOutCubic(1, 2, 3, 4)); </script>  </body>  </html>
Output:
2.1875
Example 2:
Javascript
<!DOCTYPE html><html>  <head>  <!-- Adding the FabricJS library -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">  </script></head>  <body><script type="text/javascript">   // Initializing easeInOutCubic() function function easeInOutCubic (t, b, c, d) {    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;    return c / 2 * ((t -= 2) * t * t + 2) + b; }    // Initializing the parameters with its values var t = 5; var b = 10; var c = 40; var d = 12;   // Calling the easeInOutCubic() function over // the specified parameter values console.log(fabric.util.ease.easeInOutCubic(t, b, c, d)); </script>  </body>  </html>
Output:
21.574074074074076
Fabric.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?