ViewController自定義轉場-基礎

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

兩個方法分別返回UIViewControllerInteractiveTransitioningUIViewControllerAnimatedTransitioning,它們的任務是描述動畫行為(轉場動畫如何執行,就看它倆的)。
從名字可以看出,這兩個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中,然后執行動畫。為了理解containerViewfromView,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];
}

通過StoryBoard設置

在StoryBoard中為Navigation Bar添加一個Object,并且聲明為JLScaleNavControlDelegate(定義見上文)。

storyboard添加delegate

按住control,從navigation controller拖線置新添加的object,指定為delegate。

storyboard設置delegate

NEXT

今天就到這里,源碼放在github,還包括一些復雜的動畫,會持續更新,后面有時間專門挑幾個效果牛逼的聊聊。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容