3d翻转 ios_iOS自定义转场详解04—

这是自定义转场系列的第四篇。由于具有一定的连续性，我会忽略一些基础，所以如果你是第一次看这个系列，可以先过目之前的几篇 ——— UIViewControllerTransitioning的用法、实现Keynote中的神奇移动效果、实现通过圆圈放大缩小的转场动画。

老规矩，先端上GIF。

How to work

首先在StoryBoard上拖两个UIViewController。并且在第一个VC上放一个button，使用Action Segue连接到第二个VC。

然后回到代码界面。和以往一样，我们需要创建两个文件：一个用于从第一个VC过渡到第二个VC的动画(如push)，另一个这是第二个过渡到第一个VC的动画(如pop)。这里不得不说iOS7中引入的这种解耦合的方式，它的意义在于无论在哪儿需要用到转场动画的地方，直接把这两个文件扔过去就行了。

我们创建两个文件：KYPushTransition 和 KYPopTransition 。从名字可以看出，后一个是前一个的反转动画。其实，我们完全可以把两个文件写在一起：KYTransition 。因为两个文件的代码结构几乎别无二致，不同的地方也只要用布尔值区分一下就行了。但这里为了让介绍思路清晰，我们把两个动画分开来实现。

首先是KYPushTransition。

先继承 UIViewControllerAnimatedTransitioning 协议。实现下面两个方法：

- (NSTimeInterval)transitionDuration:(id )transitionContext{

//动画的时间

return 0.6f;

}

- (void)animateTransition:(id )transitionContext{

//动画的逻辑

...

}

下面具体介绍动画的逻辑。

- (void)animateTransition:(id )transitionContext{

//1

FirstViewController *fromVC = (FirstViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

SecondViewController *toVC = (SecondViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

UIView *fromView = fromVC.view;

UIView *toView = toVC.view;

UIView *containerView = [transitionContext containerView];

[containerView addSubview:toView];

[containerView sendSubviewToBack:toView];

//2

CATransform3D transform = CATransform3DIdentity;

transform.m34 = -0.002;

containerView.layer.sublayerTransform = transform;

//3

CGRect initialFrame = [transitionContext initialFrameForViewController:fromVC];

fromView.frame = initialFrame;

toView.frame = initialFrame;

//4

[self updateAnchorPointAndOffset:CGPointMake(0.0, 0.5) view:fromView];

//5

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = fromView.bounds;

gradient.colors = @[(id)[UIColor colorWithWhite:0.0 alpha:0.5].CGColor,

(id)[UIColor colorWithWhite:0.0 alpha:0.0].CGColor];

gradient.startPoint = CGPointMake(0.0, 0.5);

gradient.endPoint = CGPointMake(0.8, 0.5);

UIView *shadow = [[UIView alloc]initWithFrame:fromView.bounds];

shadow.backgroundColor = [UIColor clearColor];

[shadow.layer insertSublayer:gradient atIndex:1];

shadow.alpha = 0.0;

[fromView addSubview:shadow];

//6

[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{

//旋转fromView 90度

fromView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1.0, 0);

shadow.alpha = 1.0;

} completion:^(BOOL finished) {

//7

fromView.layer.anchorPoint = CGPointMake(0.5, 0.5);

fromView.layer.position = CGPointMake(CGRectGetMidX([UIScreen mainScreen].bounds), CGRectGetMidY([UIScreen mainScreen].bounds));

fromView.layer.transform = CATransform3DIdentity;

[shadow removeFromSuperview];

[transitionContext completeTransition:YES];

}];

}

解释一下。

1)通过上下文transitionContext获得前后两个UIView，这也是发生动画的具体对象。同时还需要获得containerView,这也是动画发生的地方。我们需要把后一个视图添加上去。为了保证后一个视图加上去之后不遮住前一个视图的动画，我们还要把后一个视图放到最后：[containerView sendSubviewToBack:toView];

2)为了保证视图产生3D的效果，我们需要设置layer的仿射变换。关于仿射变化和m34的概念，推荐一篇博客：iOS的三维透视投影。

3)为fromView、toView设置初始frame。

4)重置锚点。锚点就是视图旋转时候的中心，就是那个不动的点。关于锚点以及position的关系，你可以参考这一篇解释：这将是你最后一次纠结position与anchorPoint！。所以我们在设置了锚点的之后，还需要把layer的position也设置到相应位置：

