Multiple transition.to with pause

How to do a transition to one point, pause, and move to another point

  local square = display.newRect( 0,0, 100, 100 ) square:setFillColor( 255, 0, 0 )   transition.to( square, { time = 1500,  x = 300, y=500 } )   transition.to( square, { time = 1500,  x = 50, y=100 } )

You can use the delay parameter:

transition.to( square, { time = 1500,  x = 300, y=500 } )   transition.to( square, { delay=1000, time = 1500,  x = 50, y=100 } )

your code works fine

if i try to make a loop, it just work one time, why?

local square = display.newRect( 0,0, 100, 100 ) square:setFillColor( 255, 0, 0 )   for i = 1, 5 do transition.to( square, { time = 1500,  x = 300, y=500 } ) transition.to( square, { delay = 1000, time = 1500,  x = 50, y=100 } ) end

Transitions are asynchronous events.  That means as soon as you call it, it returns to you, so what you are really doing is queueing up 5 transition.to’s that move the square to x 300, y 500.  They all run at the same time so you only see it happening at once.  Then you queue up 5 more transition.to’s that wait a second then all 5 run at the same time. 

You can combine this with a timer that would fire at certain intervals maybe:

local function moveSquare()     transition.to( square, { time = 1500,  x = 300, y=500 } )     transition.to( square, { delay = 1000, time = 1500,  x = 50, y=100 } ) end   moveSquare() -- do the first more timer.performWithDelay(5000, moveSquare, 5)

This will run the function 5 times at 5 second intervals.  Why 5 seconds?  Two 1500ms transitions + a 1000 ms delay = 4000ms, but you probably want another 1000ms delay before the next one starts up to keep the pauses consistent.

Tanks for the lesson, now i understand the transition.to and the delay function

Corona is a wonderful development tool and the support in the forum is better

You can use the delay parameter:

transition.to( square, { time = 1500,  x = 300, y=500 } )   transition.to( square, { delay=1000, time = 1500,  x = 50, y=100 } )

your code works fine

if i try to make a loop, it just work one time, why?

local square = display.newRect( 0,0, 100, 100 ) square:setFillColor( 255, 0, 0 )   for i = 1, 5 do transition.to( square, { time = 1500,  x = 300, y=500 } ) transition.to( square, { delay = 1000, time = 1500,  x = 50, y=100 } ) end

Transitions are asynchronous events.  That means as soon as you call it, it returns to you, so what you are really doing is queueing up 5 transition.to’s that move the square to x 300, y 500.  They all run at the same time so you only see it happening at once.  Then you queue up 5 more transition.to’s that wait a second then all 5 run at the same time. 

You can combine this with a timer that would fire at certain intervals maybe:

local function moveSquare()     transition.to( square, { time = 1500,  x = 300, y=500 } )     transition.to( square, { delay = 1000, time = 1500,  x = 50, y=100 } ) end   moveSquare() -- do the first more timer.performWithDelay(5000, moveSquare, 5)

This will run the function 5 times at 5 second intervals.  Why 5 seconds?  Two 1500ms transitions + a 1000 ms delay = 4000ms, but you probably want another 1000ms delay before the next one starts up to keep the pauses consistent.

Tanks for the lesson, now i understand the transition.to and the delay function

Corona is a wonderful development tool and the support in the forum is better

hi Rob,

by reading this post i find partially the solution for me.

i would reproduce an animation at multiple time so i put a timer to prevent the asynchronous events. but it works two time. when i clic more than 2 times all my transitions run at the same time.

i have put a video below and my snippet. it would be cool if you could help me :slight_smile:

https://youtu.be/pqy3QjynvLw

