前几天听了彦祖哥的转场动画，收获颇丰，经过彦祖哥的同意，在此写成文字版分享给大家。
转场动画介绍了两种，一种是翻页效果的转场动画，一种是通过截图进行的转场动画，下面先说下翻页效果的转场动画
翻页转场
翻页效果的转场动画一共是三步，分别是翻转、处理透明度、加手势
准备动作：
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