-(void)updateAnchorPointAndOffset:(CGPoint)anchorPoint view:(UIView *)view{

view.layer.anchorPoint = anchorPoint;

view.layer.position = CGPointMake(0, CGRectGetMidY([UIScreen mainScreen].bounds));

}

方便记忆，你可以理解锚点会吸附到position上。所以光改变锚点不改变position，那么结果就是锚点确实改了，但是position还是在默认的(0.5，0.5)，也就是视图中心。就像这样：

5)给fromView增加左深右浅的阴影。并且一开始的透明度为0，随着翻转的角度变大过渡到1。

6)开始动画。这这里，我们让fromView翻转90度 fromView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1.0, 0);。这里要注意向外90度是-M_PI_2，y为1.0表示绕着y轴旋转。

7)动画结束，我们需要还原锚点的位置、恢复position的位置、恢复layer的transform为CATransform3DIdentity，并且把阴影层移除。由于一开始我没有没有恢复锚点和position的位置，而且一直没找到原因。知道我查看了视图的层级结构才恍然大悟：

可见，使用控制台的”Debug View Hierarchy“

是多么有用！

当然，还有最重要最关键的一步：[transitionContext completeTransition:YES];。告诉上下文，动画已经完成。如果你这里不这么做，你将无法从后一个视图返回前一个视图。

好了，至此已经完成所有push动画逻辑。实现pop的逻辑基本无二。

KYPopTransition

1、首先就是删除[containerView sendSubviewToBack:toView];，这时我们可不想让动画躲在后面。

2、第二个不同点，需要加上

//让toView的截图旋转90度

toView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0.0, 1.0, 0.0);

因为这时动画的起始应该先保持在90度的位置，然后慢慢过渡到0度。

3、阴影层的需要加在toView上，并且起始透明度应该为1，终止时为0。

How to Use

1、如果你是一个VC present 到另一个VC，那么FirstViewController和SecondViewController都需要继承协议是UIViewControllerTransitioningDelegate。

然后在FirstViewController中设置代理。

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

SecondViewController *secVC = (SecondViewController *)segue.destinationViewController;

secVC.transitioningDelegate = self;

[super prepareForSegue:segue sender:sender];

}

并实现协议的两个方法：分别对应present和dismiss。

- (id )animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{

KYPushTransition *flip = [KYPushTransition new];

return flip;

}

- (id )animationControllerForDismissedController:(UIViewController *)dismissed{

KYPopTransition *flip = [KYPopTransition new];

return flip;

}

2、如果你用UINavigationController去控制两个VC，此时如果你什么都不做，segue会自动变成标准的导航栏推进的push、pop。要使用我们自定义的动画，需要让FirstViewController继承协议UINavigationControllerDelegate，然后设置代理为自己self.navigationController.delegate = self;。

实现UINavigationControllerDelegate中的相关协议方法，只需要一个：

- (id )navigationController:(UINavigationController *)navigationController

animationControllerForOperation:(UINavigationControllerOperation)operation

fromViewController:(UIViewController *)fromVC

