Looped animations become laggy after running for a while

Hi, at the beginning it’s smooth and flawless, but after running for 2~ mins it starts lagging, even more after more time, here’s a preview & the code:

[youtube]https://www.youtube.com/watch?v=1rnpNgBLfhA&feature=youtu.be[/youtube]
 

oLetter = display.newImage( 'oLetter.png', w/2-45, h/2-180) oLetter.xScale = 0.5 oLetter.yScale = 0.5 logo = display.newImage( 'logo.png', w/2, h/2-180) logo.xScale = 0.5 logo.yScale = 0.5 playBtn = display.newImage('playBtn.png', w/2, h/2+50 ) playBtn.xScale = 0.3 playBtn.yScale = 0.3 creditsBtn = display.newImage('creditsBtn.png', w/2, h/2+120 ) creditsBtn.xScale = 0.3 creditsBtn.yScale = 0.3 menuTick = function (event) local animateLogo = function ( event ) oLetter.y = (h / 2 - 180) + math.sin(event.time / 190) \* 10 end local animateButtonX = function ( event ) playBtn.xScale = 0.3 \* math.cos(event.time / 1000) creditsBtn.xScale = 0.3 \* math.sin(event.time / 1000) end timer.performWithDelay(100, animateButtonX, -1) timer.performWithDelay(100, animateLogo) end Runtime:addEventListener("enterFrame", menuTick)

Any idea what’s the cause? Or is this just normal?

Hi @waelisnothing,

This code looks very dangerous to me. You’re creating two new timers on every single Runtime frame of the app, which means you’re creating hundreds or even multiple thousands of them. That is probably why the app slows down and (I would assume) it will eventually just crash completely.

Why not just use transitions for this? It would be considerably easier and cleaner.

Best regards,

Brent

Oh, thank you, good to know!
Anyone knows how do I achieve this using transitions? Tried it do the bouncing ‘o’ letter but it’s just not smooth and pretty laggy.
 

Hi @waelisnothing,

All of the animation in your video will likely be achieved by using transitions with “onComplete” to trigger another transition, and then repeat this over and over. Here’s a basic working example:

[lua]

local circ = display.newCircle( 100,250,20 )

local dir = “up”

local function transComplete()

    if dir == “up” then

        transition.to ( circ, { y=circ.y-50, time=500, tag=“titleAnims”, onComplete=transComplete, transition=easing.outQuad } )

        dir = “down”

    elseif dir == “down” then

        transition.to ( circ, { y=circ.y+50, time=500, tag=“titleAnims”, onComplete=transComplete, transition=easing.inQuad } )

        dir = “up”

    end

end

transComplete()

[/lua]

It would be similar for your rotating buttons, except you’d be doing xScale= (not y=) to 0 and back to 1, over and over.

Brent

Brilliant, thank you!

Hi @waelisnothing,

This code looks very dangerous to me. You’re creating two new timers on every single Runtime frame of the app, which means you’re creating hundreds or even multiple thousands of them. That is probably why the app slows down and (I would assume) it will eventually just crash completely.

Why not just use transitions for this? It would be considerably easier and cleaner.

Best regards,

Brent

Oh, thank you, good to know!
Anyone knows how do I achieve this using transitions? Tried it do the bouncing ‘o’ letter but it’s just not smooth and pretty laggy.
 

Hi @waelisnothing,

All of the animation in your video will likely be achieved by using transitions with “onComplete” to trigger another transition, and then repeat this over and over. Here’s a basic working example:

[lua]

local circ = display.newCircle( 100,250,20 )

local dir = “up”

local function transComplete()

    if dir == “up” then

        transition.to ( circ, { y=circ.y-50, time=500, tag=“titleAnims”, onComplete=transComplete, transition=easing.outQuad } )

        dir = “down”

    elseif dir == “down” then

        transition.to ( circ, { y=circ.y+50, time=500, tag=“titleAnims”, onComplete=transComplete, transition=easing.inQuad } )

        dir = “up”

    end

end

transComplete()

[/lua]

It would be similar for your rotating buttons, except you’d be doing xScale= (not y=) to 0 and back to 1, over and over.

Brent

Brilliant, thank you!