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
beautiful work
ReplyDeletehttp://www.rubenswieringa.com/blog/flex-book-component-beta
ReplyDeleteSteven - 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
ReplyDeleteKim
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@Jonathan that kind of comment is not appreciated here. Please take it elsewhere
ReplyDeleteThis is exactly what I've been looking for.. really hope this gets opened up in the SDK :) Great work Steven.
ReplyDeleteSteven: I manage the CoreAnimation team at Apple. Are you interested in working for us?
ReplyDelete@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)
ReplyDeleteThanks
-S
Done (and from my Apple account! :)
ReplyDeleteHi Steven,
ReplyDeleteI nice book app called Classics uses page curl too, not sure how they are doing it though.
http://www.classicsapp.com/
I started to rolled my own effect class to handle effects like this...have a look at it here.
ReplyDeletehttp://github.com/epatel/EPGLTransitionView
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:
ReplyDeletehttp://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/
wowww, nice app!!
ReplyDelete@tom
ReplyDeletethanks a lot for your approach. i really like your style - and your kitten. greetz!
Is there any update regarding the proposed source code? I mean if this code is used will it be approved by Apple?
ReplyDelete@mongoose54 no, it will absolutely be rejected by Apple. Try Tom or Edward's links above
ReplyDeleteHello Steven, I noticed that some of the methods are private. Will my applicaiton be rejected because of that?
ReplyDelete@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.
ReplyDelete-S
Hello Steven really a great work by you. Thanks so much.
ReplyDeleteHi Steven its really good work.
ReplyDeleteReally good work :)
ReplyDeletebut 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?
I can say that using the undocumented pagecurl key did not get the app rejected...some inconsistency from apple ?
ReplyDeleteHi 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:
ReplyDeletehttp://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.
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.
ReplyDeletehttp://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.