iOS 7 style scene transitions

Solar2D Composer
#1

If anyone would like to have iOS 7 style scene transitions in composer, here are a few lines of code that will add two new transition types to achieve this.

Just add the following code to your main.lua and you’ll have “iosSlideLeft” and “iosSlideRight” available.

You can use them anywhere as they’re added to the composer library.

Keep in mind that this doesn’t bring the iOS 7 swipe behavior to composer, however it’s at least better than the standard transitions if you want to achieve a more native look.

Example: iosSlideLeft would be used after selecting an item in a tableView, and iosSlideRight would be used when pressing the Back button.

You can play around with the different settings to fine-tune the transitions and scene positions if you’d like  :slight_smile: .

 composer = require("composer") composer.effectList["iosSlideLeft"] = { sceneAbove = true, concurrent = true, to = { xStart = display.contentWidth, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = -display.contentWidth \* 0.3, yEnd = 0, transition = easing.outQuad } } composer.effectList["iosSlideRight"] = { sceneAbove = false, concurrent = true, to = { xStart = -display.contentWidth \* 0.3, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = display.contentWidth, yEnd = 0, transition = easing.outQuad } }
#2

Nice contribution!

Rob

#3

Thanks for this. I’m still using Storyboard so I tried replacing “composer” with “storyboard” and it seems to be working fine. 

#4

I’m also working on a back-swipe library (lua library) that will add the ability to perform a standard back-swipe to go back to the previous scene (à la ios-7).

#5

For anyone wanting to keep an eye on the full swipe-back functionality: http://forums.coronalabs.com/topic/50488-ios-7-style-swipe-navigation/

Thanks @ingemar :slight_smile:

#6

Man, I love this so much more than the slideLeft/Right in my app. Corona should put this into their library.

#7

Glad you like it  B)

#8

Nice contribution!

Rob

#9

Thanks for this. I’m still using Storyboard so I tried replacing “composer” with “storyboard” and it seems to be working fine. 

#10

I’m also working on a back-swipe library (lua library) that will add the ability to perform a standard back-swipe to go back to the previous scene (à la ios-7).

#11

For anyone wanting to keep an eye on the full swipe-back functionality: http://forums.coronalabs.com/topic/50488-ios-7-style-swipe-navigation/

Thanks @ingemar :slight_smile:

#12

Man, I love this so much more than the slideLeft/Right in my app. Corona should put this into their library.

#13

Glad you like it  B)

#14

Hi ingemar,

Thanks for your contribution.

I’m trying to impement your code in my project. I have three scenes: a central one, one on the left and one on the right. I’d like the left and right ones to slide on top of the central one when transitioned to.

So far your code works good to have the right scene coming on the central one and the slide off when going to the previous scene, but when transitioning to the left scene this effect doesn’t render the same. I think it has to do with the coordinates fed into the ‘from’ and ‘to’ tables, but I can’t figure out what to change. Can you help me?

Thans again!!

#15

@akak

You’ll need two new effects.

I think something like this should work:

composer.effectList["displaySceneFromLeft"] = { sceneAbove = true, concurrent = true, to = { xStart = -display.contentWidth, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = display.contentWidth \* 0.3, yEnd = 0, transition = easing.outQuad } } composer.effectList["dismissSceneToLeft"] = { sceneAbove = false, concurrent = true, to = { xStart = display.contentWidth \* 0.3, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = -display.contentWidth, yEnd = 0, transition = easing.outQuad } }
#16

Thank you so much ingemar for such a prompt answer, that did it!!!

#17

:wink:

#18

Hi ingemar,

Thanks for your contribution.

I’m trying to impement your code in my project. I have three scenes: a central one, one on the left and one on the right. I’d like the left and right ones to slide on top of the central one when transitioned to.

So far your code works good to have the right scene coming on the central one and the slide off when going to the previous scene, but when transitioning to the left scene this effect doesn’t render the same. I think it has to do with the coordinates fed into the ‘from’ and ‘to’ tables, but I can’t figure out what to change. Can you help me?

Thans again!!

#19

@akak

You’ll need two new effects.

I think something like this should work:

composer.effectList["displaySceneFromLeft"] = { sceneAbove = true, concurrent = true, to = { xStart = -display.contentWidth, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = display.contentWidth \* 0.3, yEnd = 0, transition = easing.outQuad } } composer.effectList["dismissSceneToLeft"] = { sceneAbove = false, concurrent = true, to = { xStart = display.contentWidth \* 0.3, yStart = 0, xEnd = 0, yEnd = 0, transition = easing.outQuad }, from = { xStart = 0, yStart = 0, xEnd = -display.contentWidth, yEnd = 0, transition = easing.outQuad } }
#20

Thank you so much ingemar for such a prompt answer, that did it!!!