tags:

views:

88

answers:

1

I would like to know the respective graphics transformations ..in creating a flipping effect of a ui component about the x-z plane. It needs to be done only using 2d since the swing toolkit only supports 2d affine transformations.

http://www.verysimple.com/flex/flipcard/ .... is an example of the effect to be achieved .

+1  A: 

Not a true 3-D flipping but the effect looks very similar if you just do 2-D scaling like this,

  1. Render the front image.
  2. Scale X from 1 to 0, anchored at the middle.
  3. Render the back image.
  4. Scale X from 0 to 1, anchored at the middle.

To simulate a constant angular speed, the scaling factor can be calculated like this,

double scale = Math.cos(i*Math.PI/(2.0*steps));

The i is step number and steps is the total number of steps need to simulate a 90 degree rotation.

You can also introduce some shear transformation to simulate the perspective of a true 3-D rotation but the effect is not that noticeable for a fast flipping.

ZZ Coder