local Backgroundinvisible = display.newImageRect("back01.png", display.actualContentWidth,display.actualContentHeight) Backgroundinvisible.myId = 200 Backgroundinvisible.x, Backgroundinvisible.y= display.actualContentWidth\*.5,display.actualContentHeight\*.5 Backgroundinvisible.alpha = 1 local mathr = math.random -------------------------------------------------------------------------------------------------------------------------------- -- NECESSARY -------------------------------------------------------------------------------------------------------------------------------- local numberofstarAnim = 3 local numberofstar = 30 local refX, refY = 200,200 -- STAR EXPLODE local star = {} for a=1,numberofstar do star[a] = display.newImageRect( "star.png",40,40 ) for i=1, numberofstar do star[a].x=mathr(100,300) star[a].y=mathr(100,300) end star[a].alpha = 0 --.5 star[a].xScale=1 star[a].yScale = 1 star[a].flag = true end --for local arm = {} for a= 1,#star do arm[a] = display.newImageRect( "arm.png",20,20 ) arm[a].x = refX arm[a].y = refY arm[a].anchorY = -1 arm[a].alpha = 0 arm[a].xScale=.3 arm[a].yScale = .8 arm[a].angle = nil arm[a].angleR = nil --radians arm[a].flag = true end--for local function starExplode() -- a= var local countStarExplode = 0--test starExplode for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then for a=1, b do print(a) arm[a].flag = false star[a].flag = false local function beginAnimStar() star[a].alpha = 1 --.5 arm[a].alpha = 1 end --beginAnimStar local function calculateTheOrientation() distY = star[a].y - refY distX = star[a].x - refX arm[a].angleR= math.atan2(distY, distX) arm[a].angle=(arm[a].angleR \* 180 / math.pi)-90 --convert radians to degree + perpendicular arm[a].rotation = arm[a].angle end--function calculateTheOrientation() beginAnimStar() local function finishTheTransition() local function returnFlagToStar() if star[a].flag == false and arm[a].flag == false then star[a].flag = true arm[a].flag = true end end star[a].transition=transition.to(star[a],{time=500,alpha =0, transition=easing.inElastic}) arm[a].transition=transition.to(arm[a],{time=500,alpha =0, onComplete=returnFlagToStar}) end--finishtheTransition timer.performWithDelay(1020, finishTheTransition) end--if end--if end--for end--function end -- -- LISTENER ----------------------------------------------------- local function tapOnBackground(event) --touchk if event.phase == "ended" then target = event.target if target.myId == 200 then starExplode() end --if end --if return true end Backgroundinvisible:addEventListener("touch", tapOnBackground)

You know, when you start a post “Hey Rob”, you’re probably missing the opportunity for the community to respond to you.  Instead you have to wait on me to show up and that can delay you getting answers.

You have a couple things going on.  First, your code is very, very hard to read.  You are not indenting your code (or it got lost posting) and with your comments at the end of the ends, they would indicate a problem.  Here is a more readable version of your code:

local function starExplode() -- a= var local countStarExplode = 0--test starExplode for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then for a=1, b do print(a) arm[a].flag = false star[a].flag = false local function beginAnimStar() star[a].alpha = 1 --.5 arm[a].alpha = 1 end --beginAnimStar local function calculateTheOrientation() distY = star[a].y - refY distX = star[a].x - refX arm[a].angleR= math.atan2(distY, distX) arm[a].angle=(arm[a].angleR \* 180 / math.pi)-90 --convert radians to degree + perpendicular arm[a].rotation = arm[a].angle end--function calculateTheOrientation() beginAnimStar() local function finishTheTransition() local function returnFlagToStar() if star[a].flag == false and arm[a].flag == false then star[a].flag = true arm[a].flag = true end end star[a].transition=transition.to(star[a],{time=500,alpha =0, transition=easing.inElastic}) arm[a].transition=transition.to(arm[a],{time=500,alpha =0, onComplete=returnFlagToStar}) end--finishtheTransition timer.performWithDelay(1020, finishTheTransition) end--if end--if end--for end--function end

Next problem.  Your “for a = 1, b do” line inside the “if countStarExplode…” statement is going to run as fast as it can which is going to queue up a number of timers equal to “b” that run 1.02 seconds later.  All “b” timers will fire at the same time, meaning all transitions are going to run at the same time.

Hello Rob ,

It is true that I never indent my code … a bad habit. In future I will do when I’ll post on the forum. By cons I do not understand anything. the goal is to filter stars and after applying to them a transition and thereby 3 by 3 .

it’s hard to explain (my mother tong is not english) so i put my snippet with comment :

for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then --if equal to 3 then for a=1, b do --waht i expect : for 1 to 3 do --the real behaviour is for 1 to all the star who have the flag on true ...but i don't understand why because "if (star[b].flag == true ) then" must be protected the others stars who are passing in transition and have so the flag on false and moreover i have put a specific transition to my character with star[a].transition = transition.to ...

then how to get the desired behavior and ensure that transitions are well in groups of 3 independently of each other ?

hi Rob,

by reading this post i find partially the solution for me.

i would reproduce an animation at multiple time so i put a timer to prevent the asynchronous events. but it works two time. when i clic more than 2 times all my transitions run at the same time.

i have put a video below and my snippet. it would be cool if you could help me :slight_smile:

https://youtu.be/pqy3QjynvLw

