<!-- Article image -->
<!-- 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.
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!
Note how in the previous example the object is hardcoded (
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!
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
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 firstname.lastname@example.org
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! --------------------------->