UIView PageOpen sample project

After I posted Creating a UIButton with a page open animation I got some requests for a sample project. I’ve been a bit busy, but I finally managed to set up a simple project. Below is a screencap of the sample App:

PageOpenSampleApp

The App is really simple: click the “Turn Image Open” button and the image above animates open like a door. If you click the button again while the animation is in progress, the animation starts immediately over. When the animation finishes, the image is hidden from view. I made some changes to the original code, which was made for UIButtons: now the code works for all UIView objects, you simply call

- (void) pageOpenView:(UIView *)viewToOpen duration:(NSTimeInterval)duration;

and pass pass the UIView you want to animate to the method with the duration of the animation you want. That’s it, I hope this helps you! Download the sample project here PageOpenAnimationTutorial.zip.


21 Responses to “UIView PageOpen sample project”

  1. appkov says:

    Thank you so much for taking the time to do the sample project. I really appreciate your generosity!

  2. Mikko says:

    No problem, I’m glad if I can help others, I’ve gotten so much from blogs and forums that I feel happy to be able to give something back.

  3. Isaac says:

    I have trouble displaying the sample project, it only says I can run it with Mac 10.5 or 10.4.

  4. Mikko says:

    That’s strange, I run 10.6.2 myself, with iPhone SDK 3.2. Can you tell your OS version, and the version of you iPhone SDK?

  5. Ryan says:

    This is great. I like this transition for the cover opening, but is there some way to add an option to perform this same style of transition, but “bend” the page as a paper page would as it is moving? That way, we could use this one for the “hard cover” opening, and then use one that bends the page slightly for the “internal soft pages”. Could this be done?

  6. Dan says:

    Thanks! I am new to iPhone development and this will be very handy for a project I’m working on.

  7. Zach says:

    How would you get it to flip the other way? Im trying to get it to flip up and then down to the left, and vice versa to work for an open book type app im working on. Any help would be awesome! Thanks!

  8. Duncan says:

    Nicely done sample project. Thanks for posting it.

    When I first saw mention of this in the iPhone dev SDK forum, I got very excited, thinking you had posted a page CURL animation, like the one iBooks uses. I’d love to see the code for that. That is quite a complex animation.

  9. Mikko says:

    Yeah, the page curl is definitely more complex. What I did was quite basic CoreAnimation stuff. I remember seeing (for Mac OS X) ages ago some sample pics where program windows were curved in 3D space using just existing OS X UI tech, so it probably is possible to do the page curl using CoreAnimation but the transformation matrix, or rather many matrices (sp?) would be the trick to get right.

  10. Mikko says:

    For the page to flip first from right-to-up and then from up-to-left you should create two animations because you’ll need to animate first the front side of the page, and then the back side of it. After the first animation finishes, you hide the first view and show the next view and animate it. The animation itself is simple, just change the start, middle and end point values in the sample project to fit your desired animation.

  11. Mike says:

    Thanks for the sample code. I was having some problems with the up-to-left animation. The view for the 1st animation starts flat and the transformation rotates it up, however the view for the 2nd animation needs to start already rotated up, and then rotate back down… so would the 2nd animation need to have 2 transformations – one that rotates it up with a duration of 0 and hidden, and another that rotates it back down just like the first animation does? Thanks again!

  12. Mike says:

    Nevermind, I just saw on another board to reverse, just switch the “fromValue” and “toValue” parameters. Thanks!

  13. lookez says:

    You should create a simple framework with this kind of animation, would be amazingly helpful

  14. Shelly says:

    Hi I am trying to code a flipboard like page turning effect. Could you please help me out??

  15. shelly says:

    Could you please help me to adjust the code so the page/UIView flip like how flipboard does? What I have done so far it changing the anchor and center point of the view and having frontView and backView. Please help me I am stucked for weeks!

    Thanks

  16. Mikko says:

    I’m not quite sure what you are after. Do you mean flipping the open view upwards? With or without bending the view? Have you tried using
    [UIView transitionWithView:containerView duration:duration options:UIViewAnimationOptionTransitionCurlUp animations:^{ [viewToCurl doSomething]; [containerView addSubview:newView]; } completion:NULL] ? Or something like that, depending on your exact needs.

  17. Sujith says:

    May i know how i can make this rotation from left to right, means now the view is opening like a door which is fixed in left hand side, how to make it a door which is fixed in right hand side ?

  18. Bill says:

    Thanks Mikko for posting the sample code. This is exactly what I needed to put the finishing touches on my new iPad app. I’ve only been doing iOS development for a few months and this was the first time I needed to do some transformations. The sample code is an immense help. If you send me your email address I’ll send you a promo code when its completed

  19. Rahman says:

    hi,very thankful for youe sample code.I am very new to iphone development .Right now am doing a simple project.My requirement is when am loading local html page that contains num of pages.It shoult turn the page in both direction like forward and backward ,and also gives the facility to copy the word for dictionary use….please help me how to do this..thanks in advance.

  20. Jason says:

    Hi Mikko,

    I just wanted to thank you so much on this amazing sample code, thanks to your code I have completely removed the UINavigationController from my project and simulated it with my own code with your awesome animation.

  21. Shailesh Gol says:

    Thanks….you did a great job for iphone developers…

Leave a Response