How to make a progress bar whose size reduces along with time.
Like…
If i give 30 seconds,the progressbar should reach zero in 30s.How to do that?
Hi,
There are many different ways to achieve this, but the following demonstrates how I usually do it:
--############################################################################# --# Inverse Timed Progress Bar --############################################################################# local pb = display.newRect(80, 100, 150, 20) pb.anchorX = 0 pb.anchorY = .5 pb:setFillColor(.5) local pb\_max\_time = 30 local pb\_time = pb\_max\_time local pbTimer local function updatePb() pb\_time = pb\_time - 1 local pb\_per = tonumber(string.format("%.2f", (pb\_time / pb\_max\_time))) if pb\_per \<= 0 then pb.isVisible = false timer.cancel(pbTimer) print("done") else pb.xScale = pb\_per end end print("start") pb.isVisible = true pbTimer = timer.performWithDelay(1000, updatePb, -1)
This approach allows you to set the progress bar width and time to any value and it will still operate the same.
Hope that helps.
-dev
Thanks bro…
I am gonna use it…
One more doubt…
Is it possible to achieve smooth transition?
Hi,
Yes. Actually I kind of like this version better than my original code. I forgot about the transition.scaleTo method which is less code.
--############################################################################# --# Inverse Timed Progress Bar V2 --############################################################################# local pb = display.newRect(80, 100, 150, 20) pb.anchorX = 0 pb.anchorY = .5 pb:setFillColor(.5) local pb\_max\_time = 30 local function onPbDone() pb.isVisible = false end pb.isVisible = true transition.scaleTo(pb, { xScale = .01, time = pb\_max\_time\*1000, onComplete = onPbDone })
-dev
Thanks Develephant…!
It works like charm…
There is a problem with the xScale transition.If you have a closer look,at one point,transition is not smooth.Increase the width of the pb and you will see it
Hi,
There are many different ways to achieve this, but the following demonstrates how I usually do it:
--############################################################################# --# Inverse Timed Progress Bar --############################################################################# local pb = display.newRect(80, 100, 150, 20) pb.anchorX = 0 pb.anchorY = .5 pb:setFillColor(.5) local pb\_max\_time = 30 local pb\_time = pb\_max\_time local pbTimer local function updatePb() pb\_time = pb\_time - 1 local pb\_per = tonumber(string.format("%.2f", (pb\_time / pb\_max\_time))) if pb\_per \<= 0 then pb.isVisible = false timer.cancel(pbTimer) print("done") else pb.xScale = pb\_per end end print("start") pb.isVisible = true pbTimer = timer.performWithDelay(1000, updatePb, -1)
This approach allows you to set the progress bar width and time to any value and it will still operate the same.
Hope that helps.
-dev
Thanks bro…
I am gonna use it…
One more doubt…
Is it possible to achieve smooth transition?
Hi,
Yes. Actually I kind of like this version better than my original code. I forgot about the transition.scaleTo method which is less code.
--############################################################################# --# Inverse Timed Progress Bar V2 --############################################################################# local pb = display.newRect(80, 100, 150, 20) pb.anchorX = 0 pb.anchorY = .5 pb:setFillColor(.5) local pb\_max\_time = 30 local function onPbDone() pb.isVisible = false end pb.isVisible = true transition.scaleTo(pb, { xScale = .01, time = pb\_max\_time\*1000, onComplete = onPbDone })
-dev
Thanks Develephant…!
It works like charm…
There is a problem with the xScale transition.If you have a closer look,at one point,transition is not smooth.Increase the width of the pb and you will see it