Apply Animated Effects to .NET Controls

• Download demo project - 255 KB

Introduction

Sometimes, a few lines of code could make an application more attractive. In this article, I would like to introduce a simple library to apply animated effects to .NET controls. But be careful, do not activate too many animated effects at the same time, it may cause your Pocket PC/Windows CE application to be slow.

Algorithm

Changing the location or/and dimension of a control periodically could present some interesting animated effects. All animated effects could be achieved by the following steps:

1. Determine the initial and final locations/dimensions.
2. Initialize the parameters, such as interval, steps count etc.
3. Pre-calculate the locations/dimensions through the animation lifetime.
4. Trigger a timer to start the animation.
5. Change the location/dimension of a destination control to pre-calculated values whenever the timer is waked up.
6. Once the animation states change, it should notify all listeners by events.

This article demonstrates three basic animated effects: move, zoom and rotate. For each effect, it includes three motions: uniform motion, accelerated motion and decelerated motion. The uniform motion is so easy to realize. So we just discuss a little about the accelerated motion, by the way the decelerated motion shares the same theory.

For the accelerated motion of a move animation, we suppose from the n*T moment to the (n+1)*T moment. The destination control moves from Pn to Pn+1, the distance between them should be: a*(n + 1)^2, where T is the period and a is a constant. The constant a is easy to be determined when the initial and final positions are given.

In this library, the traces of the three motions can be attained through a unified static method Procalculate():

protected static int[] Precalculate(int val1, int val2, 
        int steps, AnimatedMotions type)
{
    int [] vals = new int[steps];
    int sum = 0, currsum = 0, step, i;
    if (type == AnimatedMotions.UniformMotion) 
        sum = steps;
    else
        for (i = 1; i <= steps; i++) sum += i * i;
    for (i = 1; i < steps; i++)
    {
        step = (type == AnimatedMotions.DeceleratedMotion) 
               ? (steps + 1 - i) * (steps + 1 - i) : 
               (type == AnimatedMotions.UniformMotion ? 1 : i * i);
        currsum += step;
        vals[i - 1] = (val2 - val1) * currsum / sum + val1;
    }
    vals[steps - 1] = val2;
    return vals;
}

Using the code

There are four main classes in the library : AnimatedEffect, MoveAnimatedEffect, ZoomAnimatedEffect and RotateAnimatedEffect. The following class diagram gives you a clear view about them:

They are easy to use and also powerful enough to generate very complex animations. Let's look into them with four cases:

1. Simple Animation

If you would like to apply a simple animated effect to a control, two lines of codes are enough:

MoveAnimatedEffect moveEffect = new MoveAnimatedEffect();
moveEffect.Move(somecontrol, x1, y1, x2, y2, steps, 
           AnimatedMotions.AcceleratedMotion);

It causes a control, named somecontrol, to move from original position (x1,y1) to another position (x2,y2) with accelerated motion. You can rotate or zoom a control in the same way. Really simple, isn't it?

2. Cascaded Animation

In most cases, we want to make different controls be animated one by one according to our "play". At this time, cascaded animation should be helpful. The point is, once the previous animation stops, it throws out an event; a control program receives it and then actives the next animation. For example, we want to move a control from (x1, y1) to (x2, y2) and then rotate it. It may be realized like this:

MoveAnimatedEffect moveEffect = new MoveAnimatedEffect();
RotateAnimatedEffect rotateEffect = new RotateAnimatedEffect();

moveEffect.Move(somecontrol, x1, y1, x2, y2, 
  steps, AnimatedMotions.AcceleratedMotion);
moveEffect.StateChangedEvent += new 
  AnimationStateChangedEventHandler(NextAnimation);

private void NextAnimation(object sender)
{
    rotateEffect.RotateHorizontally(somecontrol, 
      somecontrol.Width, steps, 
      AnimatedMotions.UniformMotion);
}

3. Parallel Animation

The parallel animation allows to apply more than one animated effect to one control. It may generate more complex animations. For instance, we would like to move a control and zoom it at the same time. We can just insert the following code to the program:

MoveAnimatedEffect moveEffect = new MoveAnimatedEffect();
ZoomAnimatedEffect zoomEffect = new ZoomAnimatedEffect();

moveEffect.Move(somecontrol, x1, y1, x2, y2, 
  steps, AnimatedMotions.AcceleratedMotion);
zoomEffect.Zoom(somecontrol, somecontrol.Width, 0, 
  somecontrol.Height, 0, steps, 
  AnimatedMotions.UniformMotion);

4. More Sophisticated Animation

Applying the three animations I mentioned before, we could get more sophisticated animations. In this case, a simple draft would be helpful. Now, we would like to realize an animation play like this:

The figure above presents a sequence of animations. It includes four steps:

• Step 1: Move the button "Exit" from top to bottom.
• Step 2: Continue to move it from right to left.
• Step 3: Move the button "Stop" from top to bottom.
• Step 4: Display an image in the center of the screen and rotate it; four panels appear and move around it, at the same time, they zoom in/out themselves.

The following code may give you some points in realizing such an animation play:

step = 0;
moveEffect.Move(btnExit, 200, - 20, 200, 280, 
    30, AnimatedMotions.AcceleratedMotion); // Step 1
moveEffect.StateChangedEvent += new 
    AnimationStateChangedEventHandler(MainStateChanged);

private void MainStateChanged(object sender)
{
    step ++;
    switch (step)
    {
        case 1:        // Step 2
            moveEffect.Move(btnExit, 200, 280, 
              40, 280, 20, AnimatedMotions.DeceleratedMotion);
            break;
        case 2:        // Step 3
            btnControl.Visible = true;
            moveEffect.Move(btnControl, 200, - 20, 200, 
              280, 30, AnimatedMotions.AcceleratedMotion);
            break;
        case 3:        // Step 4
            labelMoveEffect.Stop();
            label1.Location = new Point(24, 250);
            pictureBox.Visible = true;
            rotateEffect.RotateHorizontally(pictureBox, 
              pictureBox.Width, 20, AnimatedMotions.AcceleratedMotion);
            rotateEffect.StateChangedEvent += new 
              AnimationStateChangedEventHandler(te_TurnOverEvent);
            ChangeImage();
            for (int i = 0; i < 4; i++)
            {
                panels[i].Visible = true;
                panelZoomEffects[i].Start();
            }
            Panels_MovingStopped(null);
            break;
    }
}

You can download the demo project to find the remaining code.

Conclusion

For a successful application, to be complete, scalable and stable is not all. We should also keep it in our minds: how to improve users' experiences. When our users have to face dozens of applications with the same interface, a little animation may make your application different and cheer your users. Why not try it?

History

You can always download the latest demos from OpenVue.net.