Playing Animation in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

So far we have been dealing with static image formats, such as BMP. Each of these formats holds image data for a single picture. Other format – such as GIF, AVI (Audio Vide Interleaved), and MPEG (Moving Picture Experts Group)- contain image data that, when played back in quick succession gives the illusion of movement. These images are called animated images. GIF is one of the common formats used for animated images. An animated image is a series of images, also called frames (e.g., see Figure 7.29).

You can create animated images by using graphics tools such as Macromedia Fireworks or CorelDraw, but GDI+ doesn't support creation of animated images. When you create animated images, you must specify the order of frames and the time interval between them.

FIGURE 7.29: An animated image with three frames

The GDI+ library provides the ImageAnimator class to deal with animated file formats using time-based frames. At this point, GDI+ supports only multiframe GIFs and TIFFs. ImageAnimator has four static methods: Animate, CanAnimate, StopAnimate, and UpdateFrames.

1. The Animate method displays a framed image as an animation. This method takes parameters of type Image and EventHandler. Image is the image you want to animate. The event is triggered when the currently displayed frame is changed.
2. The CanAnimate method returns true when an image has time-based frames.
3. The StopAnimate method terminates an animation. It takes parameters of type Image and EventHandler.
4. The UpdateFrames method will move to the next frame and render it the next time the image is drawn.

Now let's write an application that will play animated images. We create a Windows application and add a MainMenu control and two button controls to the form. We also add two menu items: Open File and Exit. We change the text and names of the menu items and button controls as shown in Figure 7.30.

We add two variable of type Image and string as follows:

        private Image curImage = null;

        private string curFileName = null;

The Open File menu item allows us to browse images, and the Exit menu items closes the form. Listing 7.13 gives the code for the click event handlers for these two menu items.

LISTING 7.13: The Open File and Exit menu item click event handler

        private Image curImage;

        private void OpenFileMenu_Click(object sender, System.EventArgs e)

        {

            //Create OpenFileDialog

            OpenFileDialog opnDlg = new OpenFileDialog();

            opnDlg.Filter = "Animated Gifs | *.gif;";

            //If OK, selected

            if (opnDlg.ShowDialog() == DialogResult.OK)

            {

                //Read current selected file name

                curFileName = opnDlg.FileName;

            }

        }

        private void ExitMenu_Click(object sender, System.EventArgs e)

        {

            this.Close();

        }

FIGURE 7.30: An image animation example

Now we rename the two buttons Start Animation and Stop Animation, respectively, and write click event handlers by double-clicking on them. The code for the StartAnimationBtn event handler is given in Listing 7.14. We create an Image object by calling FromImage, which takes an image files as its only argument. Then we use the CanAnimate method to check if the image can be animated. If it can, we call Animate, which plays the animation.

LISTING 7.14: The StartAnimationBtn click event handler

        private void StartAnimationBtn_Click(object sender, System.EventArgs e)

        {

            curImage = Image.FromFile(curFileName);

            if (ImageAnimator.CanAnimate(curImage))

            {

                ImageAnimator.Animate(curImage,new EventHandler(this.OnFrameChanged));

            }

            else

                MessageBox.Show("Image doesn't have frames");

        }

On the StopAnimationBtn click event handler, we check whether there is an Image object, and we call StopAnimate to stop the animation as shown in Listing 7.15.

LISTING 7.15: The StopAnimationBtn click event handler 

        private void StopAnimationBtn_Click(object sender, System.EventArgs e)

        {

            if (curImage != null)

            {

                ImageAnimator.StopAnimate(curImage,new EventHandler(this.OnFrameChanged));

            }

        }

Now we add OnPaint and OnFrameChanged methods to the application. The code for these methods is given in Listing 7.16. In the OnPaint method, we call the UpdateFrames method of ImageAnimator and then call DrawImage to draw the image. In the OnFrameChanged method, we repaint the form by calling Invalidate.

LISTING 7.16: The OnPaint and OnFrameChanged methods

        protected override void onPaint(PaintEventArgs e)

        {

            if (curImage != null)

            {

                ImageAnimator.UpdateFrames();

                e.Graphics.DrawImage(curImage, new Point(0, 0));

            }

        }

        private void OnFrameChanged(object o, EventArgs e)

        {

            this.Invalidate();

        }

Now compile and run the application. You can browse animated images on your system or download the files from online and select a file. The Start Animation button will start playing the animation. The Stop Animation button will stop the animation.

Figure 7.31 shows the first frame of the animation sample provided with this article (download code from online).

Figure 7.32 shows the second frame of the sample.

FIGURE 7.31: The first frame of an animated image

FIGURE 7.32: The second frame of an animated image

Conclusion

Hope the article would have helped you in understanding Playing Animation in GDI+. Read other articles on GDI+ on the website.

This book teaches .NET developers how to work with GDI+ as they develop applications that include graphics, or that interact with monitors or printers. It begins by explaining the difference between GDI and GDI+, and covering the basic concepts of graphics programming in Windows.