Motion class to animate your controls

• Download source files - 96 Kb
• Download demo project - 12.5 Kb

Introduction

Have you ever needed to animate a control in your programs? In other words, animate anything on your screen? Read on....

This method will animate any control, anywhere on the screen, anyhow you want, according to the parameters passed. Parameters are destination X position, destination Y position, elapsed time and 10 animation types to choose from.

Background

When developing Macromedia Flash applications, I have come across several instances where I needed to animate objects "from here to there". Animating in Flash is relatively easy, but scripted animation is a bit trickier. A clever concept inspired by Robert Penner and Zeh Fernando, led me to write my own customized method in Actionscript (Macromedia's Flash Scripting Language), which I now always use.

But recently I have been digging some more into C# and have been surprised by the similarity to Actionscript and ease of the language, while still respectful of its depth and power. Curious on how hard or easy this would be, here is an attempt to bring some Flash style animation programming into C#.

Using the code

Simply take the following steps:

• add this class (tween.cs) to your project (ensure the namespace matches your project namespace)
• instantiate an object from the class.
• call startTweenEvent method from your events and pass the parameters.

It is that easy! Parameters required are:

void TweenLibrary.startTweenEvent(object sender
        [control you want to animate, can be sender or any other],
        int X Destination,
        int Y Destination,
        string Animation Type,
        int Duration in ticks)

This code snippet will instantiate two tween objects and start tweening the two button controls upon program launch. Since these are two independent objects, they will animate simultaneously!

<CODE>public TweenLibrary tween1 = new TweenLibrary();
public TweenLibrary tween2 = new TweenLibrary();

public Form1(){
    InitializeComponent();
    tween1.startTweenEvent(this.button1, 300, 12, "linear", 40);
    tween2.startTweenEvent(this.button2, 188, 90, "linear", 40);
}

Note how in the previous example the object is hardcoded (button1 and button2) In the following example the snippet shows how to add motion to a control with an eventhandler that can come from any control that points to the same handler. (an instance (tween1) of the tween class must have been created prior to calling this method.)

The object to animate here is the sender and therefore can be any control!

<CODE>private void button1_Click(object sender, System.EventArgs e) {
    tween1.startTweenEvent(sender, 65, 132, "easeinoutcubic", 5);
}

You can choose from the following 10 animation types:

• linear //simple linear tweening - no easing
• easeinquad //quadratic easing in - accelerating from zero velocity
• easeoutquad //quadratic easing out - decelerating to zero velocity
• easeinoutquad //quadratic easing in/out - acceleration until halfway, then deceleration
• easeincubic //cubic easing in - accelerating from zero velocity
• easeoutcubic //cubic easing out - decelerating to zero velocity
• easeinoutcubic //cubic easing in/out - acceleration until halfway, then deceleration
• easeinquart //quartic easing in - accelerating from zero velocity
• easeinexpo //exponential easing in - accelerating from zero velocity
• easeoutexpo //exponential easing out - decelerating to zero velocity

The provided source files include two .cs files. One (Form1.cs) is the Form with the Main() method and the other (tween.cs) is the tween class, containing the required methods to make it work. The example consists of a form with some random controls, which have all the same event Handling method. It also generates a random X and Y position and a dropdown (top left) allows you to set the animiation type for demonstration purposes.

To apply this code, all you would need to do is to include the tween.cs file in your project; change the namespace to match your namespace and instantiate an object from the tween class. Then just call the method and pass your parameters.

Points of Interest

You can find more info about the author at http://www.mxer.com/. Any feedback, questions or comments please write to miguel@mxer.com

All code written by Miguel Moreno. Thanks to Robert Penner for supplying his truly exceptional easing equations in Actionscript, and to Zeh Fernando for inspiring me with his Flash tween(); method to create this experiment in C#.

History

• Version 1.0
  • 10 animation types. (will add more in next revision)
  • no "end of tween" function call. (will add in next revision)