Question

Ok So I’m creating a “Windows Forms Application” for some guy using C# and I want to make the UI a bit more interesting for him.

The main form looks like a big dial with custom buttons arranged on it. (I’m saying custom buttons since they are actually simple user controls I’ve created that have a PictureBox and a Label that enlarges when the user points it and then shrink when the mouse cursor is moved outside it. There’s also an Image property which sets the PictureBox‘s Image and is used as the icon of the so called custom button.)

I used two timers named tmrEnlarge and tmrShrink which activate on MouseEnter and MouseLeave events respectively. Basically nothing but a couple of simple functions to increase and decrease the size of the PictureBox used in my custom control and making it look like it’s zooming in…

It works just fine but the problem is, when the mouse hovers several controls at the same time, the animation slows dows (which in my opinion is normal, since timers are not the best way for doing something like I did!)
I tried using threads as well but the problem’s still here! 🙁

What I want to know is what’s the best way for doing something like this?

EDIT:

Here’s the code I used for drawing the image directly on the control without using a PictureBox:

(It’s just a quick version and it leaves residues after drawing the image, which is not important for me right now)

public partial class DDAnimatingLabel : UserControl
{
    public Image Image { get; set; }

    public DDAnimatingLabel()
    {
        InitializeComponent();
    }

    private void DDAnimatingLabel_MouseEnter(object sender, EventArgs e)
    {
        tmrEnlarge.Enabled = true;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        if (Image != null)
        {
            e.Graphics.DrawImage(this.Image, e.ClipRectangle);
        }
        else
            base.OnPaint(e);
    }

    private void tmrEnlarge_Tick(object sender, EventArgs e)
    {
        if (Size.Width >= MaximumSize.Width)
        {
            tmrEnlarge.Enabled = false;
            return;
        }

        Size s = Size;
        s.Height += 4;
        s.Width += 4;
        Size = s;

        Point p = Location;
        p.X -= 2;
        p.Y -= 2;
        Location = p;
    }

    private void tmrShrink_Tick(object sender, EventArgs e)
    {
        if (tmrEnlarge.Enabled)
            return;

        if (Size.Width == MinimumSize.Width)
        {
            tmrShrink.Enabled = false;
            return;
        }

        Size s = Size;
        s.Height -= 4;
        s.Width -= 4;
        Size = s;

        Point p = Location;
        p.X += 2;
        p.Y += 2;
        Location = p;
    }

    private void DDAnimatingLabel_MouseLeave(object sender, EventArgs e)
    {
        tmrShrink.Enabled = true;
    }
}

Answer 1

I originally misunderstood your question. Some time ago I built an animation system for this kind of thing. Here you can find that code:
http://pastebin.com/k1XmRapH.

That is an older ‘version’ of my animation system. It’s crude, but relatively small and easy to understand. Below is a demonstration app that uses the animation system.

The key points of this system are:

• Utilize a single timer that provides a timed ‘pulse’ to each runnning animation
• The pulse uses elapsed time to calculate how much change to apply

The demonstration app uses an AnimationGroup to alter both Size and Location properties. When the mouse enters the button we first cancel any existing animation and then run an animation to grow the button. When the mouse leaves the button we again cancel any existing animation and then run an animation to return it to normal. Specifying AnimationTerminate.Cancel to AnimationManager.Remove cancels a running animation without calling its End method (which would complete the animation). This leaves the button’s properties in the state they were in at the time we cancelled and smoothly returns the button to normal size.

using System;
using System.Drawing;
using System.Windows.Forms;

class Form1 : Form
{
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        Application.Run(new Form1());
    }

    const int PulseInterval = 20;
    const int ButtonAnimateTime = 250;

    AnimationManager animate;
    Point[] buttonLocationsNormal, buttonLocationsHover;
    Size buttonSizeNormal, buttonSizeHover;

    public Form1()
    {
        Text = "Demo";
        ClientSize = new Size(480, 100);

        animate = new AnimationManager { PulseInterval = PulseInterval };

        buttonLocationsNormal = new Point[4];
        buttonLocationsHover = new Point[4];
        buttonSizeNormal = new Size(100, 80);
        buttonSizeHover = new Size(120, 100);

        for (int n = 0, x = 10; n < 4; n++, x += 120)
        {
            Point normalLocation = new Point(x, 10);
            buttonLocationsNormal[n] = normalLocation;
            buttonLocationsHover[n] = new Point(x - 10, 0);
            Button button = new Button { Text = "Text", Location = normalLocation, Size = buttonSizeNormal };
            button.MouseEnter += (s, e) => AnimateButton(s as Button, true);
            button.MouseLeave += (s, e) => AnimateButton(s as Button, false);
            Controls.Add(button);
        }
    }

    private void AnimateButton(Button button, bool hovering)
    {
        int index = Controls.IndexOf(button);
        AnimationGroup group = button.Tag as AnimationGroup;
        if (group != null)
            animate.Remove(group, AnimationTerminate.Cancel);

        Point newLocation;
        Size newSize;
        if (hovering)
        {
            newLocation = buttonLocationsHover[index];
            newSize = buttonSizeHover;
        }
        else
        {
            newLocation = buttonLocationsNormal[index];
            newSize = buttonSizeNormal;
        }
        group = new AnimationGroup(
            new PropertyAnimation("Location", button, newLocation, TimeSpan.FromMilliseconds(ButtonAnimateTime), new PointAnimator())
            , new PropertyAnimation("Size", button, newSize, TimeSpan.FromMilliseconds(ButtonAnimateTime), new SizeAnimator())
        );
        button.Tag = group;
        animate.Add(group);
    }
}