iOS自定義轉場動畫-push和pop

iOS7.0后蘋果提供了自定義轉場動畫的API,利用這些API我們可以改變 push和pop(navigation非模態),present和dismiss(模態),標簽切換(tabbar)的默認轉場動畫。

主要涉及的API

1、UIViewControllerAnimatedTransitioning:轉場動畫協議,實現此協議定義轉場的動畫行為。

// 定義轉場動畫的時間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;

// 定義轉場動畫的行為
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

2、 UIViewControllerContextTransitioning:轉場動畫上下文,這個協議定義了轉場動畫具體參數,控制轉場動畫的狀態,這個協議一般由系統實現,在轉場發生時提供給我們使用。

FromTo:轉場是兩個視圖控制器(ViewController)的行為,由一個視圖控制器切換到另一個視圖控制器,原先呈現的視圖控制器叫FromViewController,將要呈現的視圖控制器叫ToViewController,那么FromViewController的view叫做FromView,ToViewController的view叫做ToView

對應push和pop來說是兩個不同的轉場,它們的From和To在兩個轉場中使相互調換的。


控制器A push到 控制器B,那么From是A, To是B
控制器B pop到 控制器A, 那么From是B, To是A

containerView:轉場動畫完成都是在containerView里面。

3、UIViewControllerInteractiveTransitioning:轉場的交互協議,用來控制轉場動畫的狀態或進度。

//設置轉場進度, 取值范圍 [0..1]
- (void)updateInteractiveTransition:(CGFloat)percentComplete;
//完成轉場,呈現to
- (void)finishInteractiveTransition;
//取消轉場,呈現from
- (void)cancelInteractiveTransition;

4、UIPercentDrivenInteractiveTransition:官方提供的實現UIViewControllerInteractiveTransitioning協議的類,可以直接使用。

上面簡單的介紹了轉場動畫涉及的API,這一節主要通過導航控制器的push和pop轉場動畫來介紹這些自定義轉場動畫的流程。

push轉場動畫

1、準備工作:
帶有導航控制器的ViewController類,要push到的下一級控制器SecondViewController類。
2、在類HSPushAnimation中實現UIViewControllerAnimatedTransitioning協議,定義push轉場動畫行為。

@interface HSPushAnimation : NSObject <UIViewControllerAnimatedTransitioning>
@end
@implementation HSPushAnimation
//設置轉場動畫的時長
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{
    return 2.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    //from
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
   //to
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    
    UIView* toView = nil;
    UIView* fromView = nil;
    //UITransitionContextFromViewKey和UITransitionContextToViewKey定義在iOS8.0以后的SDK中,所以在iOS8.0以下SDK中將toViewController和fromViewController的view設置給toView和fromView
    //iOS8.0 之前和之后view的層次結構發生變化,所以iOS8.0以后UITransitionContextFromViewKey獲得view并不是fromViewController的view
    if ([transitionContext respondsToSelector:@selector(viewForKey:)]) {
        fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    } else {
        fromView = fromViewController.view;
        toView = toViewController.view;
    }
    //這個非常重要,將toView加入到containerView中
    [[transitionContext containerView]  addSubview:toView];
    
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    CGFloat height = [UIScreen mainScreen].bounds.size.height;
    
    toView.frame = CGRectMake(width, 0, width, height);
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        toView.frame = CGRectMake(0, 0, width, height);
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:YES];
    }];

}
@end

上面代碼定義了一個非常簡單的動畫,toView從左到右覆蓋fromView,和系統默認動畫一樣,只是時間設置的比較長。

轉場動畫所有要呈現的元素都要放在containerView中,fromView默認已經在containerView中了。

3、指定push要使用的轉場動畫行為:由于要自定義轉場動畫所以我們需要指定轉場動畫行為。push轉場的動畫行為是由UINavigationControllerDelegate協議指定,所以我們在ViewController設置導航控制器的Delegate:

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    self.navigationController.delegate = self;
}

實現以下協議,指定動畫類:

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    if (operation == UINavigationControllerOperationPush) {
        return [[HSPushAnimation alloc] init];
    }
    return nil;
}

這個方法可以分別指定push和pop的動畫類,這里我們只定義push動畫,所以只要指定UINavigationControllerOperationPush時的動畫行為即可。

這樣push轉場動畫就完成了,效果圖如下:


自定義push動畫

pop轉場動畫

1、pop轉場動畫和push轉場動畫類似,在類HSPopAnimation中實現UIViewControllerAnimatedTransitioning協議。

@implementation HSPopAnimation

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

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    
    UIView* toView = nil;
    UIView* fromView = nil;
   
    if ([transitionContext respondsToSelector:@selector(viewForKey:)]) {
        fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    } else {
        fromView = fromViewController.view;
        toView = toViewController.view;
    }
    
    //將toView加到fromView的下面,非常重要!!!
    [[transitionContext containerView] insertSubview:toView belowSubview:fromView];
    
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    CGFloat height = [UIScreen mainScreen].bounds.size.height;
    
    fromView.frame = CGRectMake(0, 0, width, height);
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        fromView.frame = CGRectMake(width, 0, width, height);
    } completion:^(BOOL finished) {
        
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];
    }];
}

@end

這里pop動畫基本和push動畫是相反的過程,當然你也可以指定別的方式的動畫。
這里from、to和push動畫里面的from、to值已經互換了,所以如果將push和pop動畫寫在一起的話,要特別注意,不過建議將push和pop動畫分別定義到不同的類中,方便管理。
2、在SecondViewControlle類中設置導航控制器的Delegate,并實現以下協議:

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    if (operation == UINavigationControllerOperationPop) {
        return [[HSPopAnimation alloc] init];
    }
    return nil;
}

pop轉場動畫就完成了,效果圖如下:


pop轉場動畫

可交互轉場動畫

先來看看可交互轉場動畫效果


可交互轉場動畫

可交互轉場動畫的實現需要實現UIViewControllerInteractiveTransitioning協議,幸好官方給我們提供了UIPercentDrivenInteractiveTransition類可以直接使用,你也可以繼承UIPercentDrivenInteractiveTransition來使用。
UIViewControllerInteractiveTransitioning協議的功能主要是控制轉場動畫的狀態,即動畫完成的百分比,所以只有在轉場中才有用。

比如我們通過[self.navigationController popViewControllerAnimated:YES]觸發pop轉場動畫,然后在轉場動畫結束之前通過- (void)updateInteractiveTransition:(CGFloat)percentComplete更改轉場動畫的完成的百分比,那么轉場動畫將由實現UIViewControllerInteractiveTransitioning的類接管,而不是由定時器管理,之后就可以隨意設置動畫狀態了。

交互動畫往往配合手勢操作,手勢操作產生一序列百分比數通過updateInteractiveTransition方法實時更新轉場動畫狀態。

1、現在添加為SecondViewControlle的view添加手勢:

//添加pan手勢
UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc] init];
[pan addTarget:self action:@selector(panGestureRecognizerAction:)];
[self.view addGestureRecognizer:pan];

2、觸發轉場動畫,通過手勢產生百分比數值,更新轉場動畫狀態:

- (void)panGestureRecognizerAction:(UIPanGestureRecognizer *)pan{
    
    //產生百分比
    CGFloat process = [pan translationInView:self.view].x / ([UIScreen mainScreen].bounds.size.width);
    
    process = MIN(1.0,(MAX(0.0, process)));
    
    if (pan.state == UIGestureRecognizerStateBegan) {
        self.interactiveTransition = [UIPercentDrivenInteractiveTransition new];
        //觸發pop轉場動畫
        [self.navigationController popViewControllerAnimated:YES];
        
    }else if (pan.state == UIGestureRecognizerStateChanged){
        [self.interactiveTransition updateInteractiveTransition:process];
    }else if (pan.state == UIGestureRecognizerStateEnded
              || pan.state == UIGestureRecognizerStateCancelled){
        if (process > 0.5) {
            [ self.interactiveTransition finishInteractiveTransition];
        }else{
            [ self.interactiveTransition cancelInteractiveTransition];
        }
        self.interactiveTransition = nil;
    }
}

手勢開始狀態:手勢開始時創建UIPercentDrivenInteractiveTransition對象,通過popViewControllerAnimated方法觸發轉場動畫。
手勢變化狀態:通過計算得到的百分比實時更新轉場動畫的狀態。
手勢取消或者結束狀態:根據完成的百分比決定是否完成轉場或者取消轉場。

3、開始轉場動畫時,就需要指定一個實現UIViewControllerInteractiveTransitioning協議的對象來控制轉場動畫的狀態,否則轉場動畫狀態由定時器管理。在SecondViewControlle類中,我們通過UINavigationControllerDelegate協議將interactiveTransition對象傳給UIKit:

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    self.navigationController.delegate = self;
}
- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController{
    if ([animationController isKindOfClass:[HSPopAnimation class]]) {
        return self.interactiveTransition;
    }
    return nil;
}

以上步驟就將pop的可交互轉場動畫完成了。

push和pop轉場動畫基本流程

push和pop轉場動畫基本流程圖

Note:

  • 動畫的狀態和轉場的狀態是不一樣的,動畫完成后,不代表轉場完成,所以我們要在動畫的completion里面決定是否完成轉場:[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
  • 轉場是一個過程,所有的動畫都在containerView里面完成。
  • 不需要交互的轉場interactionControllerForAnimationController方法一定要返回nil

?文章的源碼將在完成完成下篇present和dismiss動畫時候上傳。

本文作為讀書筆記,不是科普讀物,所以知識有可能理解錯誤,如有請您不吝賜教。

Demo地址:https://github.com/cnthinkcode/HSPresentTransitionDemo

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

推薦閱讀更多精彩內容