Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Fabric.js easeInBack() Method

  • Last Updated : 29 Jan, 2021

In gaming applications, there are many moving objects from point A to B in a linear fashion, but after applying an easing, it can make it look more natural. An easing function tells the animation about its progress. A straight motion can take an interesting shape.

Easing functions are the functions that control the speed of animation or specify the rate of change of a parameter over time to finally give some desired effect. The equations result in moving 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 webpage.

The easeInBack() method is used for backwards easing in.

Syntax:

easeInBack(t, b, c, d)

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

  • t: This parameter holds the specified time when the 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 the 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 the 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 i.e., the position of the object at a specific time.

Example 1:

Javascript




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

Output:

1.8075903125

Example 2:

Javascript




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
  // Initializing easeInBack() function
  function easeInBack (t, b, c, d) {
    if (s == undefined) s = 1.70158;
    return c * (t /= d) * t * ((s + 1) * t - s) + b;
  }
    
  // Initializing the parameters with its values
  var t = 5;
  var b = 10;
  var c = 40;
  var d = 12;
    
  // Calling the easeInBack() function over 
  // the specified parameter values
  console.log(fabric.util.ease.easeInBack(t, b, c, d));
</script>
  
</body>
  
</html>

Output:

6.000543981481481

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!