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:
- ANIMATION_ALPHA
- ANIMATION_COLOR
- ANIMATION_SCALE
- ANIMATION_SCROLL
- ANIMATION_SIZE
- ANIMATION_TRANSLATE
The self-explanatory types of directions are:
- ANIMATION_PLAYBACK_ONE_SHOT (default)
- ANIMATION_PLAYBACK_LOOP
- ANIMATION_PLAYBACK_PING_PONG
Let's start with a simple example using CreateSimpleAnimation (single animation):
Lua Code:
function simpleAnimation(control, duration)
local animation, timeline = CreateSimpleAnimation(ANIMATION_ALPHA, control)
-- start at current alpha
animation:SetAlphaValues(control:GetAlpha(), 1)
animation:SetDuration(duration or 1000)
timeline:SetPlaybackType(ANIMATION_PLAYBACK_ONE_SHOT)
timeline:PlayFromStart()
end
As you will notice, not defining an easing function will simply use linear.
Here's a list of easing functions provided by the API:
- ZO_BezierInEase
- ZO_BounceEase
- ZO_EaseInCubic
- ZO_EaseInOutCubic
- ZO_EaseInOutQuadratic
- ZO_EaseInOutQuartic
- ZO_EaseInOutQuintic
- ZO_EaseInQuadratic
- ZO_EaseInQuartic
- ZO_EaseInQuintic
- ZO_EaseOutCubic
- ZO_EaseOutQuadratic
- ZO_EaseOutQuartic
- ZO_EaseOutQuintic
- ZO_LinearEase (default)
To understand these easing functions, check out
http://easings.net/
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:
-- custom bouncing ("out back") easing
local myEasing = ZO_GenerateCubicBezierEase(.05, 1.85, .75, .75)
function timelineAnimation(control)
local isValidAnchor, point, relativeTo, relativePoint, offsetX, offsetY = control:GetAnchor()
local timeline = ANIMATION_MANAGER:CreateTimeline()
-- scale to 100% using our custom easing
local popup = timeline:InsertAnimation(ANIMATION_SCALE, control)
popup:SetScaleValues(0, 1)
popup:SetDuration(500)
popup:SetEasingFunction(myEasing)
-- animate opacity from 0% to 100%
local fadeIn = timeline:InsertAnimation(ANIMATION_ALPHA, control)
fadeIn:SetAlphaValues(0, 1)
fadeIn:SetDuration(150)
fadeIn:SetEasingFunction(ZO_EaseOutQuadratic)
-- begin fading out after 2 seconds
local fadeOut = timeline:InsertAnimation(ANIMATION_ALPHA, control, 2000)
fadeOut:SetAlphaValues(1, 0)
fadeOut:SetDuration(500)
-- begin to slide up after 2 seconds
local translate = timeline:InsertAnimation(ANIMATION_TRANSLATE, control, 2000)
translate:SetTranslateOffsets(offsetX, offsetY, offsetX, offsetY - 150)
translate:SetDuration(500)
translate:SetEasingFunction(ZO_EaseInQuadratic)
-- demonstration of timed callbacks
timeline:InsertCallback(function()
d('halfway')
end, timeline:GetDuration() / 2)
-- reset the control's position once the animation stops
timeline:SetHandler('OnStop', function()
d('stopped')
control:ClearAnchors()
control:SetAnchor(point, relativeTo, relativePoint, offsetX, offsetY)
end)
timeline:PlayFromStart()
end
I hope this tutorial clarified some of the less obvious things (cf.
http://wiki.esoui.com/Controls)