local Backgroundinvisible = display.newImageRect("back01.png", display.actualContentWidth,display.actualContentHeight) Backgroundinvisible.myId = 200 Backgroundinvisible.x, Backgroundinvisible.y= display.actualContentWidth\*.5,display.actualContentHeight\*.5 Backgroundinvisible.alpha = 1 local mathr = math.random -------------------------------------------------------------------------------------------------------------------------------- -- NECESSARY -------------------------------------------------------------------------------------------------------------------------------- local numberofstarAnim = 3 local numberofstar = 30 local refX, refY = 200,200 -- STAR EXPLODE local star = {} for a=1,numberofstar do star[a] = display.newImageRect( "star.png",40,40 ) for i=1, numberofstar do star[a].x=mathr(100,300) star[a].y=mathr(100,300) end star[a].alpha = 0 --.5 star[a].xScale=1 star[a].yScale = 1 star[a].flag = true end --for local arm = {} for a= 1,#star do arm[a] = display.newImageRect( "arm.png",20,20 ) arm[a].x = refX arm[a].y = refY arm[a].anchorY = -1 arm[a].alpha = 0 arm[a].xScale=.3 arm[a].yScale = .8 arm[a].angle = nil arm[a].angleR = nil --radians arm[a].flag = true end--for local function starExplode() -- a= var local countStarExplode = 0--test starExplode for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then for a=1, b do print(a) arm[a].flag = false star[a].flag = false local function beginAnimStar() star[a].alpha = 1 --.5 arm[a].alpha = 1 end --beginAnimStar local function calculateTheOrientation() distY = star[a].y - refY distX = star[a].x - refX arm[a].angleR= math.atan2(distY, distX) arm[a].angle=(arm[a].angleR \* 180 / math.pi)-90 --convert radians to degree + perpendicular arm[a].rotation = arm[a].angle end--function calculateTheOrientation() beginAnimStar() local function finishTheTransition() local function returnFlagToStar() if star[a].flag == false and arm[a].flag == false then star[a].flag = true arm[a].flag = true end end star[a].transition=transition.to(star[a],{time=500,alpha =0, transition=easing.inElastic}) arm[a].transition=transition.to(arm[a],{time=500,alpha =0, onComplete=returnFlagToStar}) end--finishtheTransition timer.performWithDelay(1020, finishTheTransition) end--if end--if end--for end--function end -- -- LISTENER ----------------------------------------------------- local function tapOnBackground(event) --touchk if event.phase == "ended" then target = event.target if target.myId == 200 then starExplode() end --if end --if return true end Backgroundinvisible:addEventListener("touch", tapOnBackground)

You know, when you start a post “Hey Rob”, you’re probably missing the opportunity for the community to respond to you.  Instead you have to wait on me to show up and that can delay you getting answers.

You have a couple things going on.  First, your code is very, very hard to read.  You are not indenting your code (or it got lost posting) and with your comments at the end of the ends, they would indicate a problem.  Here is a more readable version of your code:

local function starExplode() -- a= var local countStarExplode = 0--test starExplode for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then for a=1, b do print(a) arm[a].flag = false star[a].flag = false local function beginAnimStar() star[a].alpha = 1 --.5 arm[a].alpha = 1 end --beginAnimStar local function calculateTheOrientation() distY = star[a].y - refY distX = star[a].x - refX arm[a].angleR= math.atan2(distY, distX) arm[a].angle=(arm[a].angleR \* 180 / math.pi)-90 --convert radians to degree + perpendicular arm[a].rotation = arm[a].angle end--function calculateTheOrientation() beginAnimStar() local function finishTheTransition() local function returnFlagToStar() if star[a].flag == false and arm[a].flag == false then star[a].flag = true arm[a].flag = true end end star[a].transition=transition.to(star[a],{time=500,alpha =0, transition=easing.inElastic}) arm[a].transition=transition.to(arm[a],{time=500,alpha =0, onComplete=returnFlagToStar}) end--finishtheTransition timer.performWithDelay(1020, finishTheTransition) end--if end--if end--for end--function end

Next problem.  Your “for a = 1, b do” line inside the “if countStarExplode…” statement is going to run as fast as it can which is going to queue up a number of timers equal to “b” that run 1.02 seconds later.  All “b” timers will fire at the same time, meaning all transitions are going to run at the same time.

Hello Rob ,

It is true that I never indent my code … a bad habit. In future I will do when I’ll post on the forum. By cons I do not understand anything. the goal is to filter stars and after applying to them a transition and thereby 3 by 3 .

it’s hard to explain (my mother tong is not english) so i put my snippet with comment :

for b = 1, #star do if (star[b].flag == true ) then countStarExplode = countStarExplode + 1 if countStarExplode == numberofstarAnim then --if equal to 3 then for a=1, b do --waht i expect : for 1 to 3 do --the real behaviour is for 1 to all the star who have the flag on true ...but i don't understand why because "if (star[b].flag == true ) then" must be protected the others stars who are passing in transition and have so the flag on false and moreover i have put a specific transition to my character with star[a].transition = transition.to ...

then how to get the desired behavior and ensure that transitions are well in groups of 3 independently of each other ?