|
04/26/14, 02:11 PM | #1 |
|
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) Last edited by acies : 05/01/14 at 08:07 AM. |
04/28/14, 01:08 PM | #2 |
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. |
|
04/28/14, 02:26 PM | #3 | |
|
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 Last edited by GetBackYouPansy : 04/28/14 at 02:39 PM. Reason: Failed to put together a coherent post, like, 6 times. |
|
04/29/14, 07:30 AM | #4 |
Thanks for the help!
|
|
05/14/14, 07:00 PM | #5 | |
Join Date: May 2014
Posts: 18
|
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. Last edited by Roupine : 05/14/14 at 09:49 PM. Reason: added example code |
|
06/09/14, 02:22 PM | #6 |
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 c.label = wm:CreateControl(nil, c, CT_LABEL) c.label:SetDimensions(300,200) c.label:SetAnchor(CENTER, c, CENTER, 75, -150) c.label:SetFont(path .. "|" .. size .. "|" .. style) c.label:SetColor( 128,128,0,.5 ) c.label:SetHorizontalAlignment( CENTER ) c.label:SetVerticalAlignment( CENTER ) c.label:SetText ( "Changed mount status!" ) return c end function KillingBlow:simpleAnimation(controlToAnim, duration) local animation, timeline = CreateSimpleAnimation(ANIMATION_ALPHA, controlToAnim) print("setAlphaValues") animation:SetAlphaValues(controlToAnim:GetAlpha(), 1) --Nil value line controlToAnim:GetAlpha() print("SetDuration") animation:SetDuration(duration or 1000) timeline:SetPlaybackType(ANIMATION_PLAYBACK_ONE_SHOT) timeline:PlayFromStart() end |
|
ESOUI » Developer Discussions » Tutorials & Other Helpful Info » Animating controls |
«
Previous Thread
|
Next Thread
»
|
Display Modes |
Switch to Linear Mode |
Hybrid Mode |
Switch to Threaded Mode |
|
|