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 those kinds 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 easeOutElastic() method is used for elastic easing out.
Syntax:
easeOutElastic(t, b, c, d)
Parameters: This method accepts four parameter 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
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS library --> <script src= </script> </head> <body> <script type="text/javascript"> // Initializing easeOutElastic() function function easeOutElastic (t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b; } // Calling the easeOutElastic() function over // the specified parameter values console.log(fabric.util.ease.easeOutElastic(1, 2, 3, 4)); </script> </body> </html> |
Output:
4.734834957055044
Example 2:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS library --> <script src= </script> </head> <body> <script type="text/javascript"> // Initializing easeOutElastic() function function easeOutElastic (t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b; } // Initializing the parameters with its values var t = 5; var b = 10; var c = 40; var d = 12; // Calling the easeOutElastic() function over // the specified parameter values console.log(fabric.util.ease.easeOutElastic(t, b, c, d)); </script> </body> </html> |
Output:
51.70617003103307
