开发者

iOS iBooks like store animation

Anyone know how Apple does the transition to the store in the iBooks app? I know they are using a Modal View Cont开发者_StackOverflow社区roller with the UIModalTransitionStyleFlipHorizontal transition style set but I don't see how they are showing the "depth" of the "bookcase" when they do the transition.


I'm supposing that the animation works something like this:

  1. A 'snapshot' image is taken of the bookshelf and set to the contents of a CALayer.
  2. The bookshelf view is removed from its superview.
  3. The newly created CALayer (the bookshelf layer) with the image of the bookshelf is added to the layer of some existing (or newly created) UIView
  4. Another layer (the side layer) is created and an image of the side of the bookshelf is used as its contents. This layer is added to the UIView The side layer is positioned at the right edge of the bookshelf layer.
  5. The side layer's transform is set to rotate it M_PI_2 rads about the y-axis. This essentially makes it invisible as it is perpendicular to the device screen
  6. The bookshelf and side layers have an animation added to them that transforms each with an M_PI_2 rotation about the y axis. At the conclusion of this animation, the bookshelf will be perpendicular to the device screen and the side layer will be fully in view.
  7. A new layer (the store layer) is created and a snapshot image of the store is added as the contents of the new layer, it is transformed and positioned so that it will appear correctly when . . .
  8. The side layer and store layer have an animation added that transforms each with an M_PI_2 rotation about the y axis.
  9. All of the layers are removed and the store UIView is displayed.

I don't have any inside knowledge of the iBooks app, but if I were trying to duplicate this effect, this is how I'd go about it. FWIW, once you get the hang of positioning and transforming the CALayers, its kinda fun to mess around with animations like this.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