how to have 2 or more animations simultaneously ?

[bexphones]

Hi, 
I would like to know what’s the best way to have simultaneous 2 or more animations from touch.

To avoid conflict between object(particle)  : i use a flag but if i would like to have 2animations on the same time, how do you do about that ? Thanks for your advice.

My simplified snippet looks like:

local flagAnimCenter =true local background = ... local particle={} .... local function AnimCenter(d) if flagAnimCenter then --to prevent conflict between two transition flagAnimCenter =false local function resetdefault() for s=1,#particle do transition.to(particle[s], {time=1000, alpha=0,x=d.x, y=d.y, xScale=1, yScale=1}) flagAnimCenter=true --to reset the function animcenter to start end --for end --function resetdefault for s=1,#particle do transition.to(particle[s], {time=1000, alpha=1,x=d.x, y=d.y,xScale=.1, yScale=.1, onComplete=resetdefault}) end --for end--if end--function

local function tapOnCharacter(event) if event.phase == "ended" then Animcenter() end --if end --function background[i]:addEventListener("touch", tapOnCharacter)

[bjsorrentino]

Hi @bexphones,

I’m curious what particle engine/emitters you’re using. Are you generating these manually? If so, have you considered using Corona’s built-in particle engine or the 3rd-party CBEffects library?

Best regards,

Brent

[bexphones]

Hi Brent, 

Forget my previous post i don’t use particle, i use object’s, I misspoke … 

What i want is have two animations almost simultaneously considering that the time to complete each animation is long.(time=100000)

Is what I have to create a new animation to each event ? is not it a bit heavy memory level? are there not a better method?

local flagAnim =true local background = ... local objectforanim=... local function AnimObject(d) if flagAnim then --to prevent conflict between two transition flagAnim =false local function resetDefault() transition.to(objectforanim, {time=100000, alpha=0,x=d.x, y=d.y, xScale=1, yScale=1}) flagAnim=true --to reset the function AnimObject to start end --function resetdefault transition.to(objectforanim, {time=100000, alpha=1,x=d.x, y=d.y,xScale=.1, yScale=.1, onComplete=resetDefault}) end--if end--function local function tapOnBackground(event) if event.phase == "ended" then AnimObject() end --if end --function background:addEventListener("touch", tapOnBackground)

[bjsorrentino]

Hi @bexphones,

You should reference the animated/transitioning object specificially along with the “onComplete” event, versus trying to associate which one it might be by constantly re-defining the “objectforanim” variable. See the following document (example at bottom) on how you can read the “obj” in the onComplete event, then use that to send the object back to its starting state.

http://docs.coronalabs.com/api/library/transition/to.html

Best regards,

Brent

[bexphones]

Hi Brent,

in fact i would reproduce this animation :

This animation must be call every time i need. As you see this animation is a litlle complex. I make it with images :
The cicle who explode is a image mask with a transition on an invisible object + runtime listener on the mask and the stars is simply object who moves.

Here the snippet for the circle who explode :

local circleeffect = display.newImageRect(“c1.png”,200,200)
circleeffect.x=200
circleeffect.y=200
circleeffect.xScale=.4
circleeffect.yScale=.4
circleeffect.alpha=.5

local circletohide = display.newImageRect(“c2.png”,100,100)
circletohide.x=200
circletohide.y=200
circletohide.xScale=.1
circletohide.yScale=.1

local mask = graphics.newMask( “circletohide.png” )
circleeffect:setMask( mask )

circleeffect.maskScaleX=1
circleeffect.maskScaleY=1

circletohide.alpha = 0
transition.to(circletohide, {time=2500, xScale=2, yScale=2,alpha=0})
transition.to(circleeffect, {time=500, alpha=.2})

local function followcirlemask(event)
print(“circletohide.xScale”,circletohide.xScale)
circleeffect.maskScaleX=circletohide.xScale
circleeffect.maskScaleY=circletohide.xScale
return circletohide.maskYscale, circletohide.maskXscale
end

Runtime:addEventListener(“enterFrame”,followcirlemask)

I could use the incomplete function but then i need object on a table view to call them who are not busy in transition…

Could you take me some advices to do that and choose the best way for the achievement ?

Thanks a lot

[bjsorrentino]

Hi @bexphones,

I don’t fully understand why you need a mask and all of that. Why not just use an animated sprite? Alternatively, how about a particle emitter which emits the stars? The latter would produce a more randomized effect but it could still work nicely.

Brent

[bexphones]

Hi Brent,

it’s done with simply transitions.

Now i must put something like this if i want to have multiple animation on the same time

group1 = star,  1 to 5

group2= star 6 to 11

group3 = star 12 to 17

if group1 ==  flagbusy then

transitionongroup2

else

transitionongroup3

is alright ?

-------------------------------------------------------- -- necessary --- -------------------------------------------------------- local myGroupst = display.newGroup( ) --group star local mathr = math.random local refX = display.contentWidth\*.5 local refY = display.contentHeight\*.5 local numberofstar = 8 local BackgroundBack = display.newImageRect( "back02.png",360,768) BackgroundBack.x = display.actualContentWidth\*0.5 BackgroundBack.y = display.actualContentHeight\*0.5 BackgroundBack.xScale = 1 BackgroundBack.yScale = 1 -------------------------------------------------------- -- CIrcle who explode --- -------------------------------------------------------- local circleeffect = display.newImageRect("c1.png",200,200) --circle with color of explosion circleeffect.x=refX circleeffect.y=refY circleeffect.xScale=.5 circleeffect.yScale=.5 circleeffect.alpha=.5 local circletohide = display.newImageRect("c2.png",100,100) --invisible circle circletohide.x=refX circletohide.y=refY circletohide.xScale=.02 circletohide.yScale=.02 local circleannular = display.newImageRect("c3.png",100,100) --shock wave circleannular.x=refX circleannular.y=refY circleannular.xScale=.02 circleannular.yScale=.02 local mask = graphics.newMask( "circletohide.png" ) --the mask circleeffect:setMask( mask ) circleeffect.maskScaleX=1 circleeffect.maskScaleY=1 circletohide.alpha = 0 transition.to(circletohide, {time=2100,delay=120, xScale=3, yScale=3,alpha=0}) transition.to(circleeffect, {time=1000,delay=0, alpha=.3}) transition.to(circleannular, {time=1000,delay=0, xScale=1.5, yScale=1.5,alpha=0}) local function followcirlemask(event) --function to follow the circlehide and assing that on the mask print("circletohide.xScale",circletohide.xScale) circleeffect.maskScaleX=circletohide.xScale circleeffect.maskScaleY=circletohide.xScale return circletohide.maskYscale, circletohide.maskXscale end Runtime:addEventListener("enterFrame",followcirlemask) -------------------------------------------------------- -- star --- -------------------------------------------------------- local st = {} for a= 1,numberofstar do st[a] = display.newImageRect( "star.png",40,40 ) st[a].x = refX st[a].y = refY st[a].alpha = .5 st[a].xScale=mathr(5,10)\*0.1 st[a].yScale = st[a].xScale st[a].clic = true end for u=1, #st do st[u].complx = mathr(-50,50) st[u].comply = mathr(-50,50) print(st[u].compl) st[u].xend = refX+st[u].complx st[u].yend = refY+st[u].comply end local arm = {} for a= 1,#st do arm[a] = display.newImageRect( "arm.png",20,20 ) arm[a].x = refX arm[a].y = refY arm[a].anchorY = 1 arm[a].alpha = 1 arm[a].xScale=.3 arm[a].yScale = .8 arm[a].angle = nil arm[a].angleR = nil --radians arm[a].clic = true end--for local function calculate(a) distY = st[a].yend - refY distX = st[a].xend - 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].hypo = math.sqrt(distX\*distX+distY\*distY) print(refX, refY, distX, distY, arm[a].angle ) end--function -------------------------------------------------------- -- transtion on star and arm --- -------------------------------------------------------- for a=1,#st do local function finishthetransition() transition.to(st[a],{time=600,alpha =0,xScale=0, yScale=0, transition=easing.inElastic}) transition.to(arm[a],{time=600,alpha =0,}) end--function finishthe... calculate(a) --initiate the arm and st \>\>star arm[a]:rotate( arm[a].angle ) arm[a].alpha = 1 arm[a].x, arm[a].y = st[a].xend, st[a].yend st[a].alpha =.2 transition.to(st[a],{x=st[a].xend,y=st[a].yend,delay=0, time=120,alpha =.8, onComplete = finishthetransition}) transition.to(arm[a],{time=120,alpha =1,yScale=1.2,onComplete = finishthetransition}) end--for

[bjsorrentino]

Hi @bexphones,

I’m curious what particle engine/emitters you’re using. Are you generating these manually? If so, have you considered using Corona’s built-in particle engine or the 3rd-party CBEffects library?

Best regards,

Brent

[bexphones]

Hi Brent, 

Forget my previous post i don’t use particle, i use object’s, I misspoke … 

What i want is have two animations almost simultaneously considering that the time to complete each animation is long.(time=100000)

Is what I have to create a new animation to each event ? is not it a bit heavy memory level? are there not a better method?

local flagAnim =true local background = ... local objectforanim=... local function AnimObject(d) if flagAnim then --to prevent conflict between two transition flagAnim =false local function resetDefault() transition.to(objectforanim, {time=100000, alpha=0,x=d.x, y=d.y, xScale=1, yScale=1}) flagAnim=true --to reset the function AnimObject to start end --function resetdefault transition.to(objectforanim, {time=100000, alpha=1,x=d.x, y=d.y,xScale=.1, yScale=.1, onComplete=resetDefault}) end--if end--function local function tapOnBackground(event) if event.phase == "ended" then AnimObject() end --if end --function background:addEventListener("touch", tapOnBackground)

[bjsorrentino]

Hi @bexphones,

You should reference the animated/transitioning object specificially along with the “onComplete” event, versus trying to associate which one it might be by constantly re-defining the “objectforanim” variable. See the following document (example at bottom) on how you can read the “obj” in the onComplete event, then use that to send the object back to its starting state.

http://docs.coronalabs.com/api/library/transition/to.html

Best regards,

Brent

[bexphones]

Hi Brent,

in fact i would reproduce this animation :

This animation must be call every time i need. As you see this animation is a litlle complex. I make it with images :
The cicle who explode is a image mask with a transition on an invisible object + runtime listener on the mask and the stars is simply object who moves.

Here the snippet for the circle who explode :

local circleeffect = display.newImageRect(“c1.png”,200,200)
circleeffect.x=200
circleeffect.y=200
circleeffect.xScale=.4
circleeffect.yScale=.4
circleeffect.alpha=.5

local circletohide = display.newImageRect(“c2.png”,100,100)
circletohide.x=200
circletohide.y=200
circletohide.xScale=.1
circletohide.yScale=.1

local mask = graphics.newMask( “circletohide.png” )
circleeffect:setMask( mask )

circleeffect.maskScaleX=1
circleeffect.maskScaleY=1

circletohide.alpha = 0
transition.to(circletohide, {time=2500, xScale=2, yScale=2,alpha=0})
transition.to(circleeffect, {time=500, alpha=.2})

local function followcirlemask(event)
print(“circletohide.xScale”,circletohide.xScale)
circleeffect.maskScaleX=circletohide.xScale
circleeffect.maskScaleY=circletohide.xScale
return circletohide.maskYscale, circletohide.maskXscale
end

Runtime:addEventListener(“enterFrame”,followcirlemask)

I could use the incomplete function but then i need object on a table view to call them who are not busy in transition…

Could you take me some advices to do that and choose the best way for the achievement ?

Thanks a lot

[bjsorrentino]

Hi @bexphones,

I don’t fully understand why you need a mask and all of that. Why not just use an animated sprite? Alternatively, how about a particle emitter which emits the stars? The latter would produce a more randomized effect but it could still work nicely.

Brent

[bexphones]

Hi Brent,

it’s done with simply transitions.

Now i must put something like this if i want to have multiple animation on the same time

group1 = star,  1 to 5

group2= star 6 to 11

group3 = star 12 to 17

if group1 ==  flagbusy then

transitionongroup2

else

transitionongroup3

is alright ?

-------------------------------------------------------- -- necessary --- -------------------------------------------------------- local myGroupst = display.newGroup( ) --group star local mathr = math.random local refX = display.contentWidth\*.5 local refY = display.contentHeight\*.5 local numberofstar = 8 local BackgroundBack = display.newImageRect( "back02.png",360,768) BackgroundBack.x = display.actualContentWidth\*0.5 BackgroundBack.y = display.actualContentHeight\*0.5 BackgroundBack.xScale = 1 BackgroundBack.yScale = 1 -------------------------------------------------------- -- CIrcle who explode --- -------------------------------------------------------- local circleeffect = display.newImageRect("c1.png",200,200) --circle with color of explosion circleeffect.x=refX circleeffect.y=refY circleeffect.xScale=.5 circleeffect.yScale=.5 circleeffect.alpha=.5 local circletohide = display.newImageRect("c2.png",100,100) --invisible circle circletohide.x=refX circletohide.y=refY circletohide.xScale=.02 circletohide.yScale=.02 local circleannular = display.newImageRect("c3.png",100,100) --shock wave circleannular.x=refX circleannular.y=refY circleannular.xScale=.02 circleannular.yScale=.02 local mask = graphics.newMask( "circletohide.png" ) --the mask circleeffect:setMask( mask ) circleeffect.maskScaleX=1 circleeffect.maskScaleY=1 circletohide.alpha = 0 transition.to(circletohide, {time=2100,delay=120, xScale=3, yScale=3,alpha=0}) transition.to(circleeffect, {time=1000,delay=0, alpha=.3}) transition.to(circleannular, {time=1000,delay=0, xScale=1.5, yScale=1.5,alpha=0}) local function followcirlemask(event) --function to follow the circlehide and assing that on the mask print("circletohide.xScale",circletohide.xScale) circleeffect.maskScaleX=circletohide.xScale circleeffect.maskScaleY=circletohide.xScale return circletohide.maskYscale, circletohide.maskXscale end Runtime:addEventListener("enterFrame",followcirlemask) -------------------------------------------------------- -- star --- -------------------------------------------------------- local st = {} for a= 1,numberofstar do st[a] = display.newImageRect( "star.png",40,40 ) st[a].x = refX st[a].y = refY st[a].alpha = .5 st[a].xScale=mathr(5,10)\*0.1 st[a].yScale = st[a].xScale st[a].clic = true end for u=1, #st do st[u].complx = mathr(-50,50) st[u].comply = mathr(-50,50) print(st[u].compl) st[u].xend = refX+st[u].complx st[u].yend = refY+st[u].comply end local arm = {} for a= 1,#st do arm[a] = display.newImageRect( "arm.png",20,20 ) arm[a].x = refX arm[a].y = refY arm[a].anchorY = 1 arm[a].alpha = 1 arm[a].xScale=.3 arm[a].yScale = .8 arm[a].angle = nil arm[a].angleR = nil --radians arm[a].clic = true end--for local function calculate(a) distY = st[a].yend - refY distX = st[a].xend - 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].hypo = math.sqrt(distX\*distX+distY\*distY) print(refX, refY, distX, distY, arm[a].angle ) end--function -------------------------------------------------------- -- transtion on star and arm --- -------------------------------------------------------- for a=1,#st do local function finishthetransition() transition.to(st[a],{time=600,alpha =0,xScale=0, yScale=0, transition=easing.inElastic}) transition.to(arm[a],{time=600,alpha =0,}) end--function finishthe... calculate(a) --initiate the arm and st \>\>star arm[a]:rotate( arm[a].angle ) arm[a].alpha = 1 arm[a].x, arm[a].y = st[a].xend, st[a].yend st[a].alpha =.2 transition.to(st[a],{x=st[a].xend,y=st[a].yend,delay=0, time=120,alpha =.8, onComplete = finishthetransition}) transition.to(arm[a],{time=120,alpha =1,yScale=1.2,onComplete = finishthetransition}) end--for