Twitter Offers Tips On Smooth Animation For iPhoneBy: Zach Walton - February 22, 2012
Is your iPhone app plagued by slowdown when attempting to scroll down pages? Does the animation hit lag? Twitter could have potentially hit similar problems with their newest app update for iPhone, but avoided it with some simple tweaking.
Twitter’s engineering blog addressed the concern above in a blog post titled, “Simple Strategies for Smooth Animation on the iPhone.” The entry explains what causes slowdown in animation on the iPhone, how they avoided it and what others can do to make their apps run smoother on the device.
The post first explains how the iPhone handles animation. They say that animation on the iPhone is powered by Core animation layers. The GPU is not optimized to animate layers, so the CPU handles all the cell drawing. It then hands off the rest of it to the GPU as a texture to be displayed on your screen.
The problems with can come from two sources – either the GPU is being overloaded with too many operations or the CPU is not drawing the cell fast enough.
The team displays a simple short tweet as an example for how they fixed the problem of a GPU being overworked. Under normal circumstances, every element of the tweet from the avatar to the text would have to be drawn as separate cells by the CPU. The Twitter team fixed this problem by compiling all the text and the image into a single cell. This reduced the amount of work the CPU and GPU had to do.
Another way to reduce lag is to avoid blending. They point out that tweets on the iOS app have a “drop shadow on top of a subtle textured background.” They avoided the problem of blending by “reducing the area Core Animation has to consider non-opaque, by splitting the shadow areas from content area of the cell.”
They also suggest that developers check for pixel alignment. If the the width of the pixels is set an odd number, the program will set out to apply anti-aliasing to smooth out the edges. Anti-aliasing is one of the most expensive operations to operate on GPUs.
The team goes on to provide some code that will help solve an animation problem called a “pop” that occurs when a cell is about to scroll into view. They say that a cell only has 17 milliseconds “to provide content before you’ve dropped a frame.”
At the end, they point out that sometimes you just can’t apply any tricks to make animation go smoothly. The biggest problem comes from pictures in the “Discover” tab on Twitter for iOS. They succeeded in keeping smooth animation on these pictures by turning them into a pre-rendered image and storing them in a cache.
Hopefully these tips will help you to develop smoothly animated apps for the iPhone. I don’t know much about app development, but I know that a smooth framerate in video games keeps the player invested. I’m going to assume it’s the same in the app development world.