IBook iBooks as a store animation

Question

Does anyone know how Apple makes the transition to the store in the iBooks app? I know that they use the Modal View Controller with the UIModalTransitionStyleFlipHorizontal transition style set, but I don’t see how they show the “depth” of the “bookcase” when they make the transition.

Answer 1

I have not tried this myself yet, but this link seems to answer your question.

http://programmingdays.blogspot.com/2011/07/ibooks-flip-animation.html

Answer 2

I assume the animation works something like this:

• A sample “snapshot” is taken from the bookshelf and set the contents of CALayer.
• A view of a bookshelf removed from its supervisor.
• The created CALayer (bookshelf layer) with the image of the bookshelf is added to the layer by some existing (or newly created) UIView
• The other layer (side layer) and the image side of the bookshelf is used as its content. This layer is added to the UIView. The side layer is the bookshelf layer located on the right edge.
• The side layer is converted to rotate it. M_PI_2 is happy around the y axis. This essentially makes it invisible since it is perpendicular to the screen device
• The bookshelf and side layers add animation to them that converts each of the M_PI_2 rotations around the y axis. Upon completion of this animation, the bookshelf will be perpendicular to the device screen and the side layer will be fully examined.
• A new layer (storage level) is created, and a snapshot of the store’s image is added as the contents of the new layer, it is converted and positioned so that it will be displayed correctly when.,
• At the layer and storage level, an animation has been added that transforms each of them with the rotation of M_PI_2 around the y axis.
• All layers are removed and the UIView store is displayed.

I don’t have any internal knowledge about the iBooks application, but if I tried to duplicate this effect, I would have done so. FWIW, once you get the hang of the positioning and conversion of CALayers, its a curious amusement to get entangled in such animations.