Quick question on transitions

Getting Started Newbie Questions
#1

Hi,

I’m currently at work so can’t test this myself in corona.

With transitions can you stack them up like:

Take a square at x=0

transition.to( square, { time=1000, x=20 } )  
transition.to( square, { time=1000, x=50 } )  
transition.to( square, { time=1000, x=100 } )

What will happen here? Will the second transition wait on the first to finish, and the third wait on the second? Or all attempt to run at the same time? Or will the only the 3rd one take effect?
If I want to stack them up to run one after the other would I be better using delay?

transition.to( square, { time=1000, x=20 } )  
transition.to( square, { time=1000, delay=1000, x=50 } )  
transition.to( square, { time=1000, delay=2000, x=100 } )

Any negatives in stacking this way? Could it be jerky/ be out of sync?

Potentially I have 100+ of these transitions to sync up, each happening 1 second after the next.
And I am wondering of the best solution, before I attempt anything

Thanks
[import]uid: 38562 topic_id: 32925 reply_id: 332925[/import]

#2

i have never tried your first way of stacking transitions

alltho the second way could work i would suggest to to a nested transition with functions

transition.to( square, { time=1000, x=20, onComplete = function ()   
 transition.to( square, { time=1000, x=50, onComplete = function ()  
 transition.to( square, { time=1000, x=100 onComplete = function ()  
 --and so on  
 end } )  
 end } )  
end } )

i suppose you cold put the coordinates in a table and do like this

xTable = {20,50,100}  
local i = 1  
  
local transitions = function (event )  
 if i \<= #xTable then   
 transition.to( square, { time=1000, x=xTable[i], onComplete = transitions } )  
 i = i + 1   
 end   
end

that’s the two examples i would use, no idea whats best but the second is more space efficient
[import]uid: 134049 topic_id: 32925 reply_id: 130799[/import]

#3

i have never tried your first way of stacking transitions

alltho the second way could work i would suggest to to a nested transition with functions

transition.to( square, { time=1000, x=20, onComplete = function ()   
 transition.to( square, { time=1000, x=50, onComplete = function ()  
 transition.to( square, { time=1000, x=100 onComplete = function ()  
 --and so on  
 end } )  
 end } )  
end } )

i suppose you cold put the coordinates in a table and do like this

xTable = {20,50,100}  
local i = 1  
  
local transitions = function (event )  
 if i \<= #xTable then   
 transition.to( square, { time=1000, x=xTable[i], onComplete = transitions } )  
 i = i + 1   
 end   
end

that’s the two examples i would use, no idea whats best but the second is more space efficient
[import]uid: 134049 topic_id: 32925 reply_id: 130799[/import]

#4

@tinnedtuna

I made a video answer to your question with the SSKCorona Sampler App

Here is the video link: http://www.youtube.com/watch?v=Ztu3V6ZB2Hs

The first snippet will act as if you only called the last line, whereas the second snippet will stack the transitions up over time.

In the video, pushing the green button is snippet #1, and pushing the red button is snippet #2.

I’ll release this Forums Help code and demo to the Source/Binary gitHUBs later today.

[import]uid: 110228 topic_id: 32925 reply_id: 130860[/import]

#5

@tinnedtuna

I made a video answer to your question with the SSKCorona Sampler App

Here is the video link: http://www.youtube.com/watch?v=Ztu3V6ZB2Hs

The first snippet will act as if you only called the last line, whereas the second snippet will stack the transitions up over time.

In the video, pushing the green button is snippet #1, and pushing the red button is snippet #2.

I’ll release this Forums Help code and demo to the Source/Binary gitHUBs later today.

[import]uid: 110228 topic_id: 32925 reply_id: 130860[/import]

#6

@Anakta posted the best solution (or something like it)… running successive transitions upon completion of the previous one. This also makes it much easier to manage the current transition, for example, if you need to cancel the transition (and thus the entire process).

Brent
[import]uid: 9747 topic_id: 32925 reply_id: 130886[/import]

#7

@Anakta posted the best solution (or something like it)… running successive transitions upon completion of the previous one. This also makes it much easier to manage the current transition, for example, if you need to cancel the transition (and thus the entire process).

Brent
[import]uid: 9747 topic_id: 32925 reply_id: 130886[/import]

#8

Thanks guys
I tried to use @Anakta 's method. But it calls the transition, but only the 1st transition on each shape works.

The other transitions all get instantly logged as well, as if the onComplete calls them instantally and doesnt wait for the transition to complete.

Am I using it wrong?

I’ve put together a demo of what I am talking about

--main.lua  
  
local shapeMove = { {30,38,45,24}, {65, 74, 88, 59}, {89, 102, 300, 90} }  
local shape = {}  
  
