Difference between revisions of "UI.Animation"
From GiderosMobile
| Line 2: | Line 2: | ||
=== Description === | === Description === | ||
| − | Animates any given UI. | + | Animates any given UI widget. |
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
UI.Animation:animate(widget,channel,animation,duration,parameters) | UI.Animation:animate(widget,channel,animation,duration,parameters) | ||
| Line 15: | Line 15: | ||
* onStop: a function to call when animation has finished | * onStop: a function to call when animation has finished | ||
* easing: with a ''type'' and a ''way'' | * easing: with a ''type'' and a ''way'' | ||
| − | ** '''type''': linear, quad, cubic, quart, quint, expo, sine, circ, back, steps, elastic, bounce, slowmo | + | ** '''type''': "linear", "quad", "cubic", "quart", "quint", "expo", "sine", "circ", "back", steps, elastic, bounce, slowmo |
** '''way''': out, inout, outin | ** '''way''': out, inout, outin | ||
| Line 26: | Line 26: | ||
=== Examples === | === Examples === | ||
| + | '''Sliding''' | ||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
| + | -- a Label widget | ||
| + | local gui = UI.Label.new("Gideros UI") | ||
| + | gui:setPosition(64,64) | ||
| + | stage:addChild(gui) | ||
| + | |||
| + | UI.Animation:animate(gui, "anim", UI.Animation.AnchorMove, 2, | ||
| + | { | ||
| + | x=-256, y=-128, | ||
| + | easing={type="circ", way="inout"}, -- out, inout, outin | ||
| + | onStop=function() | ||
| + | print("stopped") | ||
| + | end | ||
| + | } | ||
| + | ) | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | '''Zoom''' | ||
| + | <syntaxhighlight lang="lua"> | ||
| + | -- a Label widget | ||
| + | local gui = UI.Label.new("Gideros UI") | ||
| + | gui:setPosition(64,64) | ||
| + | stage:addChild(gui) | ||
| + | |||
| + | UI.Animation:animate(gui, "scale", UI.Animation.AnchorScale, 2, | ||
| + | { | ||
| + | easing={type="quint", way="in"}, | ||
| + | onStop=function() | ||
| + | print("stopped") | ||
| + | end | ||
| + | } | ||
| + | ) | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | '''Chained animations''' | ||
| + | <syntaxhighlight lang="lua"> | ||
| + | -- two Label widgets | ||
| + | local gui = UI.Label.new("Gideros UI 1") | ||
| + | local gui2 = UI.Label.new("Gideros UI 2") | ||
| + | gui:setPosition(64,64) | ||
| + | gui2:setPosition(64,64) | ||
| + | stage:addChild(gui) | ||
| + | stage:addChild(gui2) | ||
| + | |||
| + | UI.Animation:animate(gui, "move1", UI.Animation.AnchorMove, 2, | ||
| + | { | ||
| + | x=-256, | ||
| + | y=-128, | ||
| + | onStop=function() | ||
| + | print("stopped 1") | ||
| + | UI.Animation:animate(gui2, "move2", UI.Animation.AnchorMove, 1, | ||
| + | { | ||
| + | y=-128, | ||
| + | onStop=function() | ||
| + | print("stopped 2") | ||
| + | end | ||
| + | } | ||
| + | ) | ||
| + | end | ||
| + | } | ||
| + | ) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{GIDEROS IMPORTANT LINKS}} | {{GIDEROS IMPORTANT LINKS}} | ||
Revision as of 16:06, 13 October 2023
Description
Animates any given UI widget.
UI.Animation:animate(widget,channel,animation,duration,parameters)
animation can be any of the following:
- UI.Animation.AnchorMove, params: x, y
- UI.Animation.Alpha
- UI.Animation.AnchorScale
parameters can be any of the following:
- onStop: a function to call when animation has finished
- easing: with a type and a way
- type: "linear", "quad", "cubic", "quart", "quint", "expo", "sine", "circ", "back", steps, elastic, bounce, slowmo
- way: out, inout, outin
Parameters
widget: (sprite) the widget to animate
channel: (string) the animation channel
animation: (class) one of the available animation
duration: (number) the animation duration
parameters: (table) additional animation parameters optional
Examples
Sliding
-- a Label widget
local gui = UI.Label.new("Gideros UI")
gui:setPosition(64,64)
stage:addChild(gui)
UI.Animation:animate(gui, "anim", UI.Animation.AnchorMove, 2,
{
x=-256, y=-128,
easing={type="circ", way="inout"}, -- out, inout, outin
onStop=function()
print("stopped")
end
}
)
Zoom
-- a Label widget
local gui = UI.Label.new("Gideros UI")
gui:setPosition(64,64)
stage:addChild(gui)
UI.Animation:animate(gui, "scale", UI.Animation.AnchorScale, 2,
{
easing={type="quint", way="in"},
onStop=function()
print("stopped")
end
}
)
Chained animations
-- two Label widgets
local gui = UI.Label.new("Gideros UI 1")
local gui2 = UI.Label.new("Gideros UI 2")
gui:setPosition(64,64)
gui2:setPosition(64,64)
stage:addChild(gui)
stage:addChild(gui2)
UI.Animation:animate(gui, "move1", UI.Animation.AnchorMove, 2,
{
x=-256,
y=-128,
onStop=function()
print("stopped 1")
UI.Animation:animate(gui2, "move2", UI.Animation.AnchorMove, 1,
{
y=-128,
onStop=function()
print("stopped 2")
end
}
)
end
}
)
