iOS 转场动画

前几天听了彦祖哥的转场动画，收获颇丰，经过彦祖哥的同意，在此写成文字版分享给大家。

转场动画介绍了两种，一种是翻页效果的转场动画，一种是通过截图进行的转场动画，下面先说下翻页效果的转场动画

翻页转场

翻页效果的转场动画一共是三步，分别是翻转、处理透明度、加手势
准备动作：
FirstVC遵守UINavigationControllerDelegate,创建两个实例，我们把翻转动画独立到两个实例中（push/pop），实例都需要遵守UIViewControllerAnimatedTransitioning(必须写到.h文件中，因为navigation的代理要求返回的对象遵守此协议)。

翻转

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];//左右翻页围绕Y轴
    animation.duration = [self transitionDuration:transitionContext];
    animation.fromValue = @(M_PI_2);
    animation.toValue = @(0);
    animation.delegate = self;
    [toViewController.view.layer addAnimation:animation forKey:@"rotateAnimation"];
    //更改锚点(图片围绕锚点翻转)和位置（翻转后VC的位置） 
    toViewController.view.layer.anchorPoint = CGPointMake(1, 0.5);
    toViewController.view.layer.position = CGPointMake(CGRectGetMaxX(fromViewController.view.frame), CGRectGetMidY(toViewController.view.frame));

处理透明度

CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1/500.0;
toViewController.view.layer.transform = transform;

增加手势

_pan = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(handlEdgeScreenPanGesture:)];
    _pan.edges = UIRectEdgeRight;
    [self.view addGestureRecognizer:_pan];
//手势响应方法：    
- (void)handlEdgeScreenPanGesture:(UIScreenEdgePanGestureRecognizer *)recognizer
{
    CGFloat progress = fabs([recognizer translationInView:self.view].x)/CGRectGetWidth(self.view.frame);
    
    switch (recognizer.state) {
        case UIGestureRecognizerStateBegan:
            _interaction = [[UIPercentDrivenInteractiveTransition alloc] init];
            [self performSegueWithIdentifier:@"gPushToSecond" sender:nil];
            break;
        case UIGestureRecognizerStateChanged:
            [_interaction updateInteractiveTransition:progress];
            break;
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:
        {
            
            if (progress >= 0.5) {
                [_interaction finishInteractiveTransition];
            }else {
                [_interaction cancelInteractiveTransition];
            }
            
            _interaction = nil;
        }
        default:
            break;
    }
}

这样三步就ok了。然后我们来说说通过截图进行翻转的动画：

通过截图进行转场(彦祖哥说的截图大法)

准备工作：FirstVC遵守UINavigationControllerDelegate和UIViewControllerTransitioningDelegate

截图并设置frame

坐标系的转换是纯数学问题，就是换了参考系而已，可以参考bounds和frame的区别来考虑，这里就不详细讲了。

UIView * cellImageSnapshot = [fromViewController.smallImageView snapshotViewAfterScreenUpdates:YES];
    cellImageSnapshot.frame = [containerView convertRect:fromViewController.smallImageView.frame fromView:fromViewController.containerView];
    fromViewController.smallImageView.hidden = YES;
    
    toViewController.view.frame = [transitionContext finalFrameForViewController:toViewController];
    toViewController.view.alpha = 0;
    toViewController.bigImageView.hidden = YES;

完成动画

[UIView animateWithDuration:duration animations:^{
        toViewController.view.alpha = 1.0;
        
        CGRect frame = [containerView convertRect:toViewController.bigImageView.frame fromView:toViewController.view];
        cellImageSnapshot.frame = frame;
    } completion:^(BOOL finished) {
        toViewController.bigImageView .hidden = NO;
        fromViewController.smallImageView.hidden = NO;
        [cellImageSnapshot removeFromSuperview];
        
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];
    }];

具体效果可以看Demo,Demo地址:Transition-Demo

版权声明：本文为 Crazy Steven 原创出品，欢迎转载，转载时请注明出处,此文章打赏所获收益皆归彦祖哥所有（如果有的话）！