Marionette StudioMarionette StudioMarionette StudioMarionette Studio
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING
Easing functions in the animation process

Easing functions in the animation process

By Raluca | Uncategorized | 3 comments | 6 July, 2016 | 9

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).

 

Linear vs. Non-linear functions

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.

 

Linear easing function

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.

 

Linear interpolation for 3 points

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.

 

Cubic Bezier Curve equation

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.

 

Linear interpolation leading to Cubic Bezier curve

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.

easeInCubic easing function

Ease In Cubic

easeOutCubic easing function

Ease Out Cubic

easeInOutCubic easing function

Ease In Out Cubic

easeInSine easing function

Ease In Sine

easeOutSine easing function

Ease Out Sine

easeInOutSine easing function

Ease In Out Sine

easeInQuint easing function

Ease In Quint

easeOutQuint easing function

Ease Out Quint

easeInOutQuint easing function

Ease In Out Quint

easeInQuart easing function

Ease In Quart

easeOutQuart easing function

Ease Out Quart

easeInOutQuart easing function

Ease In Out Quart

easeInQuad easing function

Ease In Quad

easeOutQuad easing function

Ease Out Quad

easeInOutQuad easing function

Ease In Out Quad

easeInExpo easing function

Ease In Expo

easeOutExpo easing function

Ease Out Expo

easeInOutExpo easing function

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 interpolating and 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.

Linear easing function

Figure 6. Linear Easing function applied to animation

 

Ease In Sine easing function applied to animation

Figure 7. Ease In Sine easing function applied to animation

 

Ease In Quint easing function

Figure 8. Ease In Quint easing function applied to animation

 

Ease In Out Quad easing function

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

 

Ease In Out Expo easing function

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!

No tags.
Raluca

Raluca

More posts by Raluca

Related Post

  • 3 essential tools to create an animation in 3 minutes

    3 Essentials Tools to create a successful animation in 3 minutes

    By Raluca | 6 comments
    Whenever you are part of marketing, media, advertising, entertainment, gaming or any other industry that requires expressing a message, animated content has become essential in grabbing people's attention. Giving you an answer on how toRead more

  • skyppy-fox-running-and-falling-animated-video

    Engage your audience with animated videos

    By Sorin | 1 comment
    The best way of expressing your message in the digital world is through animated videos. Animation gives you the freedom to target your audience in a compelling, powerful and exciting way! You can express yourRead more

  • The Marionettes - 2D characters - Marionette Studio

    Meet The Marionettes !

    By Raluca | 0 comment

      We would proudly  like to introduce our newest characters, The Marionettes family. Having the touch of the retro style, our animated family will kick off the animation templates that will be introduced very soon inRead more

  • onion skinning Marionette Studio animation software

    Animate easier using Onion Skinning

    By Sorin | 0 comment
    Onion skinning (known also as 'Ghosting') is a technique used in creating animated cartoons and editing movies to see multiple frames at once. In this way, the animator or editor can make decisions on how to create orRead more

  • walk cycle animation tutorial - pass pose

    How to animate a Walk Cycle

    By Sorin | 0 comment
     Regardless of whether you are a non-experienced, a beginner or an professional animator, a walk cycle is something that every person needs to know. This type of motion is so natural as we, as humans, unconscious experience itRead more

  • opacity function for 2d animation

    Quick 2D animation demo using image opacity

    By Raluca | 2 comments
    In this tutorial will present you a quick 2D animation demo of how to make a 2D animation using the opacity feature in Marionette Studio animation software. What is image opacity? First of all, IRead more

  • skeleton view

    Animating with Marionette Studio

    By Raluca | 21 comments

    In this tutorial we will focus on the animating part and you will learn how to bring your rigged character to life with Marionette Studio. Firstly, we will take a look at animation timeline toRead more

3 comments

  • CommaWht Reply July 7, 2016 at 1:25 pm

    Awesome way to present the animation curves concept. Lots a info in a short concise way. Thanks!

    • Raluca
      Raluca Reply July 7, 2016 at 8:56 pm

      Thank you for reading it! More to come in the feature!

  • Ali Reply April 27, 2018 at 9:24 pm

    Hi, amazing content. I was looking for an easy algorithm explanation of this particular problem for a 2D library I’m working. I’would add 2 more things to the info.
    1: That the ‘y’ is the factor to use as acceleration factor.
    2: That the easing curve arre formed with 4 points (0,0) and (1,1). And the other 2 points are for the easing interpolation.

    (Hope I’m not wrong)

Leave a Comment

Cancel reply

Your email address will not be published. Required fields are marked *


Related Posts

  • What is cel animation?
    5 March, 2020
    0

    What is Cel Animation?

  • Halloween decor - the witch house - emojer
    26 October, 2018
    0

    3 Best Halloween decors for your stories

  • screen2-v2
    17 July, 2018
    0

    Announcing Emojer – Animated emoji with just one photo

  • skyppy-fox-running-and-falling-animated-video
    26 February, 2018
    1

    Engage your audience with animated videos

Categories

2D Animation 2D animation for games 2016 Trends Advertising Agile Game Development Algorithms Animation Animation for Dummies Animation techniques Animation tips Animation Tools for Marketers Characters Create character Creative work Design Digital Art Digital Design Features Finding FUN in games Freebies Game Development Team Game Planning Game Release Planning How To Indie Games Inktober Marionette Studio Marionette Studio Updates Marketing Project Management for Games Rigging Skeletal animation Sketches The Marionettes Theoretical Concepts and Observables Tutorial Uncategorized

Latest activity

  • Linwood on Animating with Marionette Studio
  • Raluca on 3 Essentials Tools to create a successful animation in 3 minutes
  • jameel on 3 Essentials Tools to create a successful animation in 3 minutes
  • Animation Training surat on Top 5 blogs to learn animation from
  • Ravali Reddy on Engage your audience with animated videos

MARIONETTE STUDIO

+1.408.769.5590
support@marionettestudio.com
3739 Balboa St # 1221
San Francisco, California, USA
94121

2D ANIMATION

Features
Pricing
Request a Demo
Contact Us
Software Change Log
Education Partner Program

LEARNING & DOCS

Showcase
Tutorials
User guide
Blog
Videos

FOLLOW US

Get the latest news & updates!
© 2018 Marionette Studio, Inc. Terms and Conditions | Privacy Policy | Cookies Policy
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING
Marionette Studio
By using this site, you agree to Marionette Studio's use of cookies to improve your experience. Learn more on our Cookie Information page. Accept Read More