how to transition between images with fading?

Solar2D General Questions/Discussion
#1

Hello,

I have read about the transition about do not know how to do what I want or if I can. I have 4 images the same size and I want to fade in image1 and then fade it out. Then fade in image2 and fade it out and so on. Once I complete image 4 I want to loop back to image 1. How can I do this?

Thanks!
[import]uid: 184193 topic_id: 35642 reply_id: 335642[/import]

#2

Actually I see I can use the listeners to start the next transition hopefully. But how can I fade an image in from no opacity to full. I see how to go from all opacity to 0 if I want. And when I do how can I start the image out at 0 opacity so it does not show?
[import]uid: 184193 topic_id: 35642 reply_id: 141706[/import]

#3

[code]-- Fade in function
local function fadeIn(target, after)
target.transition = transition.to( yourImage, { delay=200, alpha=1, onComplete=after } )
end

– Fade out function
local function fadeOut(target, after)
target.transition = transition.to( yourImage, { delay=200, alpha=0, onComplete=after } )
end

fadeOut(image1, function() fadeIn(image1) end)[/code]

Something like that; basically you need to do two transitions in a row, using onComplete to go from one to another.

To do it with a sequence, you could either call each with different timers, or put those two functions in a bigger one and use tables to sequence through it. [import]uid: 41884 topic_id: 35642 reply_id: 141710[/import]

#4

Actually I see I can use the listeners to start the next transition hopefully. But how can I fade an image in from no opacity to full. I see how to go from all opacity to 0 if I want. And when I do how can I start the image out at 0 opacity so it does not show?
[import]uid: 184193 topic_id: 35642 reply_id: 141706[/import]

#5

[code]-- Fade in function
local function fadeIn(target, after)
target.transition = transition.to( yourImage, { delay=200, alpha=1, onComplete=after } )
end

– Fade out function
local function fadeOut(target, after)
target.transition = transition.to( yourImage, { delay=200, alpha=0, onComplete=after } )
end

fadeOut(image1, function() fadeIn(image1) end)[/code]

Something like that; basically you need to do two transitions in a row, using onComplete to go from one to another.

To do it with a sequence, you could either call each with different timers, or put those two functions in a bigger one and use tables to sequence through it. [import]uid: 41884 topic_id: 35642 reply_id: 141710[/import]