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 depict 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. Refer to Robert Penner’s book and webpage for easing functions.
easeInCubic() method This method is used for cubic easing in. The curve of this function starts slowly and ends quickly,
Syntax:
easeInCubic(t, b, c, d)
Parameters: This method accepts four-parameter as mentioned above and described below:
- t: This parameter holds the specified time when the animation will start. 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 i.e., the position of the object at a specific time.
Example 1:
<!DOCTYPE html> <html>
<head>
<!-- Adding the FabricJS library -->
<script src=
</script>
</head>
<body>
<script type="text/javascript">
// Initializing easeInCubic() function
function easeInCubic (t, b, c, d) {
return c * (t /= d) * t * t + b;
} // Calling the easeInCubic() function over
// the specified parameter values
console.log(fabric.util.ease.easeInCubic(1, 2, 3, 4));
</script>
</body>
</html>
|
Output:
2.046875
Example 2:
<!DOCTYPE html> <html>
<head>
<!-- Adding the FabricJS library -->
<script src=
</script>
</head>
<body>
<script type="text/javascript">
// Initializing easeInCubic() function
function easeInCubic (t, b, c, d) {
return c * (t /= d) * t * t + b;
}
// Initializing the parameters with its values
var t = 5;
var b = 10;
var c = 40;
var d = 12;
// Calling the easeInCubic() function over
// the specified parameter values
console.log(fabric.util.ease.easeInCubic(t, b, c, d));
</script>
</body>
</html>
|
Output:
12.893518518518519