Animating controls
In this tutorial I will show a few examples on how to use the ANIMATION_MANAGER, covering most of the basics.
I'll start off with some of the jargon you'll encounter: A timeline is a set of animations (not required to be sequential). Easing is a function applied to the offset for each step in an animation to achieve non-linear transitions. Easing functions are usually made using quadratic or cubic Bezier curves. Translation refers to the Euclidean transformation of an object's coordinates to a new set of coordinates. The main types of animations are:
The self-explanatory types of directions are:
Let's start with a simple example using CreateSimpleAnimation (single animation): Lua Code:
As you will notice, not defining an easing function will simply use linear. Here's a list of easing functions provided by the API:
If you wish to make a custom easing, you can do so with ZO_GenerateCubicBezierEase. Instead of a tedious trial and error process inputting numbers blindly, I can recommend using this interactive tool to come up with the four numbers required: http://cubic-bezier.com/ Each type of animation has its own method for setting the from and to values. Here's a more elaborate timeline animation with custom easing: Lua Code:
I hope this tutorial clarified some of the less obvious things (cf. http://wiki.esoui.com/Controls) |
Great information! Thanks a lot.
I was wondering, if there is any possibility to alter a timeline animation. More in detail, I would like to do a translate animation, but the starting coords are not known before the animation is applied to a control. So I would like the animation to take the coords of the control as starting point. |
Quote:
Lua Code:
One way you might use this is by creating the timeline from virtual (the virtual being defined in UI XML), with some placeholder durations/positions/whatever, then fill in the actual values, and then run it. For an example in the wild, which the simpler example above is based on, see [2] (Lua) and [3] (XML). The base duration from the XML is bumped up by 250ms for every instance of the timeline, several of which are started in parallel. [1] http://wiki.esoui.com/Controls#AnimationTimeline [2] https://github.com/PansyLabs/Timers/...s.lua#L207-211 [3] https://github.com/PansyLabs/Timers/...ers.xml#L70-79 |
Thanks for the help!
|
If the starting coordinates aren't known, I've found that simply using SetTranslateDeltas() works great.
ie. Lua Code:
For example, if you want the visual effect of controls "bumping up" each other as new ones come in at the bottom of a stack, you can create an animation to translate the control up, then add an "OnStop" handler that will call SetTranslateDeltas() again so the next time that "bump" is called, it will move up from its new position. Another thing to keep in mind is that the beziers only affect the animation speed, not the translate coordinates. In order to get a curved animation, you can't simply add two translate animations to the same object -- the latter translation overwrites the former. You have to anchor one object to another object and animate each differently. For example: Lua Code:
There might be a better method out there, but... I haven't found it. |
First off, thanks for posting this. I am having an issue trying to implement the simple animation. I am using the event for mount status change and the function triggers fine. My issue is with the starting alpha of my label control.
For the below I'm getting attempt to index a nil value for Code:
--label |
Hard to tell without more information about controlToAnim. Start debugging with testing if controlToAnim is nil.
If it's not validate it actually has a method named "GetAlpha" (use zgoo AddOn!). Maybe it's not a control or a descendant of control. |
Quote:
|
It was a scope resolution issue on my part. Doh.
|
Please make this sticky. I my case it helps much! Thanks.
|
You could add it to the WIKI so everyone benefits (even outside the forum).
|
All times are GMT -6. The time now is 12:40 AM. |
vBulletin © 2024, Jelsoft Enterprises Ltd
© 2014 - 2022 MMOUI