RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Creating High-Performance Animated Controls

Controls with subtle animated effects can spice up a WinForms UI, but they can also significantly degrade application performance. By caching the rendered states of your controls, you can dramatically reduce the performance penalty.


learned very early in my career that the sexiness of an application can have as much effect on its salability as its functionality. I've seen a non-technical boss take one look at a highly functional application and pass poor judgment on it because it doesn't look "cool." Customers evaluating your software may not understand everything your software can do after a 10-minute sales demo, but they do take away an emotional impression that—in general—is linked directly to the overall look of the application.

Adding relatively simple features such as animated buttons can go a long way toward getting customers to like your application. The only downside is the performance penalty you'll incur for adding those fancy animated buttons. Worse, if you try to add cool features such as compositing anti-aliased text readout or alpha-channel clickable regions to your control, you have a recipe for a CPU-hogging application.

You're going to learn about minimizing frame rates, avoiding flicker and caching frames to make the component as high performance as reasonably possible. Creating an animated control is simple but creating an efficient animated control is more difficult.

In this article, you'll see how to create an animated button component that lets users adjust a sliding percentage value between 0 and 100 by clicking arrows on the component as shown in Figure 1. The percentage itself serves only to force the animation to display a control value as part of the animation—in other words, because the displayed value can change, you can't simply cache a series of images and display them in round-robin fashion to create the animation; instead, the animation (and any caching scheme for it) must draw and take the current value of the control into account. Users see the current value in the center of each animated button component update immediately when they click either arrow.

Figure 1. Animated Buttons: The figure shows a Windows form containing animated buttons from the sample application that accompanies this article
Choosing a Frame Rate
Frame rate is a count of how many times your animation updates the screen during a specified time interval, usually specified in number of refreshes per second, called frames per second (fps). If the frame rate is too slow, animations look jerky. It's worth looking at other common animation frame techniques to get a sense of the common range of values. For example, television broadcasts in the U.S. refresh every other line on the screen 60 times per second yielding 30 full frames per second. Hard-core gamers tweak their systems to wring up to 100fps from the latest first-person shooters, but that's clearly overkill for typical animated business or productivity applications; therefore, you should look for more reasonable measures. Film is shot at 24 frames per second. Shocked? Yes, even the multi-million dollar cutting edge computer animated film you recently saw at the theatre was running at only 24 frames per second. You can safely assume, then, that 24fps is sufficient for most desktop animations.

Before you go back and adjust every animation you've ever done to run at 24fps you should consider another constraint—judder. Judder occurs when the movement isn't fluid; viewers will detect the frames in the process of changing as opposed to a smooth movement. Judder can be caused by:

  • Objects moving very rapidly across the screen.
  • Objects rotating, such as looking at a rotating bicycle wheel from the side.
Such objects require a faster frame rate, so you can't simply decide that 24fps is sufficient for every animation.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date