09/15/14, 12:01 AM | #1 |
Animation Tutorial Request
Hey folks, I'd like to put a bounty out for a simple tutorial on using the ESO AnimationManager and/or AnimationObjects. If anyone is familiar with these functions, I would love to see a brief code snippet that explains the how to instantiate an animation object, associate it with a control, and fire the animation.
For example, maybe a quick how-to on transitioning the alpha of control from 0 to 1 over a 2 second duration? This would be really helpful if anyone understands it enough to share some tricks! |
|
09/15/14, 04:43 AM | #2 | |
http://www.esoui.com/forums/showthread.php?t=1191 I use a simple alpha animation in Bloody Screen addon, but I do not use AnimationManager directly, I'm using ZO_AlphaAnimation object. Lua Code:
Code:
Arguments: delay, duration - milliseconds fadeOption - ZO_ALPHA_ANIMATION_OPTION_USE_CURRENT_ALPHA or ZO_ALPHA_ANIMATION_OPTION_FORCE_ALPHA callback - function which will be called when animation finishes showOption - ZO_ALPHA_ANIMATION_OPTION_USE_CURRENT_SHOWN or ZO_ALPHA_ANIMATION_OPTION_FORCE_SHOWN stopOption - ZO_ALPHA_ANIMATION_OPTION_PREVENT_CALLBACK or nil Lua Code:
Last edited by Garkin : 09/15/14 at 05:30 AM. |
||
09/15/14, 05:08 AM | #3 |
You are in luck as this is exactly what I did yesterday.
I tried to make a small addon that allows my actionbar to fade to 20% instead of completely vanishing from screen when I set it to automatic in the settings. First we need to create a timeline. This can either be done in lua or xml, but I personally think xml might bit a bit more readable for animations. Code:
<GuiXml> <Animations> <AnimationTimeline name="MyActionBarFadeAnimation"> <Animations> <AlphaAnimation duration="200" startAlpha="0.0" endAlpha="1.0" /> </Animations> </AnimationTimeline> </Animations> </GuiXml> Next step is to instantiate this timeline. We also need to get a reference to the alpha animation as we want to set the alpha values in lua so we can add a settings panel in the future. Code:
local startAlpha, endAlpha = 0.2, 0.8 -- we also set it to 80% transparency so it is see through when it is active local animation = ANIMATION_MANAGER:CreateTimelineFromVirtual("MyActionBarFadeAnimation") local alphaAnimation = animation:GetFirstAnimation() alphaAnimation:SetAlphaValues(startAlpha, endAlpha) The actionbar already uses a fade animation and calls SetHidden once it has finished fading out. So in order to get this animation to work there are some things we have to do:
Replacing the animation is not hard. The action bar uses a ZO_HUDFadeSceneFragment which has a method GetAnimation that returns self.animation, so all we have to do is set the animation field and apply the animation to the control element. Code:
ACTION_BAR_FRAGMENT.animation = animation animation:ApplyAllAnimationsToControl(ACTION_BAR_FRAGMENT.control) The ZO_HUDFadeSceneFragment calls SetHidden in two places ACTION_BAR_FRAGMENT.animationReverseOnStop and ACTION_BAR_FRAGMENT.Show. We simply replace animationReverseOnStop with a custom method: Code:
local hidden = true -- we use this to replace the logic of SetHidden, otherwise the action bar will behave weirdly ACTION_BAR_FRAGMENT.animationReverseOnStop = function(timeline, completed) if(completed) then hidden = true control:SetAlpha(startAlpha) ACTION_BAR_FRAGMENT:OnHidden() end end Code:
ZO_PreHook(ACTION_BAR_FRAGMENT, "Show", function(self, customShowDuration) if(not animation:IsPlaying()) then if(hidden) then hidden = false animation:SetHandler("OnStop", self.animationOnStop) alphaAnimation:SetDuration(customShowDuration or self.showDuration) animation:PlayFromStart() end return true -- this prevents the original method from running end end) Code:
control:SetHidden(false) control:SetAlpha(startAlpha) To fix this we add a callback to scenemanager and listen for the hud changing its state: Code:
local hud = SCENE_MANAGER:GetScene("hud") -- default hud scene local hudui = SCENE_MANAGER:GetScene("hudui") -- mouse enabled hud scene SCENE_MANAGER:RegisterCallback("SceneStateChanged", function(scene, oldState, newState) if(scene == hud or scene == hudui) then control:SetHidden(not (hud:IsShowing() or hudui:IsShowing())) end end) As you can see from this example, animations are quite simple to use.
Warning: Spoiler
Code:
local startAlpha, endAlpha = 0.2, 0.8 local control = ACTION_BAR_FRAGMENT.control local animation = ANIMATION_MANAGER:CreateTimelineFromVirtual("MyActionBarFadeAnimation") local alphaAnimation = animation:GetFirstAnimation() alphaAnimation:SetAlphaValues(startAlpha, endAlpha) local hidden = true ACTION_BAR_FRAGMENT.animationReverseOnStop = function(timeline, completed) if(completed) then hidden = true control:SetAlpha(startAlpha) ACTION_BAR_FRAGMENT:OnHidden() end end ZO_PreHook(ACTION_BAR_FRAGMENT, "Show", function(self, customShowDuration) if(not animation:IsPlaying()) then if(hidden) then hidden = false animation:SetHandler("OnStop", self.animationOnStop) alphaAnimation:SetDuration(customShowDuration or self.showDuration) animation:PlayFromStart() end return true end end) animation:ApplyAllAnimationsToControl(control) control:SetHidden(false) control:SetAlpha(startAlpha) ACTION_BAR_FRAGMENT.animation = animation local hud = SCENE_MANAGER:GetScene("hud") local hudui = SCENE_MANAGER:GetScene("hudui") SCENE_MANAGER:RegisterCallback("SceneStateChanged", function(scene, oldState, newState) if(scene == hud or scene == hudui) then control:SetHidden(not (hud:IsShowing() or hudui:IsShowing())) end end) Last edited by sirinsidiator : 09/15/14 at 05:13 AM. |
|
09/15/14, 12:09 PM | #4 |
Thank you both very much, extremely helpful!
|
|
ESOUI » Developer Discussions » Lua/XML Help » Animation Tutorial Request |
«
Previous Thread
|
Next Thread
»
|
Thread Tools | |
Display Modes | |
|
|