ios 书本翻开页面转场动画

效果.gif

这个效果是我参考微信读书做的，给了我实现这个动画的灵感。

这个动画的原理也应该很容易能看出来：
1、动画开始前，两个叠在一起的view，上面一层是书本的封面，下面一层是书的第一页。
2、开始动画时，封面会进行两个动画，一个是缩放动画，一个是旋转动画（绕Y轴旋转90度）；书页仅执行缩放动画。
3、结束动画时，封面view离开了屏幕，书页全屏展示。

接下来，只需要实现UINavigationControllerDelegate，传入一个遵循UIViewControllerAnimatedTransitioning这个协议的id类型对象就可以了。

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0);

下面是这个对象的实现，核心的动画部分就是我上面提到的思路。

+ (id<UIViewControllerAnimatedTransitioning>)objectWithBookCoverView:(__kindof UIView *)bookCoverView animationControllerForOperation:(UINavigationControllerOperation)operation {
    RCYBookAnimatorObject *object = [[RCYBookAnimatorObject alloc] init];
    object.bookCoverView = bookCoverView;
    object.operation = operation;
    return object;
}

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext {
    return 0.8;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext {
    UIView *containerView = [transitionContext containerView];
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1.0 / 500.0;
    [containerView.layer setSublayerTransform:transform];
    
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    
    switch (self.operation) {
        case UINavigationControllerOperationPush: {
            UIView *currentToView = [transitionContext viewForKey:UITransitionContextToViewKey];
            //toView 和 fromView 都用截图
            UIView *toView = [currentToView snapshotViewAfterScreenUpdates:YES];
            UIView *fromView = [self.bookCoverView snapshotViewAfterScreenUpdates:NO];
            
            [containerView addSubview:toView];
            [containerView addSubview:fromView];
            
            CGRect toViewFrame = toView.frame;
            CGRect fromViewFrame = self.bookCoverView.frame;

            fromView.layer.anchorPoint = CGPointMake(0, 0.5);
            fromView.frame = fromViewFrame;
            toView.frame = fromViewFrame;
            
            [UIView animateKeyframesWithDuration:duration
                                           delay:0.0
                                         options:0
                                      animations:^{
                                          fromView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
                                          toView.frame = toViewFrame;
                                          fromView.frame = toViewFrame;
                                      } completion:^(BOOL finished) {
                                          [fromView removeFromSuperview];
                                          [toView removeFromSuperview];
                                          [containerView addSubview:currentToView];
                                          [containerView.layer setSublayerTransform:CATransform3DIdentity];
                                          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
                                      }];
            break;
        }
        case UINavigationControllerOperationPop: {
            UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
            UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
            UIView *currentFromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
            //toView 和 fromView 都用截图
            UIView *toView = [self.bookCoverView snapshotViewAfterScreenUpdates:YES];
            UIView *fromView = [currentFromView snapshotViewAfterScreenUpdates:NO];
            
            [containerView addSubview:fromView];
            [containerView addSubview:toView];
            [containerView insertSubview:toVC.view atIndex:0];
            fromVC.view.hidden = YES;

            CGRect toViewFrame = self.bookCoverView.frame;
            CGRect fromViewFrame = fromView.frame;

            toView.layer.anchorPoint = CGPointMake(0, 0.5);
            fromView.frame = fromViewFrame;
            toView.frame = fromViewFrame;
            toView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
            
            [UIView animateKeyframesWithDuration:duration
                                           delay:0.0
                                         options:0
                                      animations:^{
                                          toView.layer.transform = CATransform3DIdentity;
                                          fromView.frame = toViewFrame;
                                          toView.frame = toViewFrame;
                                      } completion:^(BOOL finished) {
                                          [fromView removeFromSuperview];
                                          [toView removeFromSuperview];
                                          [containerView.layer setSublayerTransform:CATransform3DIdentity];
                                          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
                                          if ([transitionContext transitionWasCancelled]) {
                                              fromVC.view.hidden = NO;
                                              [toVC.view removeFromSuperview];
                                          }
                                      }];
            break;
        }
            
        default:
            break;
    }
}

demo地址