Difference between revisions of "UI.Animation"

From GiderosMobile
(Created page with "__NOTOC__ === Description === Animates any given UI. <syntaxhighlight lang="lua"> UI.Animation:animate(widget,channel,animation,duration,parameters) </syntaxhighlight> === P...")
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 +
'''Available since:''' Gideros 2023.1<br/>
 +
'''Class:''' [[UI]]<br/>
  
 
=== 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)
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
''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 ===
 
=== Parameters ===
Line 12: Line 25:
 
'''animation''': (class) one of the available animation<br/>
 
'''animation''': (class) one of the available animation<br/>
 
'''duration''': (number) the animation duration<br/>
 
'''duration''': (number) the animation duration<br/>
−
'''parameters''': (table) additional animation parameters<br/>
+
'''parameters''': (table) additional animation parameters '''optional'''<br/>
  
 
=== Examples ===
 
=== Examples ===
 +
'''Sliding'''
 +
<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">
 
<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}}
+
{{UI}}

Latest revision as of 07:16, 17 October 2023

Available since: Gideros 2023.1
Class: UI

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
	}
)



Retrieved from ‘https://wiki.gideros.rocks/index.php?title=UI.Animation&oldid=22721’