iOS 自定义转场动画浅谈
yangchanfu
7年前
<p>路漫漫其修远兮，吾将上下而求索</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2511102a25e9b57b0863442ab5bc35c2.gif"></p> <p style="text-align:center">开门效果.gif</p> <h3><strong>前记</strong></h3> <p>想研究自定义转场动画很久了，时间就像海绵，挤一挤还是有的，花了差不多有10天的时间，终于对转场动画了解了一点。自从 iOS 7 以后，我们就可以自定义转场动画，实现我们想要的效果，在这之前，我们先来看一张图，大概了解下，需要知道些什么</p> <p>相关类联系图</p> <p><img src="https://simg.open-open.com/show/ccdfffafbb4623758e3b8c62a931f1f4.png"></p> <p style="text-align:center">Paste_Image.png</p> <p>相信各位看官也差不多看完这张图了，下面我们就来简单了解下其中的类和相关的函数</p> <p>说到转场动画，其实无非就是我们常用的 push pop present dismiss 四种动画，其中前面两个是成对使用，后面两个成对使用，我们先看看 push 这组在自定义转场动画中所涉及到的类</p> <p>由于 push 动画组需要配合 navigationController 来使用，所以上图中的 UINavigationControllerDelegate 肯定是我们需要的类</p> <p><strong>UINavigationControllerDelegate</strong></p> <p>先来看看其中需要用到的函数</p> <pre> <code class="language-objectivec">- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0); - (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0);</code></pre> <p>第一个函数的返回值是一个 id <UIViewControllerInteractiveTransitioning> 值</p> <p>第二个函数返回的值是一个 id <UIViewControllerAnimatedTransitioning> 值</p> <p>那么我们就先从这两个返回值入手，来看下两个函数的作用</p> <p><strong>UIViewControllerInteractiveTransitioning 、UIPercentDrivenInteractiveTransition</strong></p> <p>这两个类又是干什么的呢？ UIPercentDrivenInteractiveTransition 遵守协议 UIViewControllerInteractiveTransitioning ,通过查阅资料了解到， UIPercentDrivenInteractiveTransition 这个类的对象会根据我们的手势，来决定我们的自定义过渡的完成度，也就是这两个其实是和手势交互相关联的，自然而然我们就想到了 iOS 7 引进的侧滑手势，对，就是侧滑手势，说到这里，我就顺带介绍一个类， UIScreenEdgePanGestureRecognizer ，手势侧滑的类，具体怎么使用，后面我会陆续讲到。</p> <p>涉及函数</p> <pre> <code class="language-objectivec">//更新进度 - (void)updateInteractiveTransition:(CGFloat)percentComplete; //取消转场 回到转场前的效果 - (void)cancelInteractiveTransition; //完成转场 - (void)finishInteractiveTransition;</code></pre> <p><strong>UIViewControllerAnimatedTransitioning</strong></p> <p>在这个类中，我们又看到了两个函数</p> <pre> <code class="language-objectivec">//转场时间 - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;</code></pre> <p>其中又涉及到一个新的类 UIViewControllerContextTransitioning ，那么这个又是干什么的呢？我们等下再来了解，先来谈谈第一个函数 transitionDuration ，从返回值我们可以猜测出这是和时间有关的，没错，这就是我们自定义转场动画所需要的时间</p> <p>那么下面我们就来看看 UIViewControllerContextTransitioning</p> <p><strong>UIViewControllerContextTransitioning</strong></p> <p>这个类就是我们自定义转场动画所需要的核心，即转场动画的上下文，定义了转场时需要的元素，比如在转场过程中所参与的视图控制器和视图的相关属性</p> <pre> <code class="language-objectivec">//转场动画的容器 @property(nonatomic, readonly) UIView *containerView; //通过对应的`key`可以得到我们需要的`vc` - (UIViewController *)viewControllerForKey:(UITransitionContextViewControllerKey)key //转场动画完成时候调用，必须调用，否则在进行其他转场没有任何效果 - (void)completeTransition:(BOOL)didComplete</code></pre> <p>看到这里，我们现在再去看 UINavigationControllerDelegate 中的两个函数和 UIViewControllerAnimatedTransitioning 中的 animateTransition 函数，就能完全理解了</p> <pre> <code class="language-objectivec">//主要用于手势交互转场 for push or pop - (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0); //非手势交互转场 for push or pop - (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0); //实现转场动画 通过transitionContext - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;</code></pre> <p>到此，我们还有一个类没有了解，那就是 UIViewControllerTransitioningDelegate 有了前面的分析，我们可以很好的理解</p> <p><strong>UIViewControllerTransitioningDelegate</strong></p> <p>主要是针对 present 和 dismiss 动画的转场</p> <pre> <code class="language-objectivec">//非手势转场交互 for present - (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source //非手势转场交互 for dismiss - (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed //手势交互 for dismiss - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator //手势交互 for present - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)animator</code></pre> <p>基本定义和概览我们差不多应该有了一定的了解，正如上图中的简单描述。</p> <p>了解性的东西说了这么多，下面我们就来点实际性的东西，除了第一张开门那种自定义动画，再来几个比较常用的动画</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8a4c8ff9e34cb8c890710bdb36abda8f.gif"></p> <p style="text-align:center">CircleSpread.gif</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f28a0db1bfe98a74e493fe74ff9da545.gif"></p> <p style="text-align:center">circleRectSpread.gif</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8aee5bb5839bd88fc3d3aa079015fd47.gif"></p> <p style="text-align:center">page.gif</p> <p>这些动画都比较简单，相信许多大神都很清楚，还望见谅，下面我就对每一种进行分析分析，在分析动画之前，先来看看怎么将上面的各个类进行封装起来，使用更方便，这里不得不感谢很久之前看到的一篇文章，从他的 <a href="/misc/goto?guid=4959746929624911081" rel="nofollow,noindex">文章</a> 中收获非常大。</p> <p>在学习转场动画的时候，虽然对所有类的关系有了一定了解，但是封装的时候，完全没有想到还有这么好的思路，确实是学习了。下面我们就一起来看看封装思路。</p> <p><strong>封装思路</strong></p> <p><strong>1. 新建一个综合管理转场动画的类</strong></p> <p>作用：主要是管理转场所需要的一些设置，诸如转场时间和转场的实现（主要是在子类中进行实现，分离开来），用户在自定义转场动画的时候，只需要继承该类并重写父类方法就可以</p> <p>类名： GLTransitionManager ，需要准守的协议有 <UINavigationControllerDelegate,UIViewControllerTransitioningDelegate></p> <p>通过这样，就可以将 present 和 push 动画相关的操作在该类中进行管理</p> <p>GLTransitionManager.h 中具体方法</p> <pre> <code class="language-objectivec">@interface GLTransitionManager : NSObject<UINavigationControllerDelegate,UIViewControllerTransitioningDelegate> /** 转场动画的时间 默认为0.5s */ @property (nonatomic,assign) NSTimeInterval duration; /** 入场动画 @param contextTransition 实现动画 */ - (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition; /** 退场动画 @param contextTransition 实现动画 */ - (void)setBackAnimation:(id<UIViewControllerContextTransitioning>)contextTransition;</code></pre> <p>相信大家也看到了在入场和退场动画中都有 (id<UIViewControllerContextTransitioning>) contextTransition 这么一个参数，通过该参数，我们可以获取转场动画的相关 vc 和其他信息，进行转场动画的实现，即我们在自定义转场动画的时候，只需要重写该两个方法就可以，通过 contextTransition 来实现动画，而 <UIViewControllerContextTransitioning> 又在 UIViewControllerAnimatedTransitioning 协议的方法 - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext 中涉及到，于是我又新建了一个准守协议 UIViewControllerAnimatedTransitioning 的类 GLTransitionAnimation ，也就是下面我们将的类</p> <p><strong>2.转场动画配置及实现类</strong></p> <p>作用：虽然是配置和实现类，但是在该类中并没有进行实现，这里也正是之前那个博主的高明之处，至少我是这么认为的。在该类中，我们用 block 的传值方法将其传入到我们的管理类中，也就是 GLTransitionManager</p> <p>GLTransitionAnimation.h 文件</p> <pre> <code class="language-objectivec">/** GLTransitionAnimation 块 @param contextTransition 将满足UIViewControllerContextTransitioning协议的对象传到管理内 在管理类对动画统一实现 */ typedef void(^GLTransitionAnimationBlock)(id <UIViewControllerContextTransitioning> contextTransition); @interface GLTransitionAnimation : NSObject<UIViewControllerAnimatedTransitioning> @property (nonatomic,copy) GLTransitionAnimationBlock animationBlock; /** 初始化方法 @param duration 转场时间 @return 返回 */ - (id)initWithDuration:(NSTimeInterval)duration;</code></pre> <p>GLTransitionAnimation.m 文件比较简单，这里就先不详说，我们先回到管理类中，来看看怎么使用</p> <p>GLTransitionManager.m 文件，</p> <p>在此种定义两个属性</p> <pre> <code class="language-objectivec">/** 入场动画 */ @property (nonatomic,strong) GLTransitionAnimation *toTransitionAnimation; /** 退场动画 */ @property (nonatomic,strong) GLTransitionAnimation *backTransitionAnimation;</code></pre> <p>实现方法</p> <pre> <code class="language-objectivec">#pragma mark == 懒加载 - (GLTransitionAnimation *)toTransitionAnimation { if (nil == _toTransitionAnimation) { __weak typeof(self) weakSelf = self; _toTransitionAnimation = [[GLTransitionAnimation alloc] initWithDuration:self.duration ]; _toTransitionAnimation.animationBlock = ^(id<UIViewControllerContextTransitioning> contextTransition) { [weakSelf setToAnimation:contextTransition]; }; } return _toTransitionAnimation; } - (GLTransitionAnimation *)backTransitionAnimation { if (nil == _backTransitionAnimation) { __weak typeof(self) weakSelf = self; _backTransitionAnimation = [[GLTransitionAnimation alloc] initWithDuration:self.duration]; _backTransitionAnimation.animationBlock = ^(id<UIViewControllerContextTransitioning> contextTransition) { [weakSelf setBackAnimation:contextTransition]; }; } return _backTransitionAnimation; }</code></pre> <p>通过上面这一方法，我们就很好的将关键参数和对外接口联系起来了。这样我们就只需要在 setToAnimation 和 setBackAnimation 进行转场动画的具体实现即可。</p> <p>当然这里还有一个小问题，相信各位也发现了，就是为什么将属性定义在了 .m 文件里呢？是的，这里确实是定义在了 .m 文件中，其实就是为了更少的暴露不需要的。</p> <p>搞定这个之后，我们在来看看，在上面时候，调用该属性呢？</p> <p>下面我们就来看具体使用的地方</p> <pre> <code class="language-objectivec">//非手势转场交互 for present - (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{ return self.toTransitionAnimation; } //非手势转场交互 for dismiss - (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{ return self.backTransitionAnimation; } //================ //非手势转场交互 for push or pop /*****注释:通过 fromVC 和 toVC 我们可以在此设置需要自定义动画的类 *****/ - (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC { _operation = operation; if (operation == UINavigationControllerOperationPush) { return self.toTransitionAnimation; } else if (operation == UINavigationControllerOperationPop) { return self.backTransitionAnimation; } else { return nil; } }</code></pre> <p>在这两个地方使用后，我们差不多就完成了一半了，那还一部分呢？那就是我们的手势滑动，下面我们就来看看手势滑动。</p> <p><strong>3.手势交互管理类</strong></p> <p>作用：主要通过侧滑手势来管理交互，在iOS 7后引入新的类 UIPercentDrivenInteractiveTransition ，该类的对象会根据我们的手势，来决定我们的自定义过渡的完成度，所以此次我采用继承的方式，然后在继承的类中加入滑动手势类，这里加入的是侧滑手势类 UIScreenEdgePanGestureRecognizer ，这个类也就是我定义的 GLInteractiveTransition 类</p> <p>GLInteractiveTransition.h 文件</p> <pre> <code class="language-objectivec">/** 手势的方向枚举 - GLPanEdgeTop:屏幕上方 - GLPanEdgeLeft:屏幕左侧 - GLPanEdgeBottom: 屏幕下方 - GLPanEdgeRight: 屏幕右方 */ typedef NS_ENUM(NSInteger,GLEdgePanGestureDirection) { GLPanEdgeTop = 0, GLPanEdgeLeft, GLPanEdgeBottom, GLPanEdgeRight }; ///** // 手势转场类型 // // - GLInteractiveTransitionPush: push // - GLInteractiveTransitionPop: pop // - GLInteractiveTransitionPresent: present // - GLInteractiveTransitionDismiss: dismiss // */ //typedef NS_ENUM(NSInteger,GLInteractiveTransitionType) { // GLInteractiveTransitionPush = 0, // GLInteractiveTransitionPop, // GLInteractiveTransitionPresent , // GLInteractiveTransitionDismiss //}; @interface GLInteractiveTransition : UIPercentDrivenInteractiveTransition /** 是否满足侧滑手势交互 */ @property (nonatomic,assign) BOOL isPanGestureInteration; /** 转场时的操作 不用传参数的block */ @property (nonatomic,copy) dispatch_block_t eventBlcok; /** 添加侧滑手势 @param view 添加手势的view @param direction 手势的方向 */ - (void)addEdgePageGestureWithView:(UIView *)view direction:(GLEdgePanGestureDirection)direction;</code></pre> <p>在 .h 文件中，定义了两个属性，一个是用来判断是否需满足侧滑手势，这个在后面会讲到。另一个是用来在侧滑的时候执行所需要的转场的 block ，之前本来是没有加这个的，但是在后面使用的时候，由于想加侧滑的 present 和 push 效果，所以就加了一个。</p> <p>下面看看 .m 文件滑动手势中的具体实现</p> <pre> <code class="language-objectivec">- (void)handlePopRecognizer:(UIPanGestureRecognizer*)recognizer { // 计算用户手指划了多远 CGFloat progress = fabs([recognizer translationInView:self.gestureView].x) / (self.gestureView.bounds.size.width * 1.0); progress = MIN(1.0, MAX(0.0, progress)); switch (recognizer.state) { case UIGestureRecognizerStateBegan: { _isPanGestureInteration = YES; if (self.eventBlcok) { self.eventBlcok(); } // 创建过渡对象，弹出viewController // // UIViewController *fromVc = [self gl_viewController]; // // switch (self.transitionType) { // case GLInteractiveTransitionPush: // { // // } // break; // case GLInteractiveTransitionPop: // { // if (fromVc.navigationController) { // [fromVc.navigationController popViewControllerAnimated:YES]; // } // } // break; // case GLInteractiveTransitionPresent: // { // // } // break; // case GLInteractiveTransitionDismiss: // { // [fromVc dismissViewControllerAnimated:YES completion:nil]; // } // break; // default: // break; // } break; } case UIGestureRecognizerStateChanged: { // 更新 interactive transition 的进度 [self updateInteractiveTransition:progress]; break; } case UIGestureRecognizerStateEnded: case UIGestureRecognizerStateCancelled: { // NSLog(@" 打印信息:%f",progress); // 完成或者取消过渡 if (progress > 0.5) { [self finishInteractiveTransition]; } else { [self cancelInteractiveTransition]; } _isPanGestureInteration = NO; break; } default: break; } }</code></pre> <p>手势交互管理类的核心代码差不多就这么多，下面我们看看怎么使用</p> <p><strong>4. UIViewController + GLTransition</strong></p> <p>为了和系统的转场动画的函数区分开来，这里我新建了一个 UIViewController 的 category 类 UIViewController + GLTransition ，在其中定义了四个函数，分别如下</p> <pre> <code class="language-objectivec">/** push动画 @param viewController 被push viewController @param transitionManager 控制类 */ - (void)gl_pushViewControler:(UIViewController *)viewController withAnimation:(GLTransitionManager*)transitionManager; /** present动画 @param viewController 被present viewController @param transitionManager 控制类 */ - (void)gl_presentViewControler:(UIViewController *)viewController withAnimation:(GLTransitionManager*)transitionManager; /** 注册入场手势 @param direction 方向 @param blcok 手势转场触发的点击事件 */ - (void)gl_registerToInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok; /** 注册返回手势 @param direction 侧滑方向 @param blcok 手势转场触发的点击事件 */ - (void)gl_registerBackInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok;</code></pre> <p>下面我们看看具体实现</p> <p>UIViewController (GLTransition).m 文件</p> <pre> <code class="language-objectivec">- (void)gl_pushViewControler:(UIViewController *)viewController withAnimation:(GLTransitionManager *)transitionManager { if (!viewController) { return; } if (!transitionManager) { return; } if (self.navigationController) { self.navigationController.delegate = transitionManager; GLInteractiveTransition *toInteractiveTransition = objc_getAssociatedObject(self, &kToAnimationKey); if (toInteractiveTransition) { [transitionManager setValue:toInteractiveTransition forKey:@"toInteractiveTransition"]; } objc_setAssociatedObject(viewController, &kAnimationKey, transitionManager, OBJC_ASSOCIATION_RETAIN_NONATOMIC); [self.navigationController pushViewController:viewController animated:YES]; } } - (void)gl_presentViewControler:(UIViewController *)viewController withAnimation:(GLTransitionManager *)transitionManager { if (!viewController) { return; } if (!transitionManager) { return; } //present 动画代理 被执行动画的vc设置代理 viewController.transitioningDelegate = transitionManager; GLInteractiveTransition *toInteractiveTransition = objc_getAssociatedObject(self, &kToAnimationKey); if (toInteractiveTransition) { [transitionManager setValue:toInteractiveTransition forKey:@"toInteractiveTransition"]; } objc_setAssociatedObject(viewController, &kAnimationKey, transitionManager, OBJC_ASSOCIATION_RETAIN_NONATOMIC); [self presentViewController:viewController animated:YES completion:nil]; } - (void)gl_registerToInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok { GLInteractiveTransition *interactiveTransition = [[GLInteractiveTransition alloc] init]; interactiveTransition.eventBlcok = blcok; [interactiveTransition addEdgePageGestureWithView:self.view direction:direction]; objc_setAssociatedObject(self, &kToAnimationKey, interactiveTransition, OBJC_ASSOCIATION_RETAIN_NONATOMIC); } - (void)gl_registerBackInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok { GLInteractiveTransition *interactiveTransition = [[GLInteractiveTransition alloc] init]; interactiveTransition.eventBlcok = blcok; [interactiveTransition addEdgePageGestureWithView:self.view direction:direction]; //判读是否需要返回 然后添加侧滑 GLTransitionManager *animator = objc_getAssociatedObject(self, &kAnimationKey); if (animator) { //用kvc的模式 给 animator的backInteractiveTransition 退场赋值 [animator setValue:interactiveTransition forKey:@"backInteractiveTransition"]; } }</code></pre> <p>在 push 和 present 中，有几个需要注意的地方</p> <p>1、 self.navigationController.delegate = transitionManager<br> 2、 viewController.transitioningDelegate = transitionManager</p> <p>上面两个主要是将 navigationController 的代理和 viewController 的 transitioningDelegate 指向对象 transitionManager ，这个对象是准守了 <UINavigationControllerDelegate,UIViewControllerTransitioningDelegate> 两个协议的，这样我们就能够在 push 和 present 的时候，简单的去调协议方法。</p> <p>3、设置手势交互转场</p> <pre> <code class="language-objectivec">GLInteractiveTransition *toInteractiveTransition = objc_getAssociatedObject(self, &kToAnimationKey); if (toInteractiveTransition) { [transitionManager setValue:toInteractiveTransition forKey:@"toInteractiveTransition"]; }</code></pre> <p>在 push 和 present 方法中，都有这样的代码，这里为了减少不必要的暴露，在 GLTransitionManager.m 文件中，我还定义了两个属性</p> <pre> <code class="language-objectivec">/** 入场手势 */ @property (nonatomic,strong) GLInteractiveTransition *toInteractiveTransition; /** 退场手势 */ @property (nonatomic,strong) GLInteractiveTransition *backInteractiveTransition;</code></pre> <p>并且通过 kvc 的方式对其进行赋值，当转场动画进行的时候，会先去调用非转场动画的方法，比如 push 的时候，会先调用</p> <pre> <code class="language-objectivec">- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC</code></pre> <p>然后再调用手势交互</p> <pre> <code class="language-objectivec">//手势交互 for push or pop - (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController</code></pre> <p>这个时候，我们就需要加一个判断，也就是通过 GLInteractiveTransition 类中的是否满足侧滑手势交互 isPanGestureInteration 这个属性来判断，前面在侧滑手势刚刚进行的时候，就对其进行了赋值，并设置为 yes ，对应的实现代码就是</p> <pre> <code class="language-objectivec">- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController { if (_operation == UINavigationControllerOperationPush) { return self.toInteractiveTransition.isPanGestureInteration ? self.toInteractiveTransition:nil; } else{ return self.backInteractiveTransition.isPanGestureInteration ? self.backInteractiveTransition:nil; } }</code></pre> <p>如果返回的为 nil ，那么就不会去调用手势交互类，否则则会调用。同理， present 的时候也是一样</p> <p>所以就有了下面的代码</p> <pre> <code class="language-objectivec">//手势交互 for dismiss - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator{ return self.backInteractiveTransition.isPanGestureInteration ? self.backInteractiveTransition:nil; } //手势交互 for present - (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)animator{ return self.toInteractiveTransition.isPanGestureInteration ? self.toInteractiveTransition:nil; }</code></pre> <p>在 UIViewController + GLTransition 中的 push 和 present 函数中，还有一个需要注意的地方，那就是</p> <pre> <code class="language-objectivec">objc_setAssociatedObject(viewController, &kAnimationKey, transitionManager, OBJC_ASSOCIATION_RETAIN_NONATOMIC);</code></pre> <p>这里通过 runtime 的方式给 vc 设置了一个属性值，为什么这么做呢？因为在 arc 下，如果我们在使用 GLTransitionManager 的时候去创建一个对象而非 vc 的属性，那么在 push 的时候 GLTransitionManager 这个对象就会被系统释放掉，这样我们后面所有有关转场的操作就不能再实现了，或许我们可以给 vc 建一个 base 类，然后添加一个 GLTransitionManager 对象的属性，但是这样或许有点复杂，所有这里就这样处理了。</p> <p>在 UIViewController + GLTransition 中还有两个函数的实现，其原理，我相信大家应该都能看明白了，就不再详细说明了</p> <pre> <code class="language-objectivec">- (void)gl_registerToInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok { GLInteractiveTransition *interactiveTransition = [[GLInteractiveTransition alloc] init]; interactiveTransition.eventBlcok = blcok; [interactiveTransition addEdgePageGestureWithView:self.view direction:direction]; objc_setAssociatedObject(self, &kToAnimationKey, interactiveTransition, OBJC_ASSOCIATION_RETAIN_NONATOMIC); } - (void)gl_registerBackInteractiveTransitionWithDirection:(GLEdgePanGestureDirection)direction eventBlcok:(dispatch_block_t)blcok { GLInteractiveTransition *interactiveTransition = [[GLInteractiveTransition alloc] init]; interactiveTransition.eventBlcok = blcok; [interactiveTransition addEdgePageGestureWithView:self.view direction:direction]; //判读是否需要返回 然后添加侧滑 GLTransitionManager *animator = objc_getAssociatedObject(self, &kAnimationKey); if (animator) { //用kvc的模式 给 animator的backInteractiveTransition 退场赋值 [animator setValue:interactiveTransition forKey:@"backInteractiveTransition"]; } }</code></pre> <p>整个封装的思路差不多到这里就完了，希望对大家有用</p> <p>文章有点长，希望大家能够理解，因为后面还有。。。。</p> <p><strong>几个动画的具体实现</strong></p> <p><strong>1、开门动画</strong></p> <p>由于我们已经有了基类``，所以当我们需要实现什么动画的时候，只需要集成该类就可以了</p> <p>针对开门动画我新建了下面这么一个类 GLTransitionManager</p> <pre> <code class="language-objectivec">@interface GLOpenDoorAnimation : GLTransitionManager @end</code></pre> <p>然后在重新父类的方法</p> <pre> <code class="language-objectivec">- (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition</code></pre> <p>具体实现</p> <p>1、根据 id<UIViewControllerContextTransitioning> 对象先得到几个关键值，目标 vc 和当前 vc 和容器 containerView</p> <pre> <code class="language-objectivec">//获取目标动画的VC UIViewController *toVc = [contextTransition viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromVc = [contextTransition viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView *containerView = [contextTransition containerView];</code></pre> <p>2、由于是开门动画，所以其过程大概是这样的：当前 vc 逐渐缩小，目标 vc 慢慢从屏幕两边移到中间，但是我们又不能把目标 vc 的 view 分成两个部分，所以这里我们可以利用截图，来给用户造成一个假象。先截两个图，然后分别让其坐标居于屏幕外，然后用动画让其慢慢移动到屏幕中间，动画完成的时候，移除当前两个截图。这里有个小问题，那就是当前 vc 的缩放，虽然我们能够使其缩小，但是这样，如果涉及到侧滑手势的话，问题就来了。因为 view 的宽发生了变化，这样我们根据宽度来计算滑动的距离，从而更新转场动画的时候就会出现问题，导致</p> <pre> <code class="language-objectivec">- (void)handlePopRecognizer:(UIPanGestureRecognizer*)recognizer { // 计算用户手指划了多远 CGFloat progress = fabs([recognizer translationInView:self.gestureView].x) / (self.gestureView.bounds.size.width * 1.0); progress = MIN(1.0, MAX(0.0, progress));</code></pre> <p>中的 progress 出现问题。所以这里也就采用了截图的方式，对该截图进行缩放，而不去修改 vc 的 view 。</p> <p>下面看下核心代码</p> <pre> <code class="language-objectivec">- (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition { //获取目标动画的VC UIViewController *toVc = [contextTransition viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromVc = [contextTransition viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView *containerView = [contextTransition containerView]; UIView *fromView = fromVc.view; UIView *toView = toVc.view; //截图 UIView *toView_snapView = [toView snapshotViewAfterScreenUpdates:YES]; CGRect left_frame = CGRectMake(0, 0, CGRectGetWidth(fromView.frame) / 2.0, CGRectGetHeight(fromView.frame)); CGRect right_frame = CGRectMake(CGRectGetWidth(fromView.frame) / 2.0, 0, CGRectGetWidth(fromView.frame) / 2.0, CGRectGetHeight(fromView.frame)); UIView *from_left_snapView = [fromView resizableSnapshotViewFromRect:left_frame afterScreenUpdates:NO withCapInsets:UIEdgeInsetsZero]; UIView *from_right_snapView = [fromView resizableSnapshotViewFromRect:right_frame afterScreenUpdates:NO withCapInsets:UIEdgeInsetsZero]; toView_snapView.layer.transform = CATransform3DMakeScale(0.7, 0.7, 1); from_left_snapView.frame = left_frame; from_right_snapView.frame = right_frame; //将截图添加到 containerView 上 [containerView addSubview:toView_snapView]; [containerView addSubview:from_left_snapView]; [containerView addSubview:from_right_snapView]; fromView.hidden = YES; [UIView animateWithDuration:self.duration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{ //左移 from_left_snapView.frame = CGRectOffset(from_left_snapView.frame, -from_left_snapView.frame.size.width, 0); //右移 from_right_snapView.frame = CGRectOffset(from_right_snapView.frame, from_right_snapView.frame.size.width, 0); toView_snapView.layer.transform = CATransform3DIdentity; } completion:^(BOOL finished) { fromView.hidden = NO; [from_left_snapView removeFromSuperview]; [from_right_snapView removeFromSuperview]; [toView_snapView removeFromSuperview]; if ([contextTransition transitionWasCancelled]) { [containerView addSubview:fromView]; } else { [containerView addSubview:toView]; } [contextTransition completeTransition:![contextTransition transitionWasCancelled]]; }]; }</code></pre> <p>setBackAnimation 动画和上面的大同小异，就不再详细说明，文章后面有 demo 地址，大家可以看看。</p> <p><strong>2、圆圈逐渐放大转场动画</strong></p> <p>在做动画之前，我们先要了解其大概原理</p> <p>这里我简单的做了个草图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7bd948f66c6b377186cd5d23b349def6.png"></p> <p style="text-align:center">Paste_Image.png</p> <p>小圆和大圆分别表示动画前和动画后</p> <p>这里我们采用的是 UIBezierPath + mask + CAShapeLayer 的策略对其进行实习</p> <p>大家都知道， UIBezierPath 可以画圆形，而 CAShapeLayer 又具备 CGPathRef path 属性，可以和 UIBezierPath 联系起来，而 UIView 又具备 CALayer *mask 属性，这样三者就这么巧妙的联系起来了。</p> <p>在这里，我们使用 CABasicAnimation 动画，通过对其设置 [CABasicAnimation animationWithKeyPath:@"path"] 来让其执行我们想要的 path 路径动画</p> <p>于是就有了下面的代码</p> <pre> <code class="language-objectivec">- (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition { //获取目标动画的VC UIViewController *toVc = [contextTransition viewControllerForKey:UITransitionContextToViewControllerKey]; UIView *containerView = [contextTransition containerView]; [containerView addSubview:toVc.view]; //创建UIBezierPath路径 作为后面动画的起始路径 UIBezierPath *startPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:0 endAngle:2*M_PI clockwise:YES]; //创建结束UIBezierPath //首先我们需要得到后面路径的半径 半径应该是距四个角最远的距离 CGFloat x = self.centerPoint.x; CGFloat y = self.centerPoint.y; //取出其中距屏幕最远的距离 来求围城矩形的对角线 即我们所需要的半径 CGFloat radius_x = MAX(x, containerView.frame.size.width - x); CGFloat radius_y = MAX(y, containerView.frame.size.height - y); //补充下 sqrtf求平方根 double pow(double x, double y); 求 x 的 y 次幂（次方） //通过勾股定理算出半径 CGFloat endRadius = sqrtf(pow(radius_x, 2) + pow(radius_y, 2)); UIBezierPath *endPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:endRadius startAngle:0 endAngle:2*M_PI clockwise:YES]; // self.endPath = endPath; //创建CAShapeLayer 用以后面的动画 CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.path = endPath.CGPath; toVc.view.layer.mask = shapeLayer; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; animation.fromValue = (__bridge id _Nullable)(startPath.CGPath); animation.duration = self.duration; animation.delegate = (id)self; // animation.removedOnCompletion = NO;//执行后移除动画 //保存contextTransition 后面动画结束的时候调用 [animation setValue:contextTransition forKey:@"pathContextTransition"]; [shapeLayer addAnimation:animation forKey:nil]; self.maskShapeLayer = shapeLayer; }</code></pre> <p>由于代码中有比较详细的说明，所以这里就不再详细说明， setBackAnimation 也大同小异</p> <p><strong>3、圆圈和目标vc共同缩放转场动画</strong></p> <p>这个比较简单，主要是利用 UIView 的缩放进行的，由于目标 vc 的上角和圆是相切的，所以，这里我们可以先假设目标 vc 处于正常状态，然后再跟进小圆的中心，画一个大圆，让其和目标 vc 一起缩放就是。这里留了一个缺陷，那就是不支持侧滑，因为我是用目标 vc 进行缩放的，而没有截图，大家可以试试。</p> <p>其实现大概为</p> <pre> <code class="language-objectivec">- (CGRect)frameToCircle:(CGPoint)centerPoint size:(CGSize)size { CGFloat radius_x = fmax(centerPoint.x, size.width - centerPoint.x); CGFloat radius_y = fmax(centerPoint.y, size.height - centerPoint.y); CGFloat endRadius = 2 * sqrtf(pow(radius_x, 2) + pow(radius_y, 2)); CGRect rect = {CGPointZero,CGSizeMake(endRadius, endRadius)}; return rect; } - (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition { //获取目标动画的VC UIViewController *toVc = [contextTransition viewControllerForKey:UITransitionContextToViewControllerKey]; UIView *containerView = [contextTransition containerView]; // [toVc beginAppearanceTransition:YES animated:YES]; CGPoint center = toVc.view.center; CGRect rect = [self frameToCircle:self.centerPoint size:toVc.view.bounds.size]; UIView *backView = [[UIView alloc] initWithFrame:rect]; backView.backgroundColor = UICOLOR_FROM_RGB_OxFF(0xFFA500); backView.center = self.centerPoint; backView.layer.cornerRadius = backView.frame.size.height / 2.0; backView.transform = CGAffineTransformMakeScale(0.01, 0.01); [containerView addSubview:backView]; self.startView = backView; toVc.view.transform = CGAffineTransformMakeScale(0.01, 0.01); toVc.view.alpha = 0; toVc.view.center = self.centerPoint; [containerView addSubview:toVc.view]; [UIView animateWithDuration:self.duration animations:^{ backView.transform = CGAffineTransformIdentity; toVc.view.center = center; toVc.view.transform = CGAffineTransformIdentity; toVc.view.alpha = 1; } completion:^(BOOL finished) { [contextTransition completeTransition:!contextTransition.transitionWasCancelled]; // [toVc endAppearanceTransition]; }]; }</code></pre> <p>setBackAnimation 也大同小异，就不再说明</p> <p><strong>4、翻书效果</strong></p> <p>这个还是花了些时间，主要不在思想上，而是在翻书有个阴影效果哪里，等下我会讲到。先说说思路，主要还是通过截图来实现。首先需要截当前 vc 的部分，如果向左滑则截右边，向右则截左，然后还需要截目标 vc 的两部分图，分别加到 containerView 上，假如现在向左翻，那么就要将目标 vc 的左边截图加到 containerView 的左边并且隐藏起来，让其绕 y 轴旋转 M_PI_2 ，就是直插屏幕的样子，那么目标 vc 的右边截图就需要放到当前 vc 的下面，这样当当前 vc 在滑动的时候，我们就能看到下面的图了。当当前 vc 绕 y 轴旋转 -M_PI_2 的时候，目标 vc 的左边截图显示出来，并恢复原状，完成整副动画。</p> <p>需要注意的是，截图在绕 y 轴旋转的时候，因为我们的 layer 的默认 anchorPoint 为 (0.5,0.5) ，所以需要改变 anchorPoint 的只，否则就绕中心在旋转了。</p> <p>说了这么多，还是看看核心代码吧</p> <pre> <code class="language-objectivec">p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3d71ff}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4dbf56}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #00afca}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3d71ff; min-height: 16.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #2337da}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px 'PingFang SC'; color: #4dbf56}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #c2349b}span.s3 {font-variant-ligatures: no-common-ligatures; color: #00afca}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d71ff}span.s5 {font: 14.0px 'PingFang SC'; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #4dbf56}span.s7 {font: 14.0px 'PingFang SC'; font-variant-ligatures: no-common-ligatures; color: #4dbf56}span.s8 {font: 14.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #2337da}span.s9 {font: 14.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #3d71ff}span.s10 {font: 14.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s11 {font-variant-ligatures: no-common-ligatures; color: #8b84cf}span.s12 {font-variant-ligatures: no-common-ligatures; color: #93c96a}span.s13 {font-variant-ligatures: no-common-ligatures; color: #d28f5a} - (void)setToAnimation:(id<UIViewControllerContextTransitioning>)contextTransition { //获取目标动画的VC UIViewController *toVc = [contextTransition viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromVc = [contextTransition viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView *containerView = [contextTransition containerView]; //m34 这个参数有点不好理解 为透视效果 我在http://www.jianshu.com/p/e8d1985dccec这里有讲 //当Z轴上有变化的时候 我们所看到的透视效果 可以对比看看 当你改成-0.1的时候 就懂了 CATransform3D transform = CATransform3DIdentity; transform.m34 = -0.002; [containerView.layer setSublayerTransform:transform]; UIView *fromView = fromVc.view; UIView *toView = toVc.view; //截图 //当前页面的右侧 CGRect from_half_right_rect = CGRectMake(fromView.frame.size.width/2.0, 0, fromView.frame.size.width/2.0, fromView.frame.size.height); //目标页面的左侧 CGRect to_half_left_rect = CGRectMake(0, 0, toView.frame.size.width/2.0, toView.frame.size.height); //目标页面的右侧 CGRect to_half_right_rect = CGRectMake(toView.frame.size.width/2.0, 0, toView.frame.size.width/2.0, toView.frame.size.height); //截三张图 当前页面的右侧 目标页面的左和右 UIView *fromRightSnapView = [fromView resizableSnapshotViewFromRect:from_half_right_rect afterScreenUpdates:NO withCapInsets:UIEdgeInsetsZero]; UIView *toLeftSnapView = [toView resizableSnapshotViewFromRect:to_half_left_rect afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero]; UIView *toRightSnapView = [toView resizableSnapshotViewFromRect:to_half_right_rect afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero]; fromRightSnapView.frame = from_half_right_rect; toLeftSnapView.frame = to_half_left_rect; toRightSnapView.frame = to_half_right_rect; //重新设置anchorPoint 分别绕自己的最左和最右旋转 fromRightSnapView.layer.position = CGPointMake(CGRectGetMinX(fromRightSnapView.frame), CGRectGetMinY(fromRightSnapView.frame) + CGRectGetHeight(fromRightSnapView.frame) * 0.5); fromRightSnapView.layer.anchorPoint = CGPointMake(0, 0.5); toLeftSnapView.layer.position = CGPointMake(CGRectGetMinX(toLeftSnapView.frame) + CGRectGetWidth(toLeftSnapView.frame), CGRectGetMinY(toLeftSnapView.frame) + CGRectGetHeight(toLeftSnapView.frame) * 0.5); toLeftSnapView.layer.anchorPoint = CGPointMake(1, 0.5); //添加阴影效果 UIView *fromRightShadowView = [self addShadowView:fromRightSnapView startPoint:CGPointMake(0, 1) endPoint:CGPointMake(1, 1)]; UIView *toLeftShaDowView = [self addShadowView:toLeftSnapView startPoint:CGPointMake(1, 1) endPoint:CGPointMake(0, 1)]; //添加视图 注意顺序 [containerView insertSubview:toView atIndex:0]; [containerView addSubview:toLeftSnapView]; [containerView addSubview:toRightSnapView]; [containerView addSubview:fromRightSnapView]; toLeftSnapView.hidden = YES; //先旋转到最中间的位置 toLeftSnapView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0, 1, 0); //StartTime 和 relativeDuration 均为百分百 [UIView animateKeyframesWithDuration:self.duration delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{ [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{ fromRightSnapView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0); fromRightShadowView.alpha = 1.0; }]; [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{ toLeftSnapView.hidden = NO; toLeftSnapView.layer.transform = CATransform3DIdentity; toLeftShaDowView.alpha = 0.0; }]; } completion:^(BOOL finished) { [toLeftSnapView removeFromSuperview]; [toRightSnapView removeFromSuperview]; [fromRightSnapView removeFromSuperview]; [fromView removeFromSuperview]; if ([contextTransition transitionWasCancelled]) { [containerView addSubview:fromView]; } [contextTransition completeTransition:![contextTransition transitionWasCancelled]]; }]; //本来打算用基础动画来实现 但是由于需要保存几个变量 在动画完成的代理函数中用，所以就取消这个想法了 // CABasicAnimation *fromRightAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; // fromRightAnimation.duration = self.duration/2.0; // fromRightAnimation.beginTime = CACurrentMediaTime(); // fromRightAnimation.toValue = @(-M_PI_2); // [fromRightSnapView.layer addAnimation:fromRightAnimation forKey:nil]; // // // CABasicAnimation *toLeftAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; // toLeftAnimation.beginTime = CACurrentMediaTime() + self.duration/2.0; // toLeftAnimation.fromValue = @(M_PI_2); // [toLeftAnimation setValue:contextTransition forKey:@"contextTransition"]; // [toLeftSnapView.layer addAnimation:toLeftAnimation forKey:@"toLeftAnimation"]; }</code></pre> <p>写到这里，差不多转场动画我能够写的就到这里了，文章实在是有点长，不是故意为之，只是我想写的稍微详细点，对自己也是一个很好的提升。如果能帮到你，还请给个 star ，嘿嘿~</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/98d20b14adeb</p> <p> </p>