Make Your Animations Less Ch-Ch-Choppy
This article is Part One of a 2-part series. In Part One, I look at some
of the problems contributing to choppy animations. In Part Two, Smooth
Moves, I look at some of the possible solutions and offer a demo application
for trying out some of the results.
I was working on some animation code the other day and ran into some artifacts
that made the animation look choppy. In this particular example, there were
both fading and moving/scaling animations. The fade looked great, but the
animation with movement looked stuttery. This was particularly odd since the
fade happened over the entire screen, whereas the scrolling animation occupied
only a small portion of the screen.
It seemed obvious that the fading animation must be quicker than the other one
and that we were hitting some performance bottleneck on the other animation.
I inserted some simple timing code in both animation loops to verify this easy
assumption. Strangely, I found that the fade was happening at a rate of about
10 frames per second (fps); not very fast, considering that minimal frame rates
for animation are usually considered to be 30 fps, although 60 fps is a more
usual minimal for highly interactive content such as games. Stranger still, I
found that the other animation was getting about 15-20 fps; faster than the
visually smoother fading animation.
So here was the quandary; why did the large fading animation with a lower frame
rate actually look better than the small scrolling animation with the higher
frame rate? It just didn