Click here to Skip to main content
Click here to Skip to main content
Go to top

Motion class to animate your controls

, 25 Jul 2003
Rate this:
Please Sign up or sign in to vote.
An article on easily animating controls on a form in C#
<!-- Article image -->

Sample Image - tween.jpg

<!-- Add the rest of your HTML here -->

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)

or as described in example below.

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</CODE> TweenLibrary tween1 = <CODE>new</CODE> TweenLibrary();
<CODE>public</CODE> TweenLibrary tween2 = <CODE>new</CODE> TweenLibrary();

<CODE>public</CODE> Form1(){
    InitializeComponent();
    tween1.startTweenEvent(<CODE>this</CODE>.button1, 300, 12, "linear", 40);
    tween2.startTweenEvent(<CODE>this</CODE>.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</CODE> button1_Click(<CODE>object</CODE> 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)

<!------------------------------- That's it! --------------------------->

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

mijalis

United States United States
No Biography provided

Comments and Discussions

 
GeneralGreat Code ... Well Done Pinmemberpiksale29-Apr-06 10:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 26 Jul 2003
Article Copyright 2003 by mijalis
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid