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


Creating High-Performance Animated Controls : Page 2

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.

Using Animations Reasonably
The goal of an animated control is to provide visual interest to the application without distracting the user. The most notorious abuse of this concept is the HTML <blink> tag. In the early days of the Internet, blinking items appeared everywhere. Fortunately, Web developers quickly learned that the blink did nothing but annoy end users. Subtlety wins the day, adding coolness without the annoyance. Simple types of movements like slow-moving clouds, waves, and slowly warping textures are all good candidates.

You'll also want to choose something with minimal color variation. If your button animation includes a full rainbow of colors, you'll have a lot of difficulty choosing contrasting colors for the control's text. You should definitely consult a color wheel if you're unsure about which colors contrast well with your background without clashing.

Avoiding Flicker
Flicker is the natural enemy of all animation and is the close cousin of judder. Flicker is the appearance of unsteadiness in your animation, for example, when the background shines through momentarily or users see lines appear as they're being drawn rather than seeing the whole frame at once.

You can easily avoid flicker by using double buffering. To fully enable double buffering you'll need to set the properties AllPaintingInWMPaint, UserPaint, and DoubleBuffer to true. AllPaintingInWMPaint tells Windows not to erase your background, UserPaint tells Windows that you'll handle all the drawing tasks for your component, and double buffering uses an off-screen buffer for the drawing you do in the OnPaint method and blits it to the onscreen buffer screen all at once. You can enable all three options in your animated control just by adding a few lines to your constructor.

   SetStyle(ControlStyles.UserPaint, true); 
   SetStyle(ControlStyles.AllPaintingInWmPaint, true); 
   SetStyle(ControlStyles.DoubleBuffer, true);
Setting Paint Timing
The easiest way to control timing in WinForms is to use a Timer control. To add a timer control to your component, simply drag and drop a timer to your form in design view. In the component's constructor, initialize the timer to fire 24 times per second.

   AnimationTimer = new Timer();
   AnimationTimer.Interval = 1000/24;
   AnimationTimer.Tick += new 
Every time the timer fires, advance the frame and call the Refresh method, which forces a Paint event to fire.

   private void AnimationTick(
      object sender, EventArgs e)
      CurrentFrame += 1;
      if(CurrentFrame >
      { CurrentFrame=0; }

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