flipboard like animation

Question

The change in digit should be like airport timer . could someone give me some pointer where to start.

I am interested in the animation,changing of the time like flipboard(???).

Thanks in advance.

Answer 1

You will need separate images of the top and bottom half of all the digits. Then, to create an animated flip, you'll need a Scale Animations, that scales a view's height from 100% to 0% with pivotY at the bottom.

Then, for each shown digit, you'll need 4 views like so:

Two views at the front are currently visible and show the 2 parts of '0'. The other two views (I colored them differently to make sure it's 2 views) lay behind and already hold the next digit (note, that they also must have visibility="visible" they just have to be behind in z-level.

Now, to switch, apply the animation to the upper front view (holding the upper part of '0'). The animation makes it shrink, simulating a flip and at the same time, the upper part of '1' becomes visible. When the animation is done, apply the same animation to the lower front view, this hides the lower part of "0" and makes the lower part of "1" visible.

When the second animation is done, move the views holding the "0" parts behind the now visible views holding "1" by changing it's z-level, load the next digit's images (in this case "2") and reset the height to the original height again.