How to flip image with another one ?

Solar2D General Questions/Discussion
#1

Team,

How can I flip image with another one ? 

i am working in app that randomly show images in three boxes… i want to make flip animation when shown next pictures…

#2

  1. Create a transition with the right type of easing (I think inQuad) to set xScale from 1 to 0 for each image.

  2. Set the frame of each picture to a new image

  3. Create a transition with the right type of easing (I think outQuad) to set xScale from 0 to 1 for each image.

If loading the images in step 2 takes too long you will need to pre-load them!

#3

 Thanks thomas…

I trying this code but it does not work …

[lua]

local x = display.contentCenterX

local y = display.contentCenterY

local b = display.newImage( “omanevents2.png”, x, y )

local a = display.newImage( “omanevents1.png”, x, y )

b.xScale = 0

transition.to( a, { time=1500, delay=2500, xScale= 0, transition=easing.inExpo } )

transition.from( b, {time=1500, delay=2500, xScale= 1, transition=easing.outExpo } )

[/lua]

#4

If you want to do a proper flip, you should also take a look at the samples directory Graphics-Premium/Fishies2.5D

#5

Correct the last two lines:

transition.to(a, {time = 1000, xScale = 0, transition=easing.inExpo}) transition.to(b, {delay = 1000, time = 1000, xScale = 1, transition=easing.outExpo})

You might need to switch inExpo and outExpo to outExpo and inExpo in the easing types, I’m not sure. Let me know if this works!

#6

Thanks thomas,

this is what I did… it worked somehow… not excaly what I am looking for … but I think I can live with now… thanks alot 

[lua]

local a,b

local function onObjectTap( event )

    --print( "Tap event on: " … event.target.name )

    transition.to(event.target, {time = 1000, xScale = 0, transition=easing.outExpo})

transition.from(b, {delay = 1000, time = 1000, xScale = 1, transition=easing.inExpo})

    

    return true

end

local halfW = 100

local halfH = 100

local x = display.contentCenterX

local y = display.contentCenterY

b = display.newImage( “omanevents2.png”, x, y )

a = display.newImage( “omanevents1.png”, x, y )

b.xScale = 0

a:addEventListener( “tap”, onObjectTap )

[/lua]

#7

Hi!

You’re still using transition.from instead of transition.to in line 8 - may I ask why?

Why isn’t the effect still not what you’re looking for? Let me know, maybe we can help.

#8

 thanks , i think that was a mistake… i will try again and come back to you.

#9

Thanks  for your support I have changed and it looks better now :slight_smile:

#10

  1. Create a transition with the right type of easing (I think inQuad) to set xScale from 1 to 0 for each image.

  2. Set the frame of each picture to a new image

  3. Create a transition with the right type of easing (I think outQuad) to set xScale from 0 to 1 for each image.

If loading the images in step 2 takes too long you will need to pre-load them!

#11

 Thanks thomas…

I trying this code but it does not work …

[lua]

local x = display.contentCenterX

local y = display.contentCenterY

local b = display.newImage( “omanevents2.png”, x, y )

local a = display.newImage( “omanevents1.png”, x, y )

b.xScale = 0

transition.to( a, { time=1500, delay=2500, xScale= 0, transition=easing.inExpo } )

transition.from( b, {time=1500, delay=2500, xScale= 1, transition=easing.outExpo } )

[/lua]

#12

If you want to do a proper flip, you should also take a look at the samples directory Graphics-Premium/Fishies2.5D

#13

Correct the last two lines:

transition.to(a, {time = 1000, xScale = 0, transition=easing.inExpo}) transition.to(b, {delay = 1000, time = 1000, xScale = 1, transition=easing.outExpo})

You might need to switch inExpo and outExpo to outExpo and inExpo in the easing types, I’m not sure. Let me know if this works!

#14

Thanks thomas,

this is what I did… it worked somehow… not excaly what I am looking for … but I think I can live with now… thanks alot 

[lua]

local a,b

local function onObjectTap( event )

    --print( "Tap event on: " … event.target.name )

    transition.to(event.target, {time = 1000, xScale = 0, transition=easing.outExpo})

transition.from(b, {delay = 1000, time = 1000, xScale = 1, transition=easing.inExpo})

    

    return true

end

local halfW = 100

local halfH = 100

local x = display.contentCenterX

local y = display.contentCenterY

b = display.newImage( “omanevents2.png”, x, y )

a = display.newImage( “omanevents1.png”, x, y )

b.xScale = 0

a:addEventListener( “tap”, onObjectTap )

[/lua]

#15

Hi!

You’re still using transition.from instead of transition.to in line 8 - may I ask why?

Why isn’t the effect still not what you’re looking for? Let me know, maybe we can help.

#16

 thanks , i think that was a mistake… i will try again and come back to you.

#17

Thanks  for your support I have changed and it looks better now :slight_smile: