C# Animated Windows Form

C# Animation

C# animation is possible with some slightly advanced programming techniques. For the Form animation we are going to use an animated GIF as the background image. The image-drawing will be handled manually through the GifImage animation C# class discussed in another article.

The GifImage class allows you to control when frames from the animation are displayed. If you want to create a chaning Windows Form, then the basic idea would be:

That is pretty simple and it works. However there is one problem. How do we know how fast the animation is going to loop? If you stick the above concept into a simple if loop, it is going to run as fast as the CPU allows. The frame rate will then be inconsistent across different systems.

The solution is to set a constant frame rate (FPS) for the animated Windows Form. Setting up a constant FPS with C# is not too difficult.

Frames per Second (FPS)

For the FPS routine let's use the System.Diagnostics.StopWatch class. This handy csharp class is a timer that uses the QueryPerformanceTimer API function to keep track of time. Meaning it is more accurate than a normal Timer control or the DateTime class.

So let's say you want the animation to run at 30 frames per second. You will need an interval value calculated like so:

double interval = (double)Stopwatch.Frequency / 30.0;

You also are going to need two long variables outside of the main loop that are going to keep track of the amount of ticks (time). Then a simply if statement inside the loop will let the C# application know when to display the next frame:

[current amount of ticks] >= [previous amount of ticks] + interval

Then it is up to you to get the Windows Form to do whatever you want inside that if statement. Just remember to add these two lines inside of the loop:

this.Invalidate();
Application.DoEvents();

Those C# lines will refresh the Windows Form's display and process the messages to keep the application from crashing. Here is an additionally tip that took me a long time to figure out, add this C# line to the end of the loop:

System.Threading.Thread.Sleep(1);

The line makes the loop sleep for one millisecond. The effect is invisible to the animation speed, but what it does is it frees up the CPU. Test your application with and without the line by checking the Task Manager, you'll notice that without the one millisecond sleep the CPU performance stays at a high percentage.

Since the animation loop now runs based the CPU's tick count, the frame rate will be consistent across different computer systems.

Using the Code

That was a lot of information. I recommend you download the source code available at the bottom of the article to see how it all comes together. Run the example Windows Form to see the C# animation. It is commented to make it easy to copy to your own applications.