What are easing functions?

I found this cool website for game development and it has a list of easing functions:

Although the site contains a description of what they're for, it goes over my head. What are easing functions and what are they used for?

Update

I found a better example of the functions themselves from Phaser.io's source code. These functions are much simpler than the answers here would suggest. They only take one parameter, k. As part of the answer, I'd like to know how to use these.

• An important related term is tweening. See also this video youtube.com/watch?v=Fy0aCDmgnxg where you can see how enormous the effect of tweening and easing functions are! – Roy T. Apr 23 '14 at 21:12

Easing functions are used for interpolation, typically (but not necessarily) in animation / kinematic motion. Linear interpolation (lerp) is something you may have heard of. Let's say you lerp a smiley face from one corner of the screen to another (much as per your image). This means the smiley will move at a steady velocity from point A to point B. If you were to apply this to movement of a limb, it would look very robotic and unnatural -- the actuators / servos that robots use, perform this way. Obviously, human limbs move in a very different way. And most motion that you will see in nature will have interesting motion curves, rather than the steady, unchanging velocity seen in linear interpolation.

Enter easing. Easing motion means the velocity is not constant. What this achieves is to look more realistic. Watch people, watch different animals, watch plants bending in the wind, or even how falling rain changes direction on a gusty day. Watch the velocity of a ball as you throw it up in the air and in comes back down again. Watch the motion of a guitar string as you pluck it. Each of these types of motion has a different curve describing velocity.

I suggest you play with GreenSock's GSAP online to get a feel for what the different types of easing curves produce in terms of motion. It's one of those things where it takes time and practice to map a particular named curve to the sort of motion you imagine you want. But once you have grasped the basics, you'll have a lot of fun.

P.S. As I said, easing is not only used for animation. It may be used for sound panning, for effecting skeletal motion at the logical / model level, or anything else you can think of that might need specific smooth variation over time.

• btw Easing is the second slide in the GreenSock link. Use the dropdown menu on the slide to test out different easing functions. – jhocking Apr 23 '14 at 19:59

An easing function lets you interpolate values from one value to another over a given interval using something called an "easing function". These are functions that are designed to take a value and at any given point in the interval, output the value at a certain point in time.

This can be best explained by taking a look at a code snippet:

// simple linear tweening - no easing, no acceleration

Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
};


@t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time

@b is the beginning value of the property.

@c is the change between the beginning and destination value of the property.

@d is the total time of the tween.

This is the definition of a linear easing function. Graphing this over time in terms of 't' we get a mere linear graph.

Okay, cool. What can we use them, for?

Any time you have a start and finish in mind and want to animate them, you can use a "tween" or "easing function".

For example, here's a GIF I just took of Angry Birds:

Notice the menu sliding out to the point in the screen, but it stops slowly? This is due to an easing function that eases into place. You can see those all over the web. If this was a linear ease, it would be the same throughout.

Music?

Sure! If we take the value of our current soundtrack value and interpolate it between that and 0 over a total t of say, 1 second then our volume will slowly fade out over a period of one second.

Bounding Objects

There are also functions that allow for bouncing (see: http://easings.net/#easeOutBounce) which can produce effects like this on a sprite without any physics systems:

You can find more information on the web by searching for tweening.

• @tieTYT I've added an explanation for you. What kind of usage example are you looking for? – Vaughan Hilts Apr 23 '14 at 19:11
• See my update. If you can explain how to use the functions that only take k as a parameter, I'll accept this answer. Thanks – Daniel Kaplan Apr 24 '14 at 6:21
• These functions don't just take k. The beginning functions use these which are then passed down to more complicated ones. Are you just interested in phasers implementation? – Vaughan Hilts Apr 24 '14 at 7:03
• It looks like they all take k to me. Where are you seeing otherwise? – Daniel Kaplan Apr 24 '14 at 21:06
• All easing functions (except maybe 'shake' style tweens) require a minimum of three parameters. Time (usually a ratio between 0 and 1), a start value, and an end value. Sometimes the time is split into two parameters such as current time, and ease duration. If start and end values have already been defined (depending on your easing system / library), you may only need to pass the time, but I'm not familiar of any myself. For example, if I wanted the value between 10 and 30 at 75% of the way (3 seconds into a 4 second ease), I need to pass the 10 and 30, and also the 75% (time/dur). – Doug.McFarlane Apr 29 '14 at 20:35

Easing functions serve to change a value during a time period, from a starting number to an end number.

You use that value to animate a property of an object in your game, such as position, rotation, scale, changing colors and other properties that use a value.

The different easing functions determine the "feel" of the animation, or how the value changes over time.

On the website you posted, the graph shows the value changing over time from a start to an end, so it doesn't mean the object you are animating will follow the path of the ball in the graph.

• Oh, so now you changed your answer to reflect mine! Very good to see you are learning. – Engineer Apr 23 '14 at 18:30
• This answer seems more like a reference than a tutorial. I need examples to have a better understanding – Daniel Kaplan Apr 23 '14 at 18:48
• @NickWiggill no, I didn't even see your answer until now. – ino Apr 23 '14 at 20:54