Apple's iBooks Dynamic Page Curl

A week ago at NSConference I decided to try and figure out how Apple performed the page curl animation shown in the iPad announcement keynote.

It ended up being pretty easy to implement, and the page curl code has been in the OS since the beginning (although it's currently a private class - I've filed a radar asking to open the API that you can dupe if you'd like. rdar://problem/7616859). Basically you have to add in the finger angle tracking code and figure out the basic physics to make it believable. My code is pretty rough but it gives you a basic idea of how to get this working.

Here's hoping it's opened up because if it's not, then the iBooks app (distributed through the App Store) will be provably using private APIs which doesn't help anyone.

Here's a sample project that you should be able to build and run which shows the effect in action; the samplecode currently works for iPhone 3.0 and above.

Download Sample Code

25 comments:

  1. http://www.rubenswieringa.com/blog/flex-book-component-beta

    ReplyDelete
  2. Steven - I'm a publisher and desperate for information to get my books on the iPad. The page flip is exactly what I need. Do you offer consulting? consultant@publishandmarket.com

    Kim

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. @Jonathan that kind of comment is not appreciated here. Please take it elsewhere

    ReplyDelete
  6. This is exactly what I've been looking for.. really hope this gets opened up in the SDK :) Great work Steven.

    ReplyDelete
  7. Steven: I manage the CoreAnimation team at Apple. Are you interested in working for us?

    ReplyDelete
  8. @Assana if that's a legitimate request, please contact me by email; my vCard is on steventroughtonsmith.com (or my address is same fullname at gmail)

    Thanks
    -S

    ReplyDelete
  9. Done (and from my Apple account! :)

    ReplyDelete
  10. Hi Steven,

    I nice book app called Classics uses page curl too, not sure how they are doing it though.
    http://www.classicsapp.com/

    ReplyDelete
  11. I started to rolled my own effect class to handle effects like this...have a look at it here.

    http://github.com/epatel/EPGLTransitionView

    ReplyDelete
  12. I created an App-Store-safe approximation of this interface using gradient layers for shadowing and shading. It lacks a few of iBooks' nuances, like tracking touches vertically, but the visual effect is similar:

    http://github.com/brow/leaves

    @Luke: Classics actually uses a pre-rendered page-flip animation (while scaling the text horizontally to simulate curling). See here: http://darknoon.com/blog/2008/12/08/deconstructing-classicsapp/

    ReplyDelete
  13. @tom
    thanks a lot for your approach. i really like your style - and your kitten. greetz!

    ReplyDelete
  14. Is there any update regarding the proposed source code? I mean if this code is used will it be approved by Apple?

    ReplyDelete
  15. @mongoose54 no, it will absolutely be rejected by Apple. Try Tom or Edward's links above

    ReplyDelete
  16. Hello Steven, I noticed that some of the methods are private. Will my applicaiton be rejected because of that?

    ReplyDelete
  17. @BiBeep Yes, almost certainly. Until Apple provide an official API then you'll have to roll your own or fake it, like some of the examples above.

    -S

    ReplyDelete
  18. Hello Steven really a great work by you. Thanks so much.

    ReplyDelete
  19. Hi Steven its really good work.

    ReplyDelete
  20. Really good work :)

    but it works fine only for some certain pdf files. i tried changing the pdf file, the page curl effect is fine but i can't view the pdf text (the whole view turns black). what can be the reason?

    ReplyDelete
  21. I can say that using the undocumented pagecurl key did not get the app rejected...some inconsistency from apple ?

    ReplyDelete
  22. Hi Steven, I've done a bit of my own investigation into what Apple's implementation is doing behind the scenes to make this work, but hit a bit of a wall trying to interpret the results of CAFilter's 'CA_copyRenderValue' method. I welcome you to take a look and let me know if you have any suggestions:

    http://codethink.no-ip.org/wordpress/archives/320

    Though I suppose if you work for Apple now you probably know the answer but would not be inclined to share it. In any case, any insight you can provide would be appreciated.

    ReplyDelete
  23. Hello, I created a Page Curl like filter using OpenGL and CoreGraphics. Speaking about Math, shadow casting, shader etc. was a nightmare :-) but it's realistic and it's very close to the iBooks one.

    http://api.mutado.com/mobile/paperstack/

    I'm working on an easy-to-use API to integrate the GLView and other classes in a common project (like a PDF viewer).

    To resume, the logic behind it's based on a conical page deformation but to be realistic like iBooks, the Math is quite different from the Nuon algorithm. The filter is done, I hope to complete the API it in a couple of weeks then I'll publish it on github.

    ReplyDelete