mirror of
https://github.com/britzl/monarch.git
synced 2025-06-27 10:27:49 +02:00
Improved the transition module
The transition module will now properly handle if the same transition is started more than once before completed. In such a case only one animation will be played but all senders will be notified when completed.
This commit is contained in:
Björn Ritzl
parent
1d476424ce
commit
6474c9a173
32
README.md
32
README.md
@ -82,7 +82,9 @@ You can add optional transitions when navigating between screens. The default be
|
||||
* ```transition_back_in```
|
||||
* ```transition_back_out```
|
||||
|
||||
When a transition is completed it is up to the developer to send a ```transition_done``` message back to the sender to indicate that the transition is completed and that Monarch can continue the navigation sequence. Monarch comes with a system for setting up transitions easily in a gui_script. Example:
|
||||
When a transition is completed it is up to the developer to send a ```transition_done``` message back to the sender to indicate that the transition is completed and that Monarch can continue the navigation sequence.
|
||||
|
||||
Monarch comes with a system for setting up transitions easily in a gui_script using the ```monarch.transitions.gui``` module. Example:
|
||||
|
||||
local transitions = require "monarch.transitions.gui"
|
||||
|
||||
@ -101,6 +103,34 @@ When a transition is completed it is up to the developer to send a ```transition
|
||||
self.transition.handle(message_id, message, sender)
|
||||
end
|
||||
|
||||
### Predefined transitions
|
||||
The predefined transitions provided by ```monarch.transitions.gui``` are:
|
||||
|
||||
* ```slide_in_right```
|
||||
* ```slide_in_left```
|
||||
* ```slide_in_top```
|
||||
* ```slide_in_bottom```
|
||||
* ```slide_out_right```
|
||||
* ```slide_out_left```
|
||||
* ```slide_out_top```
|
||||
* ```slide_out_bottom```
|
||||
* ```scale_in```
|
||||
* ```scale_out```
|
||||
|
||||
### Custom transitions
|
||||
You can create and use your own transition as long as the provided transition function has the following function signature:
|
||||
|
||||
custom_transition(node, to, easing, duration, delay, cb)
|
||||
|
||||
**PARAMETERS**
|
||||
* ```node``` (node) - Gui node to animate.
|
||||
* ```to``` (vector3) - Target position.
|
||||
* ```easing``` (number) - One of gui.EASING_* constants.
|
||||
* ```duration``` (number) - Transition duration in seconds.
|
||||
* ```delay``` (number) - Transition delay in seconds.
|
||||
* ```cb``` (function) - This function must be called when the transition is completed.
|
||||
|
||||
|
||||
## Screen focus gain/loss
|
||||
Monarch will send focus gain and focus loss messages if a Focus Url was provided when the screen was created. The focus gained message will contain the id of the previous screen and the focus loss message will contain the id of the next screen. Example:
|
||||
|
||||
|
||||
@ -12,71 +12,63 @@ local BOTTOM = vmath.vector3(0, - HEIGHT * 2, 0)
|
||||
|
||||
local ZERO_SCALE = vmath.vector3(0, 0, 1)
|
||||
|
||||
function M.instant(node, to, easing, duration, delay, url)
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
function M.instant(node, to, easing, duration, delay, cb)
|
||||
cb()
|
||||
end
|
||||
|
||||
local function slide_in(direction, node, to, easing, duration, delay, url)
|
||||
local function slide_in(direction, node, to, easing, duration, delay, cb)
|
||||
local from = to + direction
|
||||
gui.set_position(node, from)
|
||||
gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, function()
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
end)
|
||||
gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_in_left(node, to, easing, duration, delay, url)
|
||||
return slide_in(LEFT, node, to.pos, easing, duration, delay, url)
|
||||
function M.slide_in_left(node, to, easing, duration, delay, cb)
|
||||
return slide_in(LEFT, node, to.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_in_right(node, to, easing, duration, delay, url)
|
||||
slide_in(RIGHT, node, to.pos, easing, duration, delay, url)
|
||||
function M.slide_in_right(node, to, easing, duration, delay, cb)
|
||||
slide_in(RIGHT, node, to.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_in_top(node, to, easing, duration, delay, url)
|
||||
slide_in(TOP, node, to.pos, easing, duration, delay, url)
|
||||
function M.slide_in_top(node, to, easing, duration, delay, cb)
|
||||
slide_in(TOP, node, to.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_in_bottom(node, to, easing, duration, delay, url)
|
||||
slide_in(BOTTOM, node, to.pos, easing, duration, delay, url)
|
||||
function M.slide_in_bottom(node, to, easing, duration, delay, cb)
|
||||
slide_in(BOTTOM, node, to.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
|
||||
local function slide_out(direction, node, from, easing, duration, delay, url)
|
||||
local function slide_out(direction, node, from, easing, duration, delay, cb)
|
||||
local to = from + direction
|
||||
gui.set_position(node, from)
|
||||
gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, function()
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
end)
|
||||
gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_out_left(node, from, easing, duration, delay, url)
|
||||
slide_out(LEFT, node, from.pos, easing, duration, delay, url)
|
||||
function M.slide_out_left(node, from, easing, duration, delay, cb)
|
||||
slide_out(LEFT, node, from.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_out_right(node, from, easing, duration, delay, url)
|
||||
slide_out(RIGHT, node, from.pos, easing, duration, delay, url)
|
||||
function M.slide_out_right(node, from, easing, duration, delay, cb)
|
||||
slide_out(RIGHT, node, from.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_out_top(node, from, easing, duration, delay, url)
|
||||
slide_out(TOP, node, from.pos, easing, duration, delay, url)
|
||||
function M.slide_out_top(node, from, easing, duration, delay, cb)
|
||||
slide_out(TOP, node, from.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.slide_out_bottom(node, from, easing, duration, delay, url)
|
||||
slide_out(BOTTOM, node, from.pos, easing, duration, delay, url)
|
||||
function M.slide_out_bottom(node, from, easing, duration, delay, cb)
|
||||
slide_out(BOTTOM, node, from.pos, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.scale_in(node, to, easing, duration, delay, url)
|
||||
function M.scale_in(node, to, easing, duration, delay, cb)
|
||||
gui.set_scale(node, ZERO_SCALE)
|
||||
gui.animate(node, gui.PROP_SCALE, to.scale, easing, duration, delay, function()
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
end)
|
||||
gui.animate(node, gui.PROP_SCALE, to.scale, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
function M.scale_out(node, from, easing, duration, delay, url)
|
||||
function M.scale_out(node, from, easing, duration, delay, cb)
|
||||
gui.set_scale(node, from.scale)
|
||||
gui.animate(node, gui.PROP_SCALE, ZERO_SCALE, easing, duration, delay, function()
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
end)
|
||||
gui.animate(node, gui.PROP_SCALE, ZERO_SCALE, easing, duration, delay, cb)
|
||||
end
|
||||
|
||||
--- Create a transition for a node
|
||||
@ -86,21 +78,42 @@ function M.create(node)
|
||||
|
||||
local instance = {}
|
||||
|
||||
local transitions = {
|
||||
[monarch.TRANSITION.SHOW_IN] = M.instant,
|
||||
[monarch.TRANSITION.SHOW_OUT] = M.instant,
|
||||
[monarch.TRANSITION.BACK_IN] = M.instant,
|
||||
[monarch.TRANSITION.BACK_OUT] = M.instant,
|
||||
}
|
||||
local transitions = {}
|
||||
|
||||
local initial_data = {}
|
||||
initial_data.pos = gui.get_position(node)
|
||||
initial_data.scale = gui.get_scale(node)
|
||||
|
||||
local function create_transition(fn, easing, duration, delay)
|
||||
return {
|
||||
fn = fn,
|
||||
easing = easing,
|
||||
duration = duration,
|
||||
delay = delay,
|
||||
in_progress = false,
|
||||
urls = {},
|
||||
}
|
||||
end
|
||||
|
||||
local function start_transition(transition, url)
|
||||
table.insert(transition.urls, url)
|
||||
if not transition.in_progress then
|
||||
transition.in_progress = true
|
||||
transition.fn(node, initial_data, transition.easing, transition.duration, transition.delay or 0, function()
|
||||
transition.in_progress = false
|
||||
while #transition.urls > 0 do
|
||||
local url = table.remove(transition.urls)
|
||||
msg.post(url, monarch.TRANSITION.DONE)
|
||||
end
|
||||
end)
|
||||
end
|
||||
end
|
||||
|
||||
-- Forward on_message calls here
|
||||
function instance.handle(message_id, message, sender)
|
||||
if transitions[message_id] then
|
||||
transitions[message_id](sender)
|
||||
local transition = transitions[message_id]
|
||||
if transition then
|
||||
start_transition(transition, sender)
|
||||
end
|
||||
end
|
||||
|
||||
@ -111,39 +124,37 @@ function M.create(node)
|
||||
-- @param duration Transition duration
|
||||
-- @param delay Transition delay
|
||||
function instance.show_in(fn, easing, duration, delay)
|
||||
transitions[monarch.TRANSITION.SHOW_IN] = function(url)
|
||||
fn(node, initial_data, easing, duration, delay or 0, url)
|
||||
end
|
||||
transitions[monarch.TRANSITION.SHOW_IN] = create_transition(fn, easing, duration, delay)
|
||||
return instance
|
||||
end
|
||||
|
||||
-- Specify the transition function when this node is transitioned
|
||||
-- from when showing another screen
|
||||
function instance.show_out(fn, easing, duration, delay)
|
||||
transitions[monarch.TRANSITION.SHOW_OUT] = function(url)
|
||||
fn(node, initial_data, easing, duration, delay or 0, url)
|
||||
end
|
||||
transitions[monarch.TRANSITION.SHOW_OUT] = create_transition(fn, easing, duration, delay)
|
||||
return instance
|
||||
end
|
||||
|
||||
--- Specify the transition function when this node is transitioned
|
||||
-- to when navigating back in the screen stack
|
||||
function instance.back_in(fn, easing, duration, delay)
|
||||
transitions[monarch.TRANSITION.BACK_IN] = function(url)
|
||||
fn(node, initial_data, easing, duration, delay or 0, url)
|
||||
end
|
||||
transitions[monarch.TRANSITION.BACK_IN] = create_transition(fn, easing, duration, delay)
|
||||
return instance
|
||||
end
|
||||
|
||||
--- Specify the transition function when this node is transitioned
|
||||
-- from when navigating back in the screen stack
|
||||
function instance.back_out(fn, easing, duration, delay)
|
||||
transitions[monarch.TRANSITION.BACK_OUT] = function(url)
|
||||
fn(node, initial_data, easing, duration, delay or 0, url)
|
||||
end
|
||||
transitions[monarch.TRANSITION.BACK_OUT] = create_transition(fn, easing, duration, delay)
|
||||
return instance
|
||||
end
|
||||
|
||||
-- set default transitions (instant)
|
||||
instance.show_in(M.instant)
|
||||
instance.show_out(M.instant)
|
||||
instance.back_in(M.instant)
|
||||
instance.back_out(M.instant)
|
||||
|
||||
return instance
|
||||
end
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user