轉場動畫UINavigationControllerDelegate

 

 

從iOS7開始，蘋果更新了自定義ViewController轉場的API，這些新增的類和接口讓很多人困惑，望而卻步。本文就從這些API入口，讓讀者理清這些API錯綜復雜的關系。

幾個protocol

講自定義轉場就離不開這幾個protocol：

UIViewControllerContextTransitioning
UIViewControllerAnimatedTransitioning
UIViewControllerInteractiveTransitioning
UIViewControllerTransitioningDelegate
UINavigationControllerDelegate
UITabBarControllerDelegate

 

乍一看很多，其實很簡單，我們可以將其分為三類：

1. 描述ViewController轉場的：
   UIViewControllerTransitioningDelegate,UINavigationControllerDelegate,UITabBarControllerDelegate
2. 定義動畫內容的
   UIViewControllerAnimatedTransitioning,UIViewControllerInteractiveTransitioning
3. 表示動畫上下文的
   UIViewControllerContextTransitioning

描述ViewController轉場的

細說之前先扯個蛋：

為什么蘋果要引入這一套API？因為在iOS7之前，做轉場動畫很麻煩，要寫一大堆代碼在ViewController中。引入這一套API之后，在豐富功能的同時極大程度地降低了代碼耦合，實現方式就是將之前在ViewController里面的代碼通過protocol分離了出來。

順着這個思路往下想，實現自定義轉場動畫首先需要找到ViewController的delegate。蘋果告訴我們切換ViewController有三種形式：UITabBarController內部切換，UINavigationController切換，present modal ViewController。這三種方式是不是需要不同的protocol呢？

我們分別來看下：

• UIViewControllerTransitioningDelegate自定義模態轉場動畫時使用。
  設置UIViewController的屬性transitioningDelegate。
  @property (nullable, nonatomic, weak) id <UIViewControllerTransitioningDelegate> transitioningDelegate
• UINavigationControllerDelegate自定義navigation轉場動畫時使用。
  設置UINavigationController的屬性delegate
  @property(nullable, nonatomic, weak) id<UINavigationControllerDelegate> delegate
• UITabBarControllerDelegate自定義tab轉場動畫時使用。
  設置UITabBarController的屬性delegate
  @property(nullable, nonatomic,weak) id<UITabBarControllerDelegate> delegate

實際上這三個protocol干的事情是一樣的，就是我們“扯淡”的內容，只不過他們的應用場景不同罷了。我們下面以UINavigationControllerDelegate為例，其他的類似。

定義動畫內容的

UINavigationControllerDelegate主要包含這兩個方法：

- (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);

 

兩個方法分別返回UIViewControllerInteractiveTransitioning和UIViewControllerAnimatedTransitioning，它們的任務是描述動畫行為（轉場動畫如何執行，就看它倆的）。
從名字可以看出，這兩個protocol的區別在於是否是interactive的。如何理解？****interactive動畫可以根據輸入信息的變化改變動畫的進程。****例如iOS系統為UINavigationController提供的默認右滑退出手勢就是一個interactive 動畫，整個動畫的進程由用戶手指的移動距離控制。

我們來看下相對簡單的UIViewControllerAnimatedTransitioning:

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext; @optional - (void)animationEnded:(BOOL) transitionCompleted; 

transitionDuration返回動畫的執行時間，animateTransition處理具體的動畫，animationEnded是optional，大部分情況下不需要處理。
這里出現了我們要講的最后一個protocol：UIViewControllerContextTransitioning。

表示動畫上下文的

UIViewControllerContextTransitioning也是唯一一個不需要我們實現的protocol。

Do not adopt this protocol in your own classes, nor should you directly create objects that adopt this protocol.

UIViewControllerContextTransitioning提供了一系列方法，為interactive和非interactive動畫提供上下文：

//轉場動畫發生在該View中 - (nullable UIView *)containerView; //上報動畫執行完畢 - (void)completeTransition:(BOOL)didComplete; //根據key返回一個ViewController。我們通過UITransitionContextFromViewControllerKey找到將被替換掉的ViewController，通過UITransitionContextToViewControllerKey找到將要顯示的ViewController - (nullable __kindof UIViewController *)viewControllerForKey:(NSString *)key; 

還有一些其他的方法，我們以后用到再說。

下面我們通過一個簡單的Demo串聯理解下。

DEMO

 

transitionDemo.gif

這是一個縮放同時修改透明度的動畫，我們來看下如何實現。
在上面的講解中，我們通過倒推的方式來理解轉場動畫中用到的protocol，在Demo 中，我們會從創建動畫開始。

第一步：創建動畫

由上面的解析得知，動畫是在UIViewControllerAnimatedTransitioning中定義的，所以我們首先創建實現UIViewControllerAnimatedTransitioning的對象：JLScaleTransition。

