Click here to Skip to main content
13,342,442 members (53,880 online)
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 25 Jul 2003

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


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.


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(){
    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 Any feedback, questions or comments please write to

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


  • 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! --------------------------->


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


About the Author

United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Questionthanks! Pin
Jayson Ragasa27-Aug-12 7:05
memberJayson Ragasa27-Aug-12 7:05 
GeneralNicely done! Pin
Ravi Bhavnani18-Apr-12 20:22
memberRavi Bhavnani18-Apr-12 20:22 
GeneralAnimate cartoon Pin
umeed.e.sahar11-Sep-08 8:07
memberumeed.e.sahar11-Sep-08 8:07 
GeneralNeeds to be time based Pin
burstingfist30-Aug-06 11:52
memberburstingfist30-Aug-06 11:52 
GeneralRe: Needs to be time based Pin
armax752-Jan-07 7:35
memberarmax752-Jan-07 7:35 
GeneralRe: Needs to be time based Pin
Mike Tuersley13-Sep-07 4:26
memberMike Tuersley13-Sep-07 4:26 
GeneralGreat Code ... Well Done Pin
piksale29-Apr-06 11:36
memberpiksale29-Apr-06 11:36 
GeneralVery Nice Pin
evidor25-Apr-05 17:21
memberevidor25-Apr-05 17:21 
QuestionNotify when animation is complete? Pin
Hez18-Feb-05 0:22
memberHez18-Feb-05 0:22 
QuestionCan it be used to move more controls at the same time? Pin
Dan Bunea27-Aug-03 3:59
memberDan Bunea27-Aug-03 3:59 
AnswerRe: Can it be used to move more controls at the same time? Pin
mmoreno27-Aug-03 4:11
membermmoreno27-Aug-03 4:11 
Generalexcelent Pin
Dan Bunea27-Aug-03 0:33
memberDan Bunea27-Aug-03 0:33 
Generalone thing Pin
Paul B27-Jul-03 2:58
memberPaul B27-Jul-03 2:58 
GeneralRe: one thing Pin
mmoreno27-Jul-03 14:16
membermmoreno27-Jul-03 14:16 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 26 Jul 2003
Article Copyright 2003 by mijalis
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid