Konfabulator-like animation object
You can find the script along with a sample widget in the DesktopX Objects gallery.
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 initalized, 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.
- 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)
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)
Right now, the component has a few dependencies (I like to keep stuff clean, and I have my own pre-processor which automatically parses all that stuff and creates merged dxpacks with all needed files ), but this can be merged in a single file to be used more easily.
If there are enough people interested, I can cleanup the component and write a quick tutorial on how to use it. Let me know what you think!
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!