UIViewControllers Transitions Effect Like iBooks Book opening effect?

Question

I have been working on application which is a clone of iBooks, and for last 2 days I have been trying to animate the book cover flow like iBook app perform .

This is an iBooks ScreenShot, I have my book shelf exactly like this:

When the user taps on any book I want to perform animation transition like this :

You can see the book cover flip on left and white view is of new viewcontroller which is for loading the content of the book.

Can anyone please help me with this issue? I want to perform exactly the same animation. with two viewcontrollers.

Playbook

similar question: #8500101 – Foolproof

Thanks for reply ,but prob is there is difference between UIView animation and UiViewController animation . – Playbook

You could/would probably implement this as a custom segue if you want to transition between two view controllers. The code would be similar as transitioning between two views. I believe that last years WWDC session video for Core Animation had a custom segue (with fire :P) at the end of the video. – Spearing

Answer 1

I have code a ibook open effect demo on github , you can see iBooksOpen

Acred

hi Guo, can I use your iBooksOpen project in my app ? I can't find the licence. Is it open source? Thanks – Cadmium

Answer 2

Check it out may b this can help you:

   coverView.layer.anchorPoint=CGPointMake(0, .5);
  coverView.center = CGPointMake(coverView.center.x - coverView.bounds.size.width/2.0f, coverView.center.y);

    NSLog(@"%f",coverView.layer.anchorPoint.y);

    [UIView animateWithDuration:.5 delay:0 options:UIViewAnimationCurveEaseIn  animations:^{
        coverView.transform = CGAffineTransformMakeTranslation(0,0);
        CATransform3D _3Dt = CATransform3DIdentity;
        _3Dt =CATransform3DMakeRotation(3.141f/2.0f,0.0f,-1.0f,0.0f);
        _3Dt.m34 = 0.001f;
        _3Dt.m14 = -0.0015f;
        coverView.layer.transform =_3Dt;
    } completion:^(BOOL finished){
        if (finished) {
            [self animateCurrentViewController];
            [self toolBarAndNavigationBarNeedToShow:YES];
        }
    }];

CoverView is nothing but ur's view

Woodberry

Answer 3

Legend: LibraryViewController - the shelf thingy with books ReadingViewController - the ViewController where reading occurs (see last image of the question)

Lets say the cover is UIImageView. Using iOS 5.0+ you can add readingViewController as a subview of LibrabryViewController. Then one of the animations is zooming the book (readingViewController + UIIMageView). I suggest here animating a UIView which is a container of both. Second one is fliping the cover:

UIIMageView.transform = CGAffineTransformMake(a,b,c,d,tx,ty); I think a and d should be -1 here See more for CGAffineTransform

P.S. This seems an interesting problem. Please let me know if my suggested method is possible!

Chirr

Answer 4

i am not sure but may be you can try UIPageViewController, it will give you book effect. here is link: http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIPageViewControllerClassReferenceClassRef/UIPageViewControllerClassReference.html

Woodberry

Thanks for the quick reply , but sir UipageViewController gives ur curl effect during turning pages which i have already achieved , what i want is the book cover opening effect – Playbook