C# Tutorial – Transparent Image Animation using Paint and Animator in Windows Form and Visual Studio

Hi, have you ever wanted to truly play with transparent GIF or sprite sheet animations in windows form. No. well we did and here is the answer. After failing to do this for a long time finally found a way for smooth animations and amazingly true transparent layered image positioning in windows form and c#. No ones asked for this tutorial and it wasn’t in any sort of top level problem solving list either, this is just a simple production of a curious mind.

So what is this project for then? This project is created with a curiosity of how to make games like graphics in windows form applications and use them for displaying animation, collisions, click events, movements etc. This is the first video among many we will explore in terms of how to get do some crazy stuff with Paint events in windows form.

Lesson Objectives:

  1. Make a transparent animator player in windows form and c#
  2. Call the images from the C# script using the Image Class
  3. Use some form of Class Instances in the project
  4. Use the Animator class to animate GIF images using paint
  5. Use custom event listeners for the GIF animation
  6. Test the form for appropriate results

Video Tutorial –

Download The Fan Windmill Animation Images Here

 

Full Source Code For the Fan, WiindMill animation project

namespace Fan_and_Windmill_Animator_Win_Forms_MOOICT
{

    // made by MOOICT 2022
    // for educational purpose only

    public partial class Form1 : Form
    {

        Image Fan; // instance of the image class called Fan
        Image WindMill; // instance of the image class called WindMill


        public Form1()
        {
            InitializeComponent();
            LoadImages(); // run the load images when the form loads
        }

        private void DrawAnimationsPaintEvent(object sender, PaintEventArgs e)
        {
            // this is the paint event for the form. 

            ImageAnimator.UpdateFrames(Fan); // load the animation and update the frames
            ImageAnimator.UpdateFrames(WindMill); // load the animation and load the frames
            

            e.Graphics.DrawImage(Fan, new Point(50, 0)); // draw the fan graphics to the form
            e.Graphics.DrawImage(WindMill, new Point(300, 200)); // draw the windmill graphics to the form

        }

        private void LoadImages()
        {
            // below is the set styles for the form. below like will set yp the optimized redraw value so the 
            // graphics are drawn smoother on the screen
            SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint, true);

            Fan = Properties.Resources.Fan; // load the fan image from the resources to the Fan image class

            ImageAnimator.Animate(Fan, this.OnFrameChangedHandler); // image aniamtor will play the gif file frame by frame

            WindMill = Properties.Resources.Windmill; // load the windmill image to the windmill image

            ImageAnimator.Animate(WindMill, this.OnFrameChangedHandler); // image aniamtion play each frame of the windmill gif file

        }

        private void OnFrameChangedHandler(object? sender, EventArgs e)
        {
            // this event is linked to both of the gif images
            // this.validate will reset the form per frame so the images will be updated
            this.Invalidate();
        }
    }
}

    



Comments are closed.