Smooth Animator

Animation sequence from Michael Jackson’s MoonWalker video game.

According to Wikipedia,

Animation is the process of making the illusion of motion and the illusion of change by means of the rapid succession of sequential images that minimally differ from each other.

In simpler words, animation is the magic of making things move! We see animation everywhere, every day. When we think of animation we commonly think of cartoons, TV shows, advertisements and movies, but some of the animations you see most often you may not even consider.

What a snazzy logo animation!

The small (and sometimes humongous) mobile devices that many of us carry around daily are bursting with animation! Every movement, every visual cue, every slide, every bounce, and every rotation, are carefully designed animations. Because of the volume of animation required for basic functionality and aesthetic appeal for a mobile device application, designers and animators use many tools to help make your apps look great!


Let’s take a look at one of the concepts that make the animations on your mobile device look good and feel natural.

Easing

Easing is what makes animation feel “right.” Paul Lewis, a developer with Google, puts it in understandable terms when he says:

Nothing in nature moves linearly from one point to another. In reality, things tend to accelerate or decelerate as they move. Our brains are wired to expect this kind of motion, so when animating you should use this to your advantage.

While Paul’s explanation is great; there is nothing like a visual demonstration.

Here we have an animation without easing:

This animation uses no easing, but is easier to create. Interesting play on words there.

Here we have an animation with easing:

This gravity is a bit harsh for Earth…

See the difference? It isn’t a huge change, but the effect is very appealing to the eye. The subtle increase and decrease in speed as the ball bounces, the slight deformation of the ball as it squashes down on impact; these characteristics are similar to the properties detected by our eyes in the real world. Our brains like for certain things to make sense and motion is a big one.

To achieve these effects, animators use easing to do exactly what the name implies. The animated property “eases” into position using a mathematically defined curve to dictate the rate of change between any given points along the timeline of the animation. Math geeks will readily understand this concept of defining a path using mathematical functions, but for those of us who aren’t so great with geometry, calculus and numbers in general, there is a very visual way to understand this concept.

The following image is a collection of pictures that describe the rate of change (animation speed) over time for the different standard curve types:

Image courtesy of http://easings.net

These curves are called Bézier curves, after the mathematician who patented and popularized their use: Pierre Bézier. You can find working visual examples of each curve described above here. This is where things can get very… “math-y” and we will save the majority of that discussion for another post; but one of the great features of using these curves is the mathematical base. Because the curves are created using a function, there are infinite variations possible. This means animators and designers can tweak the curves until the motion is just right.

Congratulations! You now have a better understanding of the animation principles behind those loading screens on your phone! You can confidently point out what type of motion is used for each element animation as you swipe through! Use your new powers wisely.

Further Reading

The math behind the equations

A cool tool to play with Curve customization