Can you share the code for – if not anything, just the flip animation of two parts? I’m a newbie and though I somehow did manage to get the top flip animation working, I’m clueless on bottom animation, and changing the content. It’ll be a great help.

Best,
Dhaval

Thanks alot….. great tutorial for the newbies like me….
can u please provide us with the full code??

i am working on the same animation but i dun’t want to show the break in the image on the rotation axis, is it possible???? :-s

also i want to flip it through Y-axis..just like a book filp…and that too from both the sides, left-to-right and right-to-left…what shoud i do??? :-s

I understand your comment on the animation, this obvious solution somehow didn’t occur to me. Also your arguments on the 3D-animation vs. images are very valid. As you stated in your initial post, it’s also a lot work to create the animations manually.

In the meantime I finished the animation as well, only with a slight difference to your approach. I was to lazy changing the flip-layers content in the middle, so I use one layer flipping up and one layer flipping down. Maybe I will refactor it, but chances are high that I will be too lazy to do so. Also, I loading images into the layers because I wanted to achieve a more detailed graphic.

If you’re interested, here’s a brief – and not very well done – video of the animation: http://www.youtube.com/watch?v=tRkSmJwbbVg

I wanted to thank you again for this post. I am a total newby to Xcode and Cocoa Touch, although I know how to code in general. To get familiar with the environment I wanted to create a little app and this flip-clock style was one element of it. Your post is the perfect trade-off of guidance vs. encouraging learning. I learned a lot recreating that animation and also understood the concepts behind it. Your code snippets are a very well-balanced guide through the process, but don’t give too much information so that one just copies the code. Really, really great stuff. Seriously.

The answer to your question is that first state has knowledge of the next number to be displayed; so before flipping down the moving piece the ’static’ top piece can display it. That’s what’s in the first of the 4 images in the graphic. There shouldn’t be any ‘fudging’ required!

This approach may use marginally more CPU cycles than a simple animation, but I don’t have any figures to hand. Some of the cost will be upfront in splitting the images. Bear in mind that it will require less storage and therefore your binary will be smaller and possibly faster to load. There are trade-offs.

I have a question though. You mentioned, that you’re using a state machine with three states. But this somehow implies, that you first finish the whole animation and afterwards display the correct number. But right after the start of the animation, which means about half through the state TopToMiddle the user is able to see the non-updated top-half of the digit. Is this correct? For instance, when you switch from 1 to 2, you acutally flip from 1 to 1 and then change the number to 2? Anyhow, I cannot observe this behaviour in the video. Is this just because my eyes are not fast enough to track the, lets call it, inaccuracy?

Another question regards the use of the animations: do you have any information on the energy consumption of a app which uses Core Animation rather than animated images?

But again, thanks a lot for sharing your thoughts, I’d really helped me a lot. Also, if you wouldn’t mind sharing the code, I would appreciate it a lot as well. Although I’m not sure whether this will help more than confuse me.

Like you blog, keep up the good work!

Thanks!