Question

I have a class that currently switches between 2 images for normal and mouse over states, but I would like to add a subtle animation that switches between the 2.

Is there any (simple) way to have a button animate from one image to the next such as the buttons do in the IE 9 browser?

EDIT:

Here is the final solution that I used for the OnPaint overload thanks to the answer by joe_coolish

protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.DrawImage(_normalImage, 0, 0);

        ColorMatrix matrix = new ColorMatrix();
        matrix.Matrix33 = _opacity;

        ImageAttributes attributes = new ImageAttributes();
        attributes.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

        e.Graphics.DrawImage(_hotImage, this.DisplayRectangle, 0, 0,
            this.DisplayRectangle.Width, this.DisplayRectangle.Height, GraphicsUnit.Pixel, attributes);

        if (_opacity < 1 && _over)
        {
            _opacity += 0.02f;
            _opacity = Math.Min(1, _opacity);
            this.Invalidate();
        }
        if (_opacity > 0 && !_over)
        {
            _opacity -= 0.02f;
            _opacity = Math.Max(0, _opacity);
            this.Invalidate();
        }
    }

I ended up having to prevent the opacity from being set above 1 or below 0 or else I ended up with some strange behaviors.

Note: it is also important to make sure the control is double buffered or else there is bad flickering.

this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);

Answer 1

How different are the images? If you want a “Fade in/out” type thing, try something like this:

    private float _opacity = 0.0f;
    private bool _over = false;

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.DrawImage(imgOne);

        ColorMatrix matrix = new ColorMatrix();
        matrix.Matrix33 = _opacity; //opacity 0 = completely transparent, 1 = completely opaque

        ImageAttributes attributes = new ImageAttributes();
        attributes.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

        e.Graphics.DrawImage(imgTwo, new Rectangle(0, 0, imgTwo.Width, imgTwo.Height), 0, 0, imgTwo.Width, imgTwo.Height, GraphicsUnit.Pixel, attributes);

        if(_opacity < 1 && _over)
        {
            _opacity += 0.05f;   //  Play with this!!
            Invalidate();
        }
        if(_opacity > 0 && !_over)
        {
            _opacity -= 0.05f;   //  Play with this!!
            Invalidate();    
        }
    }

And then just set the _over bool when your mouse goes in and out!

This is a really rough set of code, and IDK if it’ll even compile, but that’s a pretty good starting point!