JLScaleTransition.h

@interface JLScaleTransition : NSObject<UIViewControllerAnimatedTransitioning>
@end
JLScaleTransition.m

@implementation JLScaleTransition

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

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController *toVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController *fromVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIView * containerView = [transitionContext containerView];
    UIView * fromView = fromVC.view;
    UIView * toView = toVC.view;
    
    [containerView addSubview:toView];
    
    [[transitionContext containerView] bringSubviewToFront:fromView];
    
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    [UIView animateWithDuration:duration animations:^{
        fromView.alpha = 0.0;
        fromView.transform = CGAffineTransformMakeScale(0.2, 0.2);
        toView.alpha = 1.0;
    } completion:^(BOOL finished) {
        fromView.transform = CGAffineTransformMakeScale(1, 1);
        [transitionContext completeTransition:YES];
    }];
}
在animateTransition中，我們分別獲取兩個ViewController的view，將toView添加到containerView中，然后執行動畫。為了理解containerView和fromView,toView的關系，我們添加幾個log來分析一下：

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController *toVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController *fromVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIView * containerView = [transitionContext containerView];
    UIView * fromView = fromVC.view;
    UIView * toView = toVC.view;
    NSLog(@"startAnimation! fromView = %@", fromView);
    NSLog(@"startAnimation! toView = %@", toView);
    for(UIView * view in containerView.subviews){
        NSLog(@"startAnimation! list container subviews: %@", view);
    }
    
    [containerView addSubview:toView];
    
    [[transitionContext containerView] bringSubviewToFront:fromView];
    
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    [UIView animateWithDuration:duration animations:^{
        fromView.alpha = 0.0;
        fromView.transform = CGAffineTransformMakeScale(0.2, 0.2);
        toView.alpha = 1.0;
    } completion:^(BOOL finished) {
        fromView.transform = CGAffineTransformMakeScale(1, 1);
        [transitionContext completeTransition:YES];
        for(UIView * view in containerView.subviews){
            NSLog(@"endAnimation! list container subviews: %@", view);
        }
    }];
}

 

運行log如下：

2016-06-29 13:50:48.512 JLTransition[1970:177922] startAnimation! fromView = <UIView: 0x7aaef4e0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x7aaef5a0>> 2016-06-29 13:50:48.513 JLTransition[1970:177922] startAnimation! toView = <UIView: 0x796ac5a0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x796ac050>> 2016-06-29 13:50:48.513 JLTransition[1970:177922] startAnimation! list container subviews: <UIView: 0x7aaef4e0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x7aaef5a0>> 2016-06-29 13:50:49.017 JLTransition[1970:177922] endAnimation! list container subviews: <UIView: 0x796ac5a0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x796ac050>> 

可見，轉場執行的時候，containerView中只包含fromView，轉場動畫執行完畢之后，containerView會將fromView移除。因為containerView不負責toView的添加，所以我們需要主動將toView添加到containerView中。

注意！非interactive轉場中，動畫結束之后需要執行[transitionContext completeTransition:YES];（如果動畫被取消，傳NO）；但是在interactive轉場中，動畫是否結束是由外界控制的（用戶行為或者特定函數），需要在外部調用。

第二步：定義轉場

在第二部，我們需要實現UIViewControllerAnimatedTransitioning，並將第一步創建的JLScaleTransition對象返回。

JLScaleNavControlDelegate.h

@interface JLScaleNavControlDelegate : NSObject<UINavigationControllerDelegate>
@end

 

JLScaleNavControlDelegate.m

@implementation JLScaleNavControlDelegate
- (nullable id <UIViewControllerAnimatedTransitioning>) navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC
{
    return [JLScaleTransition new];
}
@end

 

這一步很簡單，實現UIViewControllerAnimatedTransitioning對應方法即可。

第三步：設置轉場

設置轉場其實就是設置delegate（還記得我們“扯淡”的內容吧）。

   self.navigationController.delegate = id<UINavigationControllerDelegate>
    self.transitioningDelegate = id<UIViewControllerTransitioningDelegate>
    self.tabBarController.delegate = id<UITabBarControllerDelegate>

 

設置delegate有兩種方式：通過代碼；通過StoryBoard。

通過代碼設置

@interface ViewController ()
@property (nonatomic, strong) JLScaleNavControlDelegate * scaleNavDelegate;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.scaleNavDelegate = [JLScaleNavControlDelegate new];
}

- (IBAction)triggerTransitionDelegate:(id)sender
{
    self.navigationController.delegate = self.scaleNavDelegate;
    [self.navigationController pushViewController:[TargetViewController new] animated:YES];
}
 

 

鏈接：https://www.jianshu.com/p/e7155f938e59

如果需要更多效果的話，參考https://github.com/alanwangmodify/WXSTransition