從iOS7開始,蘋果更新了自定義ViewController轉場的API,這些新增的類和接口讓很多人困惑,望而卻步。本文就從這些API入口,讓讀者理清這些API錯綜復雜的關系。
幾個protocol
講自定義轉場就離不開這幾個protocol:
UIViewControllerContextTransitioning UIViewControllerAnimatedTransitioning UIViewControllerInteractiveTransitioning UIViewControllerTransitioningDelegate UINavigationControllerDelegate UITabBarControllerDelegate
乍一看很多,其實很簡單,我們可以將其分為三類:
- 描述ViewController轉場的:
UIViewControllerTransitioningDelegate
,UINavigationControllerDelegate
,UITabBarControllerDelegate
- 定義動畫內容的
UIViewControllerAnimatedTransitioning
,UIViewControllerInteractiveTransitioning
- 表示動畫上下文的
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

這是一個縮放同時修改透明度的動畫,我們來看下如何實現。
在上面的講解中,我們通過倒推的方式來理解轉場動畫中用到的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