Easing functions in the animation process

Easing functions in the animation process

Complex animations are often difficult to make if there are no tools to help us. At some point we may want an object to realistically bounce or behave and this is pretty hard to acquire if there are not some algorithms that help us. For instance, if we have a 2D game character and we want to create a fight cycle for it, then some natural movements need to be considered. For a game character with a sword the hand movement cannot be a linear one because is not natural. The hand has a smaller speed in the first part of the movement and a higher speed in the second part of it.Easing functions or animation curves allow us to apply custom mathematical formulas to our animations in order to make them to look more natural.

An animation is actually a transition of an object from a start point to an end point in a predefined period of time.

This means that the properties of the animated object are changing in time. This could be changing linear or it could change more quickly at the beginning and slower towards the end (as per Figure 1).

Figure 1. Linear vs. Non-linear functions

What needs to be spotted is that the end result is the same in both cases. The object has the same final properties doesn’t matter how values are changing in time. So, the main difference between linear and non-linear cases is the speed at which properties are changing at different times. Easing functions represent best this speed variations. 

Without easing functions, animations will move in a mechanical way like in Figure 2. In order to make objects to move as in real life we need to consider applying easing functions to them. Let’s have a quick tour through easing functions and understand how we can use them in our animations.

Figure 2. Linear easing function applied to animation

For understanding the purpose of an easing function we first need to understand how the curve is drawn. This is the first step of mastering easing functions. Basically, we need to know the mathematical concepts behind it in order to properly apply it in our animations. Here you can find some interesting documentation about it.

Bézier Curves

The easing function is actually a mathematical function, called the Bézier curve. Bézier curves start from a predefined point and end in another point. What makes this curve special is the fact that there are some other intermediate points that control the curvature. This curves are highly used in many well known graphic design programs like Adobe Illustrator and Photoshop, the Gimp, Inkscape, etc. They are also used in graphic technologies like OpenType fonts (TTF/OTF) and Scalable Vector Graphics (SVG).

Bézier curves are the output of linear interpolation, which is a method of curve fitting using linear polynomials. Maybe the explanation sounds a little bit difficult, but is really easy. Dragging a line between two points is called linear interpolation. This is shown in Figure 3.

Figure 3. Linear interpolation for 3 points

Knowing what linear interpolation is, we can move on and understanding how a Bézier curve is developed by interpolating some points in a linear way. Actually a Bézier curve is a parametric curve that is used to draw a smooth line. Parametric curves don’t have a y coordinate in terms of an x coordinate, like normal functions do, but they instead link the values to a control point. Is good to know that a n degree curve is defined using n+1 control points on which translations are very easy to be applied.

Considering four points that we apply a linear interpolation on, we can build a Cubic Bézier curve. A cubic curve is defined by 4 control points: P(0,0), P(1,0), P(2,0) and P(3,0) . The Bézier curve is a parametric equation with the following formula, where t is a parameter having values between 0 and 1.

Figure 4. Cubic Bezier Curve equation

Figure 7 shows how the cubic  Bézier curve is developed step by step. You can deeper study the theoretical concept by reading these class notes or watch this video.

Figure 5. Linear interpolation leading to Cubic Bezier curve

If we want to obtain Bézier curves we can run through all values of t from 0 to 1 and then compute the weighted basis function. Or, we can use de Casteljau’s algorithm to draw curves. This is is a geometric approach to drawing curves.

>>

 Here are the steps of this well known algorithm:

1. t is considered a ratio; for t=0 is 0% along a line, t=1 is 100% along a line
2. Considering all control points for a curve, we need to consider all lines between them. As I spotted earlier for an n degree curve, we have to consider n-1 lines
3. t is considered a distance along each of these line. For instance, if t is 0.3, place the mark at 30% from the start, 70% from the end
4. Having the points, we can draw the n-1 lines between those points
5. Define the new points at distance t on the newly created line
6. Again form lines between those points
7. Repeat the above defined steps until you have only one line left
8. The point t on the final  line is the original curve point at t

