12,454,104 members (57,909 online)
alternative version

74.2K views
25 bookmarked
Posted

# Apply Animated Effects to .NET Controls

, 7 May 2004 CPOL
 Rate this:
Some animated effects may make your application more attractive.

## 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?

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;
}
}```

## 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?

## Share

 Web Developer China
Xinjie ZHANG is a mobile solution developer. His expertise includes .NET/.NET CE Framework, ATL/WTL/MFC, J2ME, Hibernate+Spring Framework, Symbian SDK etc. Welcome to his XrossOne Studio.

## You may also be interested in...

 Pro Pro

 First Prev Next
 Gradient silkkeng4-Oct-05 14:41 silkkeng 4-Oct-05 14:41
 Very interesting - Can we get the regular version? zone51@walla.co.il9-May-05 21:07 zone51@walla.co.il 9-May-05 21:07
 Re: Very interesting - Can we get the regular version? Xinjie ZHANG9-May-05 21:42 Xinjie ZHANG 9-May-05 21:42