toViewController:(UIViewController *)toVC{

if (operation == UINavigationControllerOperationPush) {

KYPushTransition *flip = [KYPushTransition new];

return flip;

}else if (operation == UINavigationControllerOperationPop){

KYPopTransition *flip = [KYPopTransition new];

return flip;

}else{

return nil;

}

搞定，现在就运行了。

Where to go —— 如何为转场增加手势交互

如果是一个VC present 到另一个VC，那么就要实现UIViewControllerTransitioningDelegate中的两个方法，和UIViewControllerAnimatedTransitioning一样，分别对应 present 和 dismiss的动画。

- (id )interactionControllerForPresentation:(id )animator;

- (id )interactionControllerForDismissal:(id )animator;

这时，你可能已经被各种协议代理名字搞晕了，是的，我一开始也晕了，但只要多练几次还是能就熟悉的。

既然我们之前是创建了两个文件继承UIViewControllerAnimatedTransitioning来实现过渡动画，那么是不是也应该继承UIViewControllerInteractiveTransitioning来实现百分比交互动画呢？因为在图中，两者的关系是并列的。是的，你可以这么做。但是苹果提供了一个更好的类 ———— UIPercentDrivenInteractiveTransition。

顾名思义，我们就可以猜到这个类就是专门用来实现手势百分比交互的。怎么使用呢？

为了遵循解耦合，我们新建一个UIPercentDrivenInteractiveTransition的子类 —— KYPopInteractiveTransition。

创建一个方法-(void)addPopGesture:(UIViewController *)viewController;，用来给目标视图控制器添加一个边缘滑动手势：

-(void)addPopGesture:(UIViewController *)viewController{

presentedVC = viewController;

UIScreenEdgePanGestureRecognizer *edgeGes = [[UIScreenEdgePanGestureRecognizer alloc]initWithTarget:self action:@selector(edgeGesPan:)];

edgeGes.edges = UIRectEdgeLeft;

[viewController.view addGestureRecognizer:edgeGes];

}

实现相应的手势方法：

-(void)edgeGesPan:(UIScreenEdgePanGestureRecognizer *)edgeGes{

//1

CGFloat translation =[edgeGes translationInView:presentedVC.view].x;

CGFloat percent = translation / (presentedVC.view.bounds.size.width);

percent = MIN(1.0, MAX(0.0, percent));

NSLog(@"%f",percent);

switch (edgeGes.state) {

case UIGestureRecognizerStateBegan:{

//2

self.interacting = YES;

[presentedVC dismissViewControllerAnimated:YES completion:nil];

//如果是navigationController控制，这里应该是[presentedVC.navigationController popViewControllerAnimated:YES];

break;

}

case UIGestureRecognizerStateChanged:{

//3

[self updateInteractiveTransition:percent];

break;

}

case UIGestureRecognizerStateEnded:{

//4

self.interacting = NO;

if (percent > 0.5) {

[self finishInteractiveTransition];

}else{

[self cancelInteractiveTransition];

}

break;

}

default:

break;

}

1)计算手指在X轴方向上的偏移距离，与屏幕的宽度的之比保存为一个百分比。也就是说，当手指划过屏幕的距离超过屏幕宽度的1/2，那么剩下的动画就自动完成；否则，取消动画。这里用了MIN和MAX把百分比始终控制在了0~1之间。

2)滑动开始，指定要执行的操作。这里因为没有使用UINavigation控制两个VC，所以是dismissViewControllerAnimated:。如果是用UINavigation去控制的，那么这里相应的应该是navigationController popViewControllerAnimated:。 self.interacting的作用稍后揭晓。

3)在UIGestureRecognizerStateChanged 调用 [self updateInteractiveTransition:percent]。这里我们把刚才的百分比传了过去，系统就可以通过这个0～1的竖数值实时改变动画的进度。

4)当UIGestureRecognizerStateEnded的时候，我们需要判断此时手指是否划过屏幕大于一半的距离。如果大于一半，告诉系统完成：[self finishInteractiveTransition]；反之，告诉系统取消操作：[self cancelInteractiveTransition]，这时动画也将返回初始位置。

特别注意，当我们使用了手势百分比交互，在相应的动画逻辑KYPopTransition中，把原来的[transitionContext completeTransition:YES] 改成 [transitionContext completeTransition:![transitionContext transitionWasCancelled]]。如果一直是YES的话，当我们手指划过小于屏幕一半，即使系统知道是取消动画，但在上下文中依然是写死的YES。

使用手势百分比交互

在FirstViewController中的-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender里面，创建一个KYPopInteractiveTransition的实例并把SecondVC传过去：

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

...

popInteractive = [KYPopInteractiveTransition new];

[popInteractive addPopGesture:secVC];

...

}

然后实现UIViewControllerTransitioningDelegate里的这个关于手势百分比交互的方法：

- (id )interactionControllerForDismissal:(id )animator{

return popInteractive.interacting ? popInteractive : nil;

}

好了，这里你发现我们使用了popInteractive.interacting来判断，还记得之前买的关子吗？self.interacting的作用就在这里。因为- (id )interactionControllerForDismissal:(id )animator 这个方法在点击dismiss和滑动dismiss时候都会调用。然而如果只是return popInteractive;的话，当我们点击dismiss的时候，程序将不会做出反应。所以，我们需要区分，到底是点击dismiss还是滑动dismiss。因此，我们需要一个布尔值来判断，就是这样。

这个系列应该差不多到这里就结束了。本篇的源码你可以在这里获得。

有任何疑问，欢迎在下方评论区域留言:D