Create an animation control based on the. NET Framework Lite version

Introduction

In a recent project, one requirement is Microsoft? . NET Framework Lite version windows? Animated GIF is displayed in the form .. Net Framework Lite version 1.0 does not provide the ability to display animated GIF files, nor does it include the imageanimator helper class in the full version of. NET Framework. The imageanimator class allows you to make animations for time frame-based images.

Although I can write C # code to read animated GIF images in gif86a format, I chose a simpler and more intuitive way to display the animation in the program.

Create a plot

If you open an animated GIF in the selected GIF editor, you will see that this file consists of multiple interconnected images (frames:

Figure 1: animation Frame

These images are stored in a compressed format with information about the size, number, and latency between frames. This information is read by the program that displays the animation.

Many GIF editors allow you to extract image frames to the "storyboards" in sequence:

Figure 2: storyboard

I saved the storyboard in a bitmap file, and then converted the file to the GIF format because the file in this format occupies less memory in the. NET Framework Lite version. Now I want to show you how to use this image to create an "Animation" Control Based on the. NET Framework Lite version.

Let's get started

The method we use to make this bitmap work is quite simple. It is based on the fact that when you use images in. NET Framework lite versions, you do not have to display the entire image loaded into memory. The rectangle object is accepted as a parameter by a reload method of graphics. drawimage. We use this rectangle to process each image in the story board bitmap as a frame. By moving the position of the frame rectangle, We can dynamically load different parts of the bitmap to be displayed in the form.

We add a new class animatectl to the. NET Framework Lite version project, and derive this class from system. Windows. Forms. Control:

 

Add a common bitmap attribute to this class to pass bitmap from the client. Do not forget to declare a private member for this bitmap so that it can be used in the class:

 

The control we created will use the drawimage method of the graphics object retrieved in it to draw these frames:

 

This method accepts the current frame number to be drawn. Then, the left position of the graphic box is calculated to create a rectangle.

To implement the cyclic logic of the control, I chose system. Windows. Forms. Timer.

There are many other options that can provide the same function, such as using system. threading. timer or the creation of a separate thread can achieve the same purpose; however, the system. windows. forms. timer is simpler and more convenient. Add the following code to the control constructor:

 

In the constructor, We cache the graphics object from the instance of the control, create a new timer instance, and hook it with the tick event of the timer. You can now insert the startanimation method to enable the animation:

 

This method accepts some important Animation Parameters: frame width, delay interval, and number of cycles.

In addition, do not forget the loop logic:

 

In the timereffectick event of the above Code, we check loopcount to track the number of times that have been drawn and compare it with the loopcounter captured when the startanimation method is called.

Show started!

We have completed the animatectl and can now perform the test. Step 1: you must add image files with storyboards to your project. You can perform this task by changing the file to an embedded resource or by notifying Visual Studio. NET 2003 to copy the file as part of the project. Right-click the project in Solution Explorer and select Add existing item... (add existing item...) from the pop-up menu ...). Browse to the image file and make sure that the build action attribute of this file has been set to content ).

Insert the following code into the form constructor:

 

In the code above, we use the bitmap object created from the image file to specify the bitmap attribute of the animation control.

Place two buttons on the designer's form and add the following code to their click events:

 

Run the project and click Start animation to view the animation:

Figure 3: Final Product

The number of frames contained in a pseudo-animated GIF file and the delay time between frames may change. When you call the startanimation Method for different animations, you need to adjust the delayinterval parameter.

In any case, this code is not the final version. Animatectl cannot provide all functions included in animated GIF. For example, the animatectl control cannot process different latencies between frames. For example, you may want the display time of the first frame to be a little longer than that of other frames. The code in this article is a good starting point for you. You can extend this control as needed.

Remember that displaying a high-resolution graphic animation increases the burden on system resources. Be sure to pay attention to the memory and resource limits of some devices running this code. Do not forget to perform a full test and ensure that the Application neither occupies all memory nor consumes all processor time.

Summary

Although the. NET Framework Lite version is only a subset of the full version of. NET Framework, developers can still create user interfaces that are more attractive to end users. By using the GIF editor and drawing capabilities provided by the. NET Framework Lite version, developers can display animations in their smart device projects.