I have this animation script I wrote 2 years ago for a widget (that I never finished), and I recently got back to work on a package tracking widget that is going to use some part of it. Still 70% of the script is never going to be used and I don’t want to throw it away, especially if it can help other people.

I’ve noticed a lot of questions on how to animate groups of objects, and everybody seems to write semi-custom code over and over. My script takes the form of a Script Component (an external script file you reference in your DesktopX script), which means it can be reused without cut&pasting dozens of lines of code every time.

Let me give you an example. In the script below Animator is the main object (already initialized, 3 lines of code, not of interest here). The last argument of each XXXAnim.Init methods is a callback that you can use to call a function when the animation is done. It’s especially interesting if you need to coordinate several complex animations. I’ve added variables so you can understand what each Init call does, but in practice the script would be a little bit simpler.

[sourcecode language=’vb’]

opacity = 75
length_fade = 1500
delay_fade = 500
toX = 300
toY = 300
length_move = 5000
delay_move  = 0
 
Set fadeAnim = CreateObject(“DXScriptLibrary.FadeAnimation”)
Set moveAnim = CreateObject(“DXScriptLibrary.MoveAnimation”)
 
fadeAnim.Init DesktopX.Object(“My_Object_Layer”), opacity, length_fade, delay_fade, Animator.EaseNone, “”
moveAnim.Init DesktopX.Object(“My_Object_Layer”), toX, toY, length_move, delay_move, Animator.EaseIn, “”
 
Animator.Add Array(fadeAnim, moveAnim)
Animator.Start

[/sourcecode]

So, what this code does is prepare 2 animations with different length and start time, give them to the animator component and then start the animations. The Animator object will automatically manage the animations, starting each one after the delay (and of course fade will apply to all child objects). You can also add a new animation while the previous ones are playing, it will be handled transparently, adjusting delays and total animation length.

As a bonus, you can specify the easing type. In the example, the object will start to move slowly and speed up as it moves through the animation.

There are 4 different animation objects (Fade, Move, Rotate, Resize) and 5 types of easing (EaseIn, EaseOut, EaseInOut, EaseOutElasticBig, BackOut). Everything is in separate components with minimal dependencies, so adding new stuff is relatively easy should you wish to so (new easing types for example)

Download from here.