Skip to content
Related Articles

Related Articles

Improve Article

Fabric.js easeInOutCirc() Method

  • Last Updated : 29 Jan, 2021
Geek Week

In games or animations, there are many moving objects which can move them from point A to B linearly, but after applying an easing, or easing function, it can make it look more natural. An easing function says an animation 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 easeInOutCirc() method is used for the effect of circular easing in and out the object it is used on.

Syntax:

easeInOutCirc(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:

HTML




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

Output:

2.200961894323342

Example 2:

HTML




<html>
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
<body>
<script type="text/javascript">
  
    // Initializing the parameters with its values
    var t = 5;
    var b = 10;
    var c = 40;
    var d = 12;
  
   // Calling the easeInOutCirc() function
   // over the specified parameter values
   console.log(
     fabric.util.ease.easeInOutCirc(t, b, c, d)
   ); 
</script>
</body>
</html>

Output:

18.94458403214867

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :