Transition problem?

horacebury · February 15, 2014, 7:37pm

I have a power bar animation which is very simple but appears to fail. What I’m expecting is for a red rectangle, which is twice the width of the screen, to be moved left until it’s right side touches the left of the screen (power bar draining away effect.)

What I see is that the bar drains down but does not immediately disappear. If you run this code do you see the same thing?

I’ve tried using the transition.to onComplete and a separate timer.performWithDelay, both with the same effect.

display.setStatusBar( display.HiddenStatusBar ) local function timerbar( callback ) local group = display.newGroup() group.class = "timerbar" local bar = display.newRect( group, 0, 0, display.contentWidth\*2, 100 ) bar.fill = {1,0,0} local function fin() print(1) bar:removeSelf() bar = nil print(2) callback() print(3) end transition.to( bar, { time=4000, width=-display.contentWidth } ) timer.performWithDelay( 4000, fin, 1 ) return group end local function go() print("GO") end timerbar( go )

rob · February 15, 2014, 7:52pm

I made a few changes:

display.setStatusBar( display.HiddenStatusBar ) local function timerbar( callback ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local group = display.newGroup() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; group.class = "timerbar" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local bar = display.newRect( group, 0, 0, display.contentWidth, 100 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar.fill = {1,0,0} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar.anchorX = 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local function fin() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar:removeSelf() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar = nil &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transition.to( bar, { time=4000, width=-display.contentWidth, onComplete = fin } ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return group end local function go() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("GO") end timerbar( go )

Instead of the bar being twice as wide and changing it’s width to half it’s size, I just made it the width of the screen, anchored it to the left and it seems to not leave the little red bar there. I didn’t time it, but it looks like your version has a couple of second’s pause before it finally blinks away. I’m not sure what’s causing that, but the above code seems to do what I think you want it to do.

Rob

horacebury · February 15, 2014, 8:48pm

Of course! I’m trying to make the rectangle -contentWidth!

D’oh!

display.setStatusBar( display.HiddenStatusBar ) local function timerbar( callback ) local group = display.newGroup() group.class = "timerbar" local bar = display.newRect( group, 0, 0, display.contentWidth, 50 ) bar.fill = {1,0,0} bar.anchorX, bar.anchorY = 0, 0 local function fin() bar:removeSelf() bar = nil callback() end transition.to( bar, { time=4000, x=-display.contentWidth, onComplete=fin } ) return group end local function go() print("GO") end timerbar( go )

rob · February 15, 2014, 7:52pm

I made a few changes:

display.setStatusBar( display.HiddenStatusBar ) local function timerbar( callback ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local group = display.newGroup() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; group.class = "timerbar" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local bar = display.newRect( group, 0, 0, display.contentWidth, 100 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar.fill = {1,0,0} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar.anchorX = 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local function fin() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar:removeSelf() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bar = nil &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print(3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transition.to( bar, { time=4000, width=-display.contentWidth, onComplete = fin } ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return group end local function go() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("GO") end timerbar( go )

Instead of the bar being twice as wide and changing it’s width to half it’s size, I just made it the width of the screen, anchored it to the left and it seems to not leave the little red bar there. I didn’t time it, but it looks like your version has a couple of second’s pause before it finally blinks away. I’m not sure what’s causing that, but the above code seems to do what I think you want it to do.

Rob

horacebury · February 15, 2014, 8:48pm

Of course! I’m trying to make the rectangle -contentWidth!

D’oh!

display.setStatusBar( display.HiddenStatusBar ) local function timerbar( callback ) local group = display.newGroup() group.class = "timerbar" local bar = display.newRect( group, 0, 0, display.contentWidth, 50 ) bar.fill = {1,0,0} bar.anchorX, bar.anchorY = 0, 0 local function fin() bar:removeSelf() bar = nil callback() end transition.to( bar, { time=4000, x=-display.contentWidth, onComplete=fin } ) return group end local function go() print("GO") end timerbar( go )