>>

  Here is the pseudocode for this algorithm:

 function drawBezierCurve(points[], t):
        if(points.length==1):
              draw(points[0])
        else:
              computedPoints=array(points.size-1)
              for(i=0; i<computedPoints.length; i++):
                    computedPoints[i] = (1-t) * points[i] + t * points[i+1]
               drawBezierCurve(computedPoints, t)

Types of easing functions

You can find bellow different types of easing functions that are easily defined by controlling the those two blue bullets. You can compare between different curves in Marionette Studio software.

Ease In Cubic

Ease Out Cubic

Ease In Out Cubic

Ease In Sine

Ease Out Sine

Ease In Out Sine

Ease In Quint

Ease Out Quint

Ease In Out Quint

Ease In Quart

Ease Out Quart

Ease In Out Quart

Ease In Quad

Ease Out Quad

Ease In Out Quad

Ease In Expo

Ease Out Expo

Ease In Out Expo

Animating with Easing functions

Nothing around us moves linearly from one point to another. That’s why our brains expect natural motions while looking at some animations. In the animation process we need to consider speed variations if we want to create natural movements of our objects. So that, animations usually incorporate things that tend to accelerate or decelerate as they move.

Now let’s explain a little bit what ease means. The terms are taken from classic animation defining the way a motion starts and progresses over time. Here is a list that could help you better understand the terms we are using in 2D animation:

• Linear – the motion has the same speed over time
• Ease In – used as “slow in” term in classic animation; the motion starts slowly and accelerates over time
• Ease Out – used as “slow out” term in classic animation; the motion starts quickly and decelerates over time
• Ease In Out – the motion starts and ends slowly and has the biggest speed in the middle of the predefined animation timeframe

1 Setup easing functions

Easing functions are pretty easy to setup if the interface of the application you are using let’s you customize them. In most animation softwares easing functions can be setup by direct manipulation via some points that let you define the graphic you are looking for. Some other applications may let you define all the parameters of a Bézier curve, but that would be more difficult to you.

Once you know the general behavior of the easing functions you can easily identify how the curve would look like. Most of the animation apps come and help you with a set of predefined easing functions to choose from.

2 Choosing the right easing function

Using animation curves is not an easy task. Understanding the intuition of easing is a very interesting article that can help you better understand how easing functions are used. Choosing the right easing function could be hard if you don’t know some general animation principles.

Motion with swift acceleration and gentle deceleration feels natural and delightful. (codepen.io)

General advices to take in account:

• Use ease-out to move an object onto the stage
• Use ease-in to move an object off stage
• Use ease-in-out to move an object across the stage – from one point to another
• Smaller objects may accelerate or decelerate faster, because they are lighter and the force is smaller
• Larger objects may slower reach a high speed as they are heavy

3 Easing functions between keyframes

An animation cycle contains, like in traditional animation, a set of frames. Nowadays, these frames are not made one by one, but they are generated based on some keyframes. Keyframes are the most important frames that define the start and the end of an animation. The process of generating intermediate frames between keyframes is also known as tweening or interpolatingand the resulting sequence of frames is called a tween.

Easing functions are usually applied on keyframes, and based on that the tween is generated in a such manner that the speed variations respect the easing functions. In Marionette Studio animation software the easing function is applied on a keyframe and it takes effect until the next keyframe in the animation timeline.

4 Comparing easing functions

You can find below a selection of easing functions are applied for the same element. Note that the duration is the same for each of the following animations. The speed is given by the applied easing function. The effects are pretty cool.

Figure 6. Linear Easing function applied to animation

Figure 7. Ease In Sine easing function applied to animation

Figure 8. Ease In Quint easing function applied to animation

Figure 9. Ease In Out Quad easing function applied to animation

Figure 10. Ease In Out Expo easing function applied to animation

If you find this post useful please leave me a comment. I would like to know your opinion about it. Have a great day ahead!