How to pulsate using CoronaSDK

There are many a times when developers are faced with creating a pulsating animation, one that keeps repeating between two stages. This if done well looks quite nice, but do it shoddily, it can ruin the whole look and feel.

So let's get cracking and see how to pulsate between two states and get that effect.

So first things first, what we need is an animation. This is easily achieved using a transition. so, we shall create a rectangle and apply a transition to it.

local rect = display.newRect(10,10,300,40)
  rect:setFillColor(255,255,255)

transition.to(rect,{time=1000,alpha=0})

this will create a rectangle and fade it out over one second

Now we need to bring it back from that state to fully visible again, so we can use

transition.to(rect,{time=1000,alpha=0})

but if you run the code, you will find that the animation overlaps and the last transition is run, canceling the first one, so there would be no transition as the second one Fades In.

so what we need to do is run the second animation when the first one completes. So, first we add declarations for the function that we shall call on completing the first transition.

local function1

next we modify the transition as

transition.to(rect,{time=1000,alpha=0, onComplete=function1})

function function1(e)
  transition.to(rect,{time=1000,alpha=1})
end

So what function1 does is the moment the transition is completed, it will run the second transition. Now when that is completed, it does not loop or pulsate back to fade out. So we use the same technique we just used and make a function2

local function1, function2

function function1(e)
  transition.to(rect,{time=1000,alpha=1, onComplete=function2})
end

function function2(e)
  transition.to(rect,{time=1000,alpha=0, onComplete=function1})
end

This shall now constantly pulse between the two states fading out and then fading in.

What if we need to stop this, and go to another screen or do something else?

So to enable us to cancel a transition, CoronaSDk offers us a handle to the transition, we can use that handle to cancel transitions. How it is uses is as follows

local trans

 trans = transition.to(rect,{time=1000,alpha=0, onComplete=function1})

now when we need to cancel this transition, we just call

transition.cancel(trans)

So, the full code to run the pulsating animation is as follows

local function1, function2
local trans

local rect = display.newRect(10,10,300,40)
  rect:setFillColor(255,255,255)

function function1(e)
  trans = transition.to(rect,{time=1000,alpha=1, onComplete=function2})
end

function function2(e)
  trans = transition.to(rect,{time=1000,alpha=0, onComplete=function1})
end

transition.to(rect,{time=1000,alpha=0, onComplete = function1})

Some beginner developers use a delay and spawn both the transitions together, which is not what I would recommend doing. So this is my way to do things.

If you liked this and the post was helpful, please leave a comment to let me know and make suggestions on other topics that you might want to see.

cheers,

?:)