diff --git a/README.md b/README.md index 616a4ef..97f5c55 100644 --- a/README.md +++ b/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: diff --git a/monarch/transitions/gui.lua b/monarch/transitions/gui.lua index 836b34e..1e321e7 100644 --- a/monarch/transitions/gui.lua +++ b/monarch/transitions/gui.lua @@ -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,24 +78,45 @@ 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) - -- Forward on_message calls here - function instance.handle(message_id, message, sender) - if transitions[message_id] then - transitions[message_id](sender) + 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) + local transition = transitions[message_id] + if transition then + start_transition(transition, sender) + end + end + -- Specify the transition function when this node is transitioned -- to -- @param fn Transition function (see slide_in_left and other above) @@ -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