--function takes the shape to move, and which move it should do next  
local function transitions(shapeNum, move)  
 print("in transitions for shape "..shapeNum)  
 if move \<= #shapeMove then   
 print("move "..move.." moving shape "..shapeNum.." to x = "..40+shapeMove[move][shapeNum])  
 transition.to( shape[shapeNum], { time=1000, x=40+shapeMove[move][shapeNum], onComplete=transitions(shapeNum,move+1) } )  
 end   
end  
  
for i=1, 4 do  
 shape[i] = display.newRect(40, i\*50, 20, 20)  
end  
  
transitions(1,1)  
transitions(2,1)  
transitions(3,1)  
transitions(4,1)

run this and you’ll see the first transitions on screen, and the others are logged straight away, so onComplete seems to call it instantly, rather than after the transition.

Thanks! [import]uid: 38562 topic_id: 32925 reply_id: 130975[/import]

#9

Thanks guys
I tried to use @Anakta 's method. But it calls the transition, but only the 1st transition on each shape works.

The other transitions all get instantly logged as well, as if the onComplete calls them instantally and doesnt wait for the transition to complete.

Am I using it wrong?

I’ve put together a demo of what I am talking about

--main.lua  
  
local shapeMove = { {30,38,45,24}, {65, 74, 88, 59}, {89, 102, 300, 90} }  
local shape = {}  
  
--function takes the shape to move, and which move it should do next  
local function transitions(shapeNum, move)  
 print("in transitions for shape "..shapeNum)  
 if move \<= #shapeMove then   
 print("move "..move.." moving shape "..shapeNum.." to x = "..40+shapeMove[move][shapeNum])  
 transition.to( shape[shapeNum], { time=1000, x=40+shapeMove[move][shapeNum], onComplete=transitions(shapeNum,move+1) } )  
 end   
end  
  
for i=1, 4 do  
 shape[i] = display.newRect(40, i\*50, 20, 20)  
end  
  
transitions(1,1)  
transitions(2,1)  
transitions(3,1)  
transitions(4,1)

run this and you’ll see the first transitions on screen, and the others are logged straight away, so onComplete seems to call it instantly, rather than after the transition.

Thanks! [import]uid: 38562 topic_id: 32925 reply_id: 130975[/import]

#10

Hi, I have figured it out.

The onComplete call has to be a listener that just receives the object that the transition is moving.
I have stored the attrributes on the object, and then it gets passed to the listener. Which then can call another transition

Added a code sample for anyone that has the same issue

local shapeMove = { {30,38,45,24}, {65, 74, 88, 59}, {89, 102, 300, 90} }  
local shape = {}  
  
local function transitionListener(obj)  
 print("transition complete.... shape number "..obj.number.." moveNum "..obj.move)  
 obj.move = obj.move + 1  
 transitions(obj.number, obj.move)  
end  
  
function transitions(shapeNum, move)  
 print("in transitions for shape "..shapeNum)  
 if move \<= #shapeMove then   
 print("move "..move.." moving shape "..shapeNum.." to x = "..40+shapeMove[move][shapeNum].." current position = "..shape[shapeNum].x)  
 transition.to( shape[shapeNum], { time=1000, x=40+shapeMove[move][shapeNum], onComplete=transitionListener } )  
 end   
end  
  
for i=1, 4 do  
 shape[i] = display.newRect(40, i\*50, 20, 20)  
 shape[i].number = i  
 shape[i].move = 1  
end  
  
transitions(1,1)  
transitions(2,1)  
transitions(3,1)  
transitions(4,1)

Thanks [import]uid: 38562 topic_id: 32925 reply_id: 131039[/import]

#11

Hi, I have figured it out.

The onComplete call has to be a listener that just receives the object that the transition is moving.
I have stored the attrributes on the object, and then it gets passed to the listener. Which then can call another transition

Added a code sample for anyone that has the same issue

local shapeMove = { {30,38,45,24}, {65, 74, 88, 59}, {89, 102, 300, 90} }  
local shape = {}  
  
local function transitionListener(obj)  
 print("transition complete.... shape number "..obj.number.." moveNum "..obj.move)  
 obj.move = obj.move + 1  
 transitions(obj.number, obj.move)  
end  
  
function transitions(shapeNum, move)  
 print("in transitions for shape "..shapeNum)  
 if move \<= #shapeMove then   
 print("move "..move.." moving shape "..shapeNum.." to x = "..40+shapeMove[move][shapeNum].." current position = "..shape[shapeNum].x)  
 transition.to( shape[shapeNum], { time=1000, x=40+shapeMove[move][shapeNum], onComplete=transitionListener } )  
 end   
end  
  
for i=1, 4 do  
 shape[i] = display.newRect(40, i\*50, 20, 20)  
 shape[i].number = i  
 shape[i].move = 1  
end  
  
transitions(1,1)  
transitions(2,1)  
transitions(3,1)  
transitions(4,1)

Thanks [import]uid: 38562 topic_id: 32925 reply_id: 131039[/import]