• Mike

    This is a great concept! Thanks fr the info — would you be able to provide code so we can see the whole thing in action?

  • ian

    Thanks for the comment. I’ll see what I can do with regard to the code.

  • Mike

    Thanks!

  • http://jzlabs.com jason

    Hi Ian, I’d be interested in seeing the code in action as well….thanks!

  • Mike

    I’ve been fumbling around with this for a while — lol — new to CoreAnimation, any idea when you could post code so I can see where I’m going wrong?

    Thanks!

  • http://www.nobelundhenning.de Julian Krenge

    This is a great concept you’re presenting there. I also thought that this flip-clock style would look awesome in my app. Initially I wanted to created the animations manually but your concept seems far more convincing since it lowers overhead a lot.

    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! :-)

  • ian

    Thanks for the comments Julian.

    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.

  • http://www.nobelundhenning.de Julian Krenge

    Thanks for your response, Ian.

    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. :-)

  • kichigai

    Thanks Ian. This post has helped me a lot.

  • shrey

    hey Ian…

    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

  • http://twitter.com/dhavaltrivedi Dhaval Trivedi

    Hi Ian,

    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

  • Jerry

    I love your tutorial, but I’m new to CoreAnimation, could you be so kind to upload the code or project??

  • Tom West

    badass…helped a ton!

  • Nitesh Meshram

    I want to create ipad application just like twitter with full of animation and effect can any one have idea how the transitions and effects takes place in Ipad/Xcode please help me out. Please send me link if possible. Thanks ID- nitesh.meshram@vinfotech.com

  • ludo

    Hi, this project is very interesting, is it possible to have the full code?
    Thanks~~

  • Anonymous

    I have been looking for something like this for ages, and this is absolutely perfect. Thank you so much.

  • ender

    any code to provide ,thx

  • http://www.adhost.dk/sogemaskineoptimering.shtml søgemaskineoptimering københav

    I’m trying to make the flip-clock animation, I find this tutorial very … .voyce.com/index.php/2010/04/10/creating-an-ipad-flip-clock-with-core-animation/ …

  • http://www.adhost.dk/sogemaskineoptimering.shtml søgemaskineoptimering københav

    I’m trying to make the flip-clock animation, I find this tutorial very … .voyce.com/index.php/2010/04/10/creating-an-ipad-flip-clock-with-core-animation/ …

  • Anonymous

    Is there any way you can post the code here?or make a sample app and push it on github? This post doesn’t really explain in depth the implementation, only how the flip animations work, and I’d like to see how this is done from the ground up. I’d really appreciate it! Thanks!

  • http://www.facebook.com/symorium Valery Pavlov

    can you provide sample source code?

  • Anonymous

    Thanks for the great tutorial. The result of this is awesome but I can’t get me head around how exactly I need to implement this, so I can’t get it to work. It would be great if you could share the source code so we can all have a look.

    Thanks

  • Tech

    Any word on the code – I would like to use something similar.

  • Pingback: Looking back at 2011

  • Andrew

    The   most  confusing tutorial  i ever  read ,thank you ;)

  • Francesco

    Hi Ian,thanks for the post..it’s really useful but I had some problem trying to create the full animation. Can you provide the project, please?

  • Paresh Navadiya

    plz i can have source code for tihis i have to develope flip clock

  • MarsAnem

    Awesome tutorial!! thank you for not posting the code heheheh this way I had to think about the code and what it is doing, instead of just copying and pasting n__n

  • Podcaster

    Thank you for the great tutorial, I also would love to see the source code project.

  • http://twitter.com/cbowns Christopher Bowns

    I tossed together a demo project of this technique and posted it to Github: https://github.com/cbowns/flipclock

  • Ramaraju V.N

    Thank you very much.

  • http://cbowns.com/ cbowns

    I tossed together a demo project of this technique and posted it to Github: https://github.com/cbowns/flipclock

  • Adrian Edwards

    @cbowns:disqus can you make a ‘bare bones’ one? because this one seems VERY complex

  • http://cbowns.com/ cbowns

    I think that’s an exercise for the reader. The technique *is* complex: it can be simplified if used in only one particular manner, but the basic idea isn’t trivial to implement.

  • Adrian Edwards

    well, i am trying to make a timer (HH:MM) that runs off of 2 variables (hour and minute). where would I start with that?

  • Adrian Edwards

    how come you are using UIView instead of CALayer?

  • Adrian Edwards

    initial post?

Back to top
mobile desktop