Game Development Reference
In-Depth Information
7.1A
NIMATION
WITH
I
NTERPOLATION
C
URVES
To make dynamic, visually and functionally pleasing user interfaces, we want things to
move, fade, change colors, expand or contract; we want these things to appear to work in
ways we are familiar with, that feel natural. We can accomplish this by animating elements
of our user interfaces with a variety interpolation curves. This concept is often referred to
with a popularized, if desultory term tweening, ostensibly derived from “in-betweening”, as
inthegenerationofanintermediateframe“in-between”twoframestocreatetheappearance
of a smooth transition, between said frames.
The idea is to create a collection of mathematical curves from which you can select the one
that creates the most aesthetically pleasing result, whether you are fading in/out a menu,
bouncing text on the screen, creating animated particles, the list of use cases is endless.
These curves are often called easing functions and are generally described as ease-in, ease-
out or ease-in/out which refers to the behavior we might expect from the curve.
7.1.1 Ease Functions
There are three types of easing curves we will use, ease in, ease out and ease in/out. These
functions are applied over the curves. The functions we will use are designed to receive the
curve function as a template argument, this allows us to reuse the same behavior with a dif-
ferent curve without triplicating the same code for each of the ease types we will use.
Ease In
Ease inisthefirstandmoststraightforward case, itstarts slowandgradually speedsupover
the curve, the curve itself will drive the behavior.
template <double (*function)(double)>
double ease_in(double t)
{
return function(t);
}
Ease Out
Easeoutistheinversebehaviorofeasein,thecurvestartsoffslowandgraduallyspeedsup,
following the provided curve.
template <double (*function)(double)>
