How to create a split-flap (Flight Board) type animation ?

Solar2D Advanced Graphics
#1

I know this can be done in jQuery, though would like to achieve a similar effect in Corona:

http://www.jqueryscript.net/demo/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap/

thanks

#2

Hi @qietvlwg,

This should be fairly easy in Corona. It will probably just involve a series of transitions upon the Y scale, and keeping each “half” of the column at a proper Y anchor point. Here are some resources to get you started:

http://docs.coronalabs.com/guide/media/transitionLib/index.html

http://docs.coronalabs.com/guide/graphics/transform-anchor.html

Best regards,

Brent

#3

@Brent,

Thanks the yScale rotation helps a little, but i guess it requires a lot of pre-sliced images .etc to pull off a flight board type display.

Before i jump into it, is there a way to harness Corona’s graphics engine to do the heavy lifting e.g. given a newText object with font parameters and size, create the necessary resources to pull off the effect or is slicing pre-made png’s the better route?

local myObject2 = display.newImageRect( "LetterA.png", 100, 150 ) myObject2.x =150 myObject2.y =150 local myObject = display.newImageRect( "LetterB.png", 100, 150 ) myObject.x =150 myObject.y =150 transition.to( myObject, { time=2000, yScale=-1, delta=true } )
#4

Hi @qietvlwg,

Yes, I think this is possible using the graphics engine, and not making PNGs for everything. You would probably need to construct each half of each column (top and bottom) using two container objects, and position the digit such that, in the top container, the lower half of the digit is clipped by that container, and in the bottom container, the upper half of the digit is clipped by its container. Then, you could scale each container as its own complete entity.

Now, I haven’t actually tested this, but it’s the method I’d suggest you experiment with.

http://docs.coronalabs.com/api/library/display/newContainer.html

Take care,

Brent

#5

Hi @qietvlwg,

This should be fairly easy in Corona. It will probably just involve a series of transitions upon the Y scale, and keeping each “half” of the column at a proper Y anchor point. Here are some resources to get you started:

http://docs.coronalabs.com/guide/media/transitionLib/index.html

http://docs.coronalabs.com/guide/graphics/transform-anchor.html

Best regards,

Brent

#6

@Brent,

Thanks the yScale rotation helps a little, but i guess it requires a lot of pre-sliced images .etc to pull off a flight board type display.

Before i jump into it, is there a way to harness Corona’s graphics engine to do the heavy lifting e.g. given a newText object with font parameters and size, create the necessary resources to pull off the effect or is slicing pre-made png’s the better route?

local myObject2 = display.newImageRect( "LetterA.png", 100, 150 ) myObject2.x =150 myObject2.y =150 local myObject = display.newImageRect( "LetterB.png", 100, 150 ) myObject.x =150 myObject.y =150 transition.to( myObject, { time=2000, yScale=-1, delta=true } )
#7

Hi @qietvlwg,

Yes, I think this is possible using the graphics engine, and not making PNGs for everything. You would probably need to construct each half of each column (top and bottom) using two container objects, and position the digit such that, in the top container, the lower half of the digit is clipped by that container, and in the bottom container, the upper half of the digit is clipped by its container. Then, you could scale each container as its own complete entity.

Now, I haven’t actually tested this, but it’s the method I’d suggest you experiment with.

http://docs.coronalabs.com/api/library/display/newContainer.html

Take care,

Brent