Need a new set of scene transitions - revealSlideLeft, revealSlideRight, revealSlideUp, revealSlideDown

Hi Corona!

In my use of scene transitions, I noticed that there is a set that is missing from your list - namely a reveal type set.

What I’m looking for is this:

The current scene slides off in a given direction revealing the target scene underneath it.

Currently this type of transition can only be achieved by showing a scene as an overlay and then hiding the overlay. But I would also like this type of transition available in a normal gotoScene flow not just using overlays because overlays have the limitation of showing only one at a time. This means chaining together scene navigation off overlays is clumsy.

This new set of transitions could be named:

revealSlideLeft, revealSlideRight, revealSlideUp, revealSlideDown

Let me give you a scenario where this type of transition would be very useful:

  1. You have a scene for editing photos with a toolbar of buttons at the bottom.

  2. You have a button on that toolbar to change the image ratio which slides in a new scene from the left over top the current scene. This scene contains a list of ratios for selection. 

  3. When the user selects a ratio, the list scene slides back to the left and the image edit scene is once again revealed.

This gives the effect that the ratio list scene is a slide over menu - sliding in from the left and sliding back out to the left.

The only way to achieve this effect with current functionality is by using composer.showOverlay and not composer.gotoScene. 

Now imagine a scenario where I would like to upsell an inapp purchase from the ratio list scene. If the user touched this upsell I’d want to take them to a new scene displaying information about the purchase and the option to purchase it. If I were in an overlay flow, everything would get messed up because I would have to hide the overlay and then show the purchase details scene. If they hit the back button I would then have to go back to the edit photo scene and redisplay the ratio list scene already showing and not slide it out from the left again.

So you can see, it gets pretty complex trying to use composer.showOverlay when you want to chain scene navigation off the overlay scene.

If you had the scene transitions I am suggesting, it would fix this problem.

Please advise, thanks!

Did you check out the below blogpost?

http://coronalabs.com/blog/2014/12/23/tutorial-controlling-composer-scene-transitions/

@Alex - Thank you, exactly what I was looking for! :smiley:

For anyone interested, here are the custom transitions I described:

 revealSlideLeft = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = -display.contentWidth, yEnd = 0, }, }, revealSlideRight = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = display.contentWidth, yEnd = 0, }, }, revealSlideUp = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = 0, yEnd = -display.contentHeight, }, }, revealSlideDown = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = 0, yEnd = display.contentHeight, }, },

Did you check out the below blogpost?

http://coronalabs.com/blog/2014/12/23/tutorial-controlling-composer-scene-transitions/

@Alex - Thank you, exactly what I was looking for! :smiley:

For anyone interested, here are the custom transitions I described:

 revealSlideLeft = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = -display.contentWidth, yEnd = 0, }, }, revealSlideRight = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = display.contentWidth, yEnd = 0, }, }, revealSlideUp = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = 0, yEnd = -display.contentHeight, }, }, revealSlideDown = { sceneAbove = false, concurrent = true, to = { xStart = 0, yStart = 0, xEnd = 0, yEnd = 0, }, from = { xStart = 0, yStart = 0, xEnd = 0, yEnd = display.contentHeight, }, },