Open In App

Fabric.js easeOutQuart() Method

Improve
Improve
Like Article
Like
Save
Share
Report

In animation and games, it can be seen that many objects are moving from one point to another linearly. But after using the easing function, the object’s way of progressing can take a different natural and interesting shape.

Easing functions is the rate of change of a parameter over time. It is the kind of equations that move slowly at the start and speed up and slow down at the end. These sets of equations are taken from Robert Penner’s book and webpage.

The easeOutQuart() method is used for quartic easing out.

Syntax:

easeOutQuart(t, b, c, d)

Parameters: This method accepts four-parameter as mentioned above and described below.

  • t: This parameter holds the specified time of starting of the animation. For example, if the value of t is 0, it means the animation is just started.
  • b: This parameter holds the specified starting position of the object on the x-axis. For example, if the value of b is 10, it means the starting position of the objects on the x-coordinate is 10.
  • c: This parameter holds the specified change in value for the object. For example, if the 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  seconds to perform this motion from 10 to 40.

Return Value: This method returns the eased position of the object, that is the position of the object at a particular time.

Example 1:

Javascript




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Initializing easeOutQuart() function
 function easeOutQuart (t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
 }
  
 // Calling the easeOutQuart() function over
 // the specified parameter values
 console.log(fabric.util.ease.easeOutQuart(1, 2, 3, 4)); 
 console.log(fabric.util.ease.easeOutQuart(1, 3, 5, 7)); 
 console.log(fabric.util.ease.easeOutQuart(2, 4, 6, 8)); 
</script>
  
</body>
  
</html>


Output:

4.05078125
5.30112453144523
8.1015625

Example 2:

Javascript




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Initializing easeOutQuart() function
 function easeOutQuart (t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
 }
   
 // Initializing the parameters with its values
 var t1 = 5;
 var b1 = 10;
 var c1 = 40;
 var d1 = 12;
 var t2 = 2;
 var b2 = 12;
 var c2 = 10;
 var d2 = 15;
  
 // Calling the easeOutQuart() function over
 // the specified parameter values
 console.log(fabric.util.ease.easeOutQuart(t1, b1, c1, d1)); 
 console.log(fabric.util.ease.easeOutQuart(t2, b2, c2, d2)); 
</script>
  
</body>
  
</html>


Output:

45.36844135802469
16.35832098765432


Last Updated : 29 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads