主頁 > 移動端開發 > iOS：探究視圖控制器的轉場影片

iOS：探究視圖控制器的轉場影片

2020-09-11 20:56:13 移動端開發

一、介紹

在iOS開發中，轉場影片的使用無處不見，不只是我們自己更多的使用UIViewblock影片實作一個轉場影片，其實，在我們實作VC控制器跳轉的時候都是轉場影片的實作，例如標簽欄控制器的切換、模態影片present和dismiss、導航控制器的push和pop，實作它們的轉場影片，只需要實作它們的影片協議即可，說起來有點太籠統，不如看下面的圖吧：

 

二、分析

對于上面的三種型別的控制器，系統都會為它們設定一個代理，通過這個代理方法去監測它們切換VC的程序，這個程序僅僅是出現和消失的程序，至于這個程序是什么過渡效果，這個代理是不管的，要想這個程序是有影片的，那么在這些程序中，也就是代理函式中，需要另外再回傳一個實作影片的物件，這個物件必須遵循實作影片的協議，在這個協議中開發者可以重寫自定義轉場影片，下面會慢慢演示這三種型別控制器的自定義轉場影片，

重寫不可互動轉場影片的核心協議內容：

//重寫影片協議@protocol UIViewControllerAnimatedTransitioning <NSObject>//影片執行時間- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;//自定義影片效果- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;@end

重寫可互動轉場影片的核心協議內容：

//重寫影片協議@protocol UIViewControllerInteractiveTransitioning <NSObject>//自定義影片效果- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)transitionContext;@end

系統提供的一個百分比可互動轉場影片核心類內容：

//系統提供的百分比影片類，已經遵循了可互動協議@interface UIPercentDrivenInteractiveTransition : NSObject <UIViewControllerInteractiveTransitioning>
- (void)pauseInteractiveTransition;- (void)updateInteractiveTransition:(CGFloat)percentComplete;- (void)cancelInteractiveTransition;- (void)finishInteractiveTransition;@end

 

三、轉場影片View之間的切換

 

四、實作一個自定義的模態影片

1、概述

正如我們所知，系統為我們提供的模態影片默認是從底部present出，然后dismiss回到底部， 雖然說這個基本能夠滿足使用，但是如果我們還想使用其他形式的模態影片例如從頂部present出dismiss回到頂部，這個時候就需要對系統默認的轉場影片進行自定義了，

2、詳解

（1）要自定義模態轉場影片，首先需要給被模態的控制器設定一個實作了UIViewControllerAnimatedTransitioning協議的代理，這些協議方法可以監測影片執行的程序，代理和協議如下：

//代理@protocol UIViewControllerTransitioningDelegate;@interface UIViewController(UIViewControllerTransitioning)@property (nullable, nonatomic, weak) id <UIViewControllerTransitioningDelegate> transitioningDelegate API_AVAILABLE(ios(7.0));@end
//協議
@protocol UIViewControllerTransitioningDelegate <NSObject>@optional//present時呼叫，回傳一個實作了不可互動轉場影片協議的代理- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;//dismiss時呼叫，回傳一個實作了不可互動轉場影片協議的代理- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;//presnt程序中互動時呼叫，回傳一個實作了可互動的轉場影片協議的代理- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;//dismiss程序中互動時呼叫，回傳一個實作了可互動的轉場影片協議的代理- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;//回傳新的模態彈框控制器（這個是對模態風格進行自定義時呼叫，后面會說到）- (nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(nullable UIViewController *)presenting sourceViewController:(UIViewController *)source API_AVAILABLE(ios(8.0));@end

（2）然后在上面的協議方法中回傳一個實作了UIViewControllerAnimatedTransitioning協議的代理，在這個代理的協議方法中可以真正重寫轉場影片了，協議如下：

@protocol UIViewControllerAnimatedTransitioning <NSObject>//影片執行時間- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;//自定義轉場影片- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;@optional

（3）自定義轉場影片實作如下【注意：Singleton單例類和UIView+Extesion分類需要自己去拷貝引入】

  • 設定UIViewControllerAnimatedTransitioning代理物件TransitionDelegate，監測影片執行程序，將其設定為單例
    #import <UIKit/UIKit.h>#import "Singleton.h"@interface TransitionDelegate : NSObject<UIViewControllerTransitioningDelegate>SingletonH(TransitionDelegate);@end
    #import "TransitionDelegate.h"#import "CustomAnimationTransition.h"@implementation TransitionDelegateSingletonM(TransitionDelegate);#pragma mark - <UIViewControllerTransitioningDelegate>//展示的影片- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{    CustomAnimationTransition *animation = [[CustomAnimationTransition alloc]init];    animation.presented = YES;    return animation;}//關閉的影片- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{    CustomAnimationTransition *animation = [[CustomAnimationTransition alloc]init];    animation.presented = NO;    return animation;}@end
  • 設定UIViewControllerAnimatedTransitioning代理物件CustomTransitionAnimationTransition，重寫影片效果
    #import <UIKit/UIKit.h>@interface CustomAnimationTransition : NSObject<UIViewControllerAnimatedTransitioning>//判斷是present還是dismiss, YES:present  NO:dismisss@property (assign,nonatomic)BOOL presented;@end
  • //設定過渡影片（modal和dismiss的影片都需要在這里處理）- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    // UITransitionContextToViewKey,    // UITransitionContextFromViewKey.        //出來的影片    if (self.presented) {                //獲取并添加轉場視圖        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        [transitionContext.containerView addSubview:toView];                 //設定影片從上往下出來        toView.y = -toView.height;                [UIView animateWithDuration:duration animations:^{                        toView.y = 0;                    } completion:^(BOOL finished) {                        //移除視圖            BOOL cancle = [transitionContext transitionWasCancelled];            if (cancle) {                [toView removeFromSuperview];            }                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:!cancle];        }];    }    //銷毀的影片    else    {        //獲取轉場視圖        UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];                [UIView animateWithDuration:duration animations:^{                        fromView.y = -fromView.height;        } completion:^(BOOL finished) {                        //移除視圖            BOOL cancle = [transitionContext transitionWasCancelled];            if (!cancle) {                [fromView removeFromSuperview];            }                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:!cancle];        }];    }}
  • 開始執行，結果如gif圖 
    //presentUINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[[SecondViewController alloc] init]];nav.transitioningDelegate = [TransitionDelegate sharedTransitionDelegate];//自定義轉場影片nav.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:nav animated:YES completion:nil];

 （4）我們已經實作了一個簡單的自定義模態不可互動的轉場影片，其實，在模態控制器的時候，我們還可以自定義可互動的轉場影片以及設定自定義的模態風格，可互動的轉場影片一會兒再討論，先來討論一下模態風格，系統在iOS13之前默認都是滿屏模式的UIModalPresentationFullScreen，但是iOS13之后，默認是UIModalPresentationPageSheet，系統提供的模態風格如下：

//模態風格列舉typedef NS_ENUM(NSInteger, UIModalPresentationStyle) {    UIModalPresentationFullScreen = 0,    UIModalPresentationPageSheet ,    UIModalPresentationFormSheet ,    UIModalPresentationCurrentContext ,    UIModalPresentationCustom , //自定義    UIModalPresentationOverFullScreen ,    UIModalPresentationOverCurrentContext ),    UIModalPresentationPopover ,    UIModalPresentationBlurOverFullScreen ,    UIModalPresentationNone,    UIModalPresentationAutomatic , };

 （5）從上面的列舉可以看到，系統是支持我們實作自己的風格的，也就是自定義，在實作自定義之前，一定得知道UIPresentationController這個類，這個是彈出框控制元件，模態的控制器都是由它進行管理，主要代碼如下：

//重寫此方法可以在彈框即將顯示時執行所需要的操作- (void)presentationTransitionWillBegin;
//重寫此方法可以在彈框顯示完畢時執行所需要的操作- (void)presentationTransitionDidEnd:(BOOL)completed;
//重寫此方法可以在彈框即將消失時執行所需要的操作- (void)dismissalTransitionWillBegin;
//重寫此方法可以在彈框消失之后執行所需要的操作- (void)dismissalTransitionDidEnd:(BOOL)completed;
//重寫決定了彈出框的frame- (CGRect)frameOfPresentedViewInContainerView;
//重寫對containerView進行布局- (void)containerViewWillLayoutSubviews;- (void)containerViewDidLayoutSubviews;
//初始化方法- (instancetype)initWithPresentedViewController:(UIViewController *)presentedViewController presentingViewController:(UIViewController *)presentingViewController;

（6）額外再提一個知識點，因為一會兒在自定義模態風格時會涉及到，在本文開篇結構圖中介紹了創建的轉場影片都是在轉場影片背景關系UIViewControllerContextTransitioning協議中完成的，那么這個轉場影片的執行是誰管理呢？看結構圖如下，沒錯，是由UIViewControllerTransitionCoordinator這個代理協調器在協調器背景關系中完成的，系統給UIViewController提供了一個分類，這個分類持有這個代理協調器，通過這個代理協調器可以拿到執行轉場影片的方法，最終，我們可以自己添加一些操作與轉場影片同步執行，

 

UIViewControllerContextTransitioning協議核心內容

@protocol UIViewControllerTransitionCoordinatorContext <NSObject>// 執行的屬性@property(nonatomic, readonly, getter=isAnimated) BOOL animated;@property(nonatomic, readonly) UIModalPresentationStyle presentationStyle;@property(nonatomic, readonly) NSTimeInterval transitionDuration;@property(nonatomic, readonly) UIView *containerView;@property(nonatomic, readonly) CGAffineTransform targetTransform // 參與控制器// UITransitionContextToViewControllerKey、UITransitionContextFromViewControllerKey- (nullable __kindof UIViewController *)viewControllerForKey:(UITransitionContextViewControllerKey)key;// 參與的視圖// UITransitionContextToViewKey、UITransitionContextFromViewKey- (nullable __kindof UIView *)viewForKey:(UITransitionContextViewKey)key API_AVAILABLE(ios(8.0));@end

UIViewControllerTransitionCoordinator協議核心內容

// 與影片控制器中的轉場影片同步，執行其他影片- (BOOL)animateAlongsideTransition:(void (^ __nullable)(id <UIViewControllerTransitionCoordinatorContext>context))animation                        completion:(void (^ __nullable)(id <UIViewControllerTransitionCoordinatorContext>context))completion; // 與影片控制器中的轉場影片同步，在指定的視圖內執行影片- (BOOL)animateAlongsideTransitionInView:(nullable UIView *)view                               animation:(void (^ __nullable)(id <UIViewControllerTransitionCoordinatorContext>context))animation                              completion:(void (^ __nullable)(id <UIViewControllerTransitionCoordinatorContext>context))completion;

UIViewController(UIViewControllerTransitionCoordinator) 分類核心內容

//持有轉場影片執行協調器@interface UIViewController(UIViewControllerTransitionCoordinator)@property(nonatomic, readonly, nullable) id <UIViewControllerTransitionCoordinator> transitionCoordinator;@end

（7）自定義模態風格實作如下【注意：Singleton單例類和UIView+Extesion分類需要自己去拷貝引入】

  • 設定UIViewControllerAnimatedTransitioning代理物件TransitionDelegate，監測影片執行程序并回傳模態風格，將其設定為單例
    #import <UIKit/UIKit.h>#import "Singleton.h"@interface TransitionDelegate : NSObject<UIViewControllerTransitioningDelegate>SingletonH(TransitionDelegate);@end
    #import "TransitionDelegate.h"#import "CustomPresentationController.h"#import "CustomAnimationTransition.h"@implementation TransitionDelegateSingletonM(TransitionDelegate);#pragma mark - <UIViewControllerTransitioningDelegate>//回傳模態風格-(UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source{    return [[CustomPresentationController alloc] initWithPresentedViewController:presented presentingViewController:presenting];}//展示的影片- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{    CustomAnimationTransition *animation = [[CustomAnimationTransition alloc]init];    animation.presented = YES;    return animation;}//關閉的影片- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{    CustomAnimationTransition *animation = [[CustomAnimationTransition alloc]init];    animation.presented = NO;    return animation;}@end
  • 設定UIViewControllerAnimatedTransitioning代理物件CustomTransitionAnimationTransition，重寫影片效果
    #import <UIKit/UIKit.h>@interface CustomAnimationTransition : NSObject<UIViewControllerAnimatedTransitioning>//判斷是present還是dismiss, YES:present  NO:dismisss@property (assign,nonatomic)BOOL presented;@end
    #import "CustomAnimationTransition.h"#import "UIView+Extension.h"const CGFloat duration = 0.5f;@implementation CustomAnimationTransition#pragma mark -<UIViewControllerAnimatedTransitioning>//影片時間- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{    return duration;}//設定過渡影片（modal和dismiss的影片都需要在這里處理）- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    // UITransitionContextToViewKey,    // UITransitionContextFromViewKey.        
    　　 //發現此處并沒有添加toView到containerView中以及從containerView中移除toView，與上面的有區別，
        //我把添加和移除toView的操作放到了下面的自定義的模態風格類中完成的
        
        //    出來的影片    if (self.presented) {         UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];            //設定影片從上往下出來        toView.y = -toView.height;                [UIView animateWithDuration:duration animations:^{                        toView.y = 0;                    } completion:^(BOOL finished) {                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:YES];        }];    }    //銷毀的影片    else    {        [UIView animateWithDuration:duration animations:^{                        UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];                        fromView.y = -fromView.height;                    } completion:^(BOOL finished) {                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:YES];        }];    }   }
  • 設定自定義的模態風格類CustomPresenttationController
    #import "CustomPresentationController.h"@implementation CustomPresentationController//可以改變被模態的控制器視圖的尺寸- (CGRect)frameOfPresentedViewInContainerView{
    　　 //CGRectInset: 在containerView的frame基礎上，將width減小100，將height減小200        //containerView是容納presentedView的一個容器    return CGRectInset(self.containerView.bounds, 50, 100);}//將上面重置的frame完成布局- (void)containerViewDidLayoutSubviews {    self.presentedView.frame = self.frameOfPresentedViewInContainerView;    [super containerViewDidLayoutSubviews];}//過渡即將展示時的處理//這個程序可以改變視圖屬性、或者添加視圖等- (void)presentationTransitionWillBegin{    self.presentedView.frame = self.containerView.frame;    [self.containerView addSubview:self.presentedView];}//過渡展示完成//做清理作業- (void)presentationTransitionDidEnd:(BOOL)completed{     if (!completed) {        [self.presentedView removeFromSuperview];     }}//過渡即將消失時的處理//這個程序可以改變視圖屬性等- (void)dismissalTransitionWillBegin{    //例如改變透明度，與轉場控制器中的轉場影片同步執行    [self.presentingViewController.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {                self.presentedView.alpha = 0.f;            } completion:nil];}//過渡消失完成//做清理作業- (void)dismissalTransitionDidEnd:(BOOL)completed{    if (completed) {        [self.presentedView removeFromSuperview];    }}@end
  • 開始執行，結果如gif圖
    //presentUINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[[SecondViewController alloc] init]];nav.transitioningDelegate = [TransitionDelegate sharedTransitionDelegate];//自定義轉場影片nav.modalPresentationStyle = UIModalPresentationCustom; //自定義模態風格[self presentViewController:nav animated:YES completion:nil];

 （8）自定義模態轉場影片和自定義模態風格我們都實作完了，但是上面的影片程序中都是不可互動的，那么要想實作可互動的影片該怎么做呢？如上面所說的，在dismiss時回傳一個實作了UIViewControllerInteractiveTransitioning協議的代理或者直接是原生類UIPercentDrivenInteractiveTransition物件，其中，UIPercentDrivenInteractiveTransition是系統封裝好了百分比驅動，用起來很簡單，那么真正的實作原理還是我們去實作一下，下面咱們來實作導航模式的互動效果，如下：

  • TransitioningDelegate
    #import <UIKit/UIKit.h>#import "Singleton.h"

    @interface TransitioningDelegate : NSObject<UIViewControllerTransitioningDelegate>SingletonH(TransitioningDelegate);@end
    #import "TransitioningDelegate.h"#import "CustomAnimationTransition.h"#import "CustomInteractiveTransition.h"@implementation TransitioningDelegateSingletonM(TransitioningDelegate);#pragma mark - UIViewControllerTransitioningDelegate//present- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {         //這里還是采用自定義的轉場影片方式進行present，使其present時從螢屏右側滑入
         CustomAnimationTransition     *animation = [[CustomAnimationTransition alloc]init];     animation.presented = YES;     return animation;}//dismiss,必須重寫- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {    //這里采用自定義的轉場影片覆寫系統的dismiss效果，在dismiss時，由于自定義了互動影片，所以系統自己的dismiss影片不會執行
        CustomAnimationTransition     *animation = [[CustomAnimationTransition alloc] init];    animation.presented = NO;    return animation;}//將要dismiss時的互動行為，必須重寫- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator {        CustomInteractiveTransition *animation = [[CustomInteractiveTransition alloc] init];    return animation;}@end
  • CustomAnimationTransition
    #import <UIKit/UIKit.h>@interface CustomAnimationTransition : NSObject<UIViewControllerAnimatedTransitioning>//判斷是present還是dismiss, YES:present  NO:dismisss@property (assign,nonatomic)BOOL presented;@end
    #import "CustomAnimationTransition.h"#import "UIView+Extension.h"const CGFloat duration = 0.5f;@implementation CustomAnimationTransition#pragma mark -<UIViewControllerAnimatedTransitioning>//影片時間- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{    return duration;}//設定過渡影片（modal和dismiss的影片都需要在這里處理）- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    // UITransitionContextToViewKey,    // UITransitionContextFromViewKey.        //出來的影片    if (self.presented) {                //獲取并添加轉場視圖        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        [transitionContext.containerView addSubview:toView];                 //設定影片從右往左出來        toView.x = toView.width;        [UIView animateWithDuration:duration animations:^{            toView.x = 0;        } completion:^(BOOL finished) {                        //移除視圖            BOOL cancle = [transitionContext transitionWasCancelled];            if (cancle) {                [toView removeFromSuperview];            }                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:!cancle];        }];    }    //銷毀的影片    else    {        //不做處理，而是交給自定義的互動影片去完成    }}@end
  • CustomInteractiveTransition
    #import <UIKit/UIKit.h>#import "Singleton.h"@interface CustomInteractiveTransition : NSObject<UIViewControllerInteractiveTransitioning>SingletonH(CustomInteractiveTransition); //采用單例的方式主要是為了保存互動背景關系//影片進度更新-(void)updateAnimationProgress:(CGFloat)progress;//影片完成-(void)finish;//影片取消-(void)cancel;@end
    #import "CustomInteractiveTransition.h"#import "UIView+Extension.h"@interface CustomInteractiveTransition ()@property (nonatomic, strong) id<UIViewControllerContextTransitioning> context;@end@implementation CustomInteractiveTransitionSingletonM(CustomInteractiveTransition);#pragma mark - UIViewControllerInteractiveTransitioning//開始互動時呼叫- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)transitionContext {        //保存背景關系    self.context = transitionContext;        //更改視圖層級    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];    [transitionContext.containerView insertSubview:toView belowSubview:fromView];}//影片進度更新-(void)updateAnimationProgress:(CGFloat)progress {        UIView *fromView = [self.context viewForKey:UITransitionContextFromViewKey];    fromView.x = self.context.containerView.width * progress;    }//影片完成-(void)finish {    
        UIView *fromView = [self.context viewForKey:UITransitionContextFromViewKey];     [UIView animateWithDuration:    0.2 animations:^{                fromView.x += self.context.containerView.width;            } completion:^(BOOL finished) { 
            [fromView removeFromSuperView]; 
            [self.context completeTransition:finished];    }];}    //影片取消-(void)cancel {    
        UIView *fromView = [self.context viewForKey:UITransitionContextFromViewKey];     [UIView animateWithDuration:    0.2 animations:^{        fromView.x = 0;            } completion:^(BOOL finished) {       [fromView removeFromSuperView]; 
           [self.context cancelInteractiveTransition];    }];}    @end
  • 在被模態的控制器添加拖拽手勢
    #import "SecondViewController.h"#import "CustomInteractiveTransition.h"@interface SecondViewController ()@end@implementation SecondViewController- (void)viewDidLoad {    [super viewDidLoad];        self.title = @"secondVc";    self.view.backgroundColor = [UIColor redColor];        [self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)]];}-(void)pan:(UIPanGestureRecognizer *)pan {        CGPoint translatedPoint = [pan translationInView:self.view];    CGFloat progress = translatedPoint.x / [UIScreen mainScreen].bounds.size.width;    if (progress < 0) {        return;    }    //拖拽的距離進度比    progress = fabs(progress);    CustomInteractiveTransition *transition = [[CustomInteractiveTransition alloc] init];    switch (pan.state) {        case UIGestureRecognizerStateBegan:            [self dismissViewControllerAnimated:YES completion:nil];            break;        case UIGestureRecognizerStateChanged:            [transition updateAnimationProgress:progress];            break;        case UIGestureRecognizerStateEnded:        {            if (progress > 0.5) {                [transition finish];            }else{                [transition cancel];            }            break;        }        default:            break;    }}@end
  • 開始執行，結果如gif圖
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[[SecondViewController alloc] init]];nav.transitioningDelegate = [TransitioningDelegate sharedTransitioningDelegate];//自定義可互動轉場影片nav.modalPresentationStyle = UIModalPresentationFullScreen; //系統模態風格[self presentViewController:nav animated:YES completion:nil];

 

五、實作一個自定義的導航影片

1、重寫導航控制器的協議，回傳自定義的導航轉場影片，影片實作的方式和modal思想一致，重寫的核心協議如下：

//重寫導航控制器協議@protocol UINavigationControllerDelegate <NSObject>@optional................//回傳一個實作了自定義互動影片的物件- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;//回傳一個實作了普通影片的物件- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController                                   animationControllerForOperation:(UINavigationControllerOperation)operation                                                fromViewController:(UIViewController *)fromVC                                                  toViewController:(UIViewController *)toVC;@end

2、 現在就來自定義一個導航轉場影片，步驟如下：

  • 創建一個CustomNavigationTransition類，實作導航控制器的協議
    #import <UIKit/UIKit.h>#import "Singleton.h"NS_ASSUME_NONNULL_BEGIN@interface CustomNavigationTransition : NSObject<UINavigationControllerDelegate>SingletonH(CustomNavigationTransition);@endNS_ASSUME_NONNULL_END
    #import "CustomNavigationTransition.h"#import "CustomNavigationAnimation.h"@implementation CustomNavigationTransitionSingletonM(CustomNavigationTransition);#pragma mark - UINavigationControllerDelegate//回傳一個實作了普通影片的物件- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController                                   animationControllerForOperation:(UINavigationControllerOperation)operation                                                fromViewController:(UIViewController *)fromVC                                                           toViewController:(UIViewController *)toVC {        CustomNavigationAnimation *animation = [[CustomNavigationAnimation alloc] init];    animation.operation = operation;    return animation;}@end
  • 自定義一個CustomNavigationAnimation類，實作影片協議，重寫影片效果
    #import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface CustomNavigationAnimation : NSObject<UIViewControllerAnimatedTransitioning>@property (nonatomic, assign) UINavigationControllerOperation operation;@endNS_ASSUME_NONNULL_END
    #import "CustomNavigationAnimation.h"#import "UIView+Extension.h"const CGFloat _duration = 0.5f;@implementation CustomNavigationAnimation#pragma mark -<UIViewControllerAnimatedTransitioning>//影片時間- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{    return _duration;}//設定過渡影片（modal和dismiss的影片都需要在這里處理）- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    // UITransitionContextToViewKey,    // UITransitionContextFromViewKey.        //push    if (self.operation == UINavigationControllerOperationPush) {                //轉場視圖        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        [transitionContext.containerView addSubview:toView];                 //設定影片從右上push進來        toView.x = toView.width;        toView.y = -toView.height;                [UIView animateWithDuration:_duration animations:^{            toView.x = 0;            toView.y = 0;                    } completion:^(BOOL finished) {                        //移除視圖            BOOL cancle = [transitionContext transitionWasCancelled];            if (cancle) {                [toView removeFromSuperview];            }                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:!cancle];        }];    }    //pop    else if(self.operation == UINavigationControllerOperationPop)    {        //轉場視圖，更改層級關系        UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        [transitionContext.containerView insertSubview:toView belowSubview:fromView];        [UIView animateWithDuration:_duration animations:^{                        //pop回傳右上            fromView.x = fromView.width;            fromView.y = -fromView.height;                    } completion:^(BOOL finished) {                        //移除視圖            BOOL cancle = [transitionContext transitionWasCancelled];            if (!cancle) {                [fromView removeFromSuperview];            }                        //影片完成后,視圖上的事件才能處理            [transitionContext completeTransition:!cancle];        }];    }}@end
  • 開始執行，結果如gif圖
    //pushThirdViewController *vc = [[ThirdViewController alloc] init];self.navigationController.delegate = [CustomNavigationTransition sharedCustomNavigationTransition];[self.navigationController pushViewController:vc animated:YES];


六、實作一個自定義的標簽欄切換影片

1、重寫標簽欄控制器的協議，回傳自定義的標簽欄切換轉場影片，影片實作的方式和modal思想一致，重寫的核心協議如下：

//重寫標簽欄協議@protocol UITabBarControllerDelegate <NSObject>@optional......................//回傳一個實作了可互動的標簽欄轉場影片物件- (nullable id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController                      interactionControllerForAnimationController: (id <UIViewControllerAnimatedTransitioning>)animationController;//回傳一個實作了普通的標簽欄轉場影片物件- (nullable id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController            animationControllerForTransitionFromViewController:(UIViewController *)fromVC                                              toViewController:(UIViewController *)toVC;@end

2、 現在就來自定義一個標簽轉場影片，步驟如下：

  • 創建一個CustomTabBarViewController類，設定代理CustomTabbarTransition實體
    //注意：我使用StoryBoard搭建的界面#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface CustomTabBarViewController : UITabBarController@endNS_ASSUME_NONNULL_END
    #import "CustomTabBarViewController.h"#import "CustomTabbarTransition.h"@interface CustomTabBarViewController ()@end@implementation CustomTabBarViewController-(instancetype)initWithCoder:(NSCoder *)coder {    if (self = [super initWithCoder:coder]) {        //設定代理        self.delegate = [CustomTabbarTransition sharedCustomTabbarTransition];    }    return self;}- (void)viewDidLoad {    [super viewDidLoad];    }@end
  • 創建一個CustomTabbarTransition類，實作標簽欄控制器的協議
    #import <UIKit/UIKit.h>#import "Singleton.h"NS_ASSUME_NONNULL_BEGIN@interface CustomTabbarTransition : NSObject<UITabBarControllerDelegate>SingletonH(CustomTabbarTransition);@endNS_ASSUME_NONNULL_END
    #import "CustomTabbarTransition.h"#import "CustomTabbarAnimation.h"@implementation CustomTabbarTransitionSingletonM(CustomTabbarTransition);#pragma mark - UITabBarControllerDelegate//回傳一個實作了普通影片的物件- (nullable id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarControlleranimationControllerForTransitionFromViewController:(UIViewController *)fromVC                                                       toViewController:(UIViewController *)toVC {        CustomTabbarAnimation *animation = [[CustomTabbarAnimation alloc] init];    return animation;}@end
  • 創建一個CustomTabbarAnimation類，自定義標簽切換影片
    #import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface CustomTabbarAnimation : NSObject<UIViewControllerAnimatedTransitioning>@endNS_ASSUME_NONNULL_END
    #import "CustomTabbarAnimation.h"#import "UIView+Extension.h"const CGFloat _Duration = 0.5f;@implementation CustomTabbarAnimation#pragma mark -<UIViewControllerAnimatedTransitioning>//影片時間- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{    return _Duration;}//設定過渡影片（modal和dismiss的影片都需要在這里處理）- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    // UITransitionContextToViewKey,    // UITransitionContextFromViewKey.        //轉場視圖    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];    [transitionContext.containerView addSubview:toView];    [transitionContext.containerView sendSubviewToBack:toView];        //尺寸變化,從原尺寸縮小到點    CGRect finalFrame = CGRectInset(transitionContext.containerView.frame, transitionContext.containerView.frame.size.width/2, transitionContext.containerView.frame.size.height/2);        [UIView animateWithDuration:_Duration animations:^{                               fromView.frame = finalFrame;                   } completion:^(BOOL finished) {                              //移除視圖               BOOL cancle = [transitionContext transitionWasCancelled];               if (!cancle) {                   [fromView removeFromSuperview];               }                              //影片完成后,視圖上的事件才能處理               [transitionContext completeTransition:!cancle];           }];}@end
  • 開始執行，結果如gif圖

 

 

七、總結

好了，這三種常用的轉場影片都進行了自定義，當然至于后兩種的互動轉場影片跟modal實作原理一樣，就不介紹了，借用和修改別人的一個圖，做個總結吧，如下：

 

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/7485.html

標籤：iOS

上一篇：iOS----------證書的制作

下一篇：PromiseKit基本使用及原始碼決議

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架，一般用于Android平臺，第一次接觸的朋友，一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化，注解滿天飛的傳統。嘗試將各處代碼片段串聯起來，理清思緒，真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是，Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎？Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口，如何查看輸出，如何使用 keep 設定入口以及使用實體，如何配置壓縮，混淆，校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能：可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯： Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決： <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri，Cursor沒有獲取到對應的屬性

    Android： 背景：呼叫攝像頭，拍攝視頻，指定保存的地址，但是回傳的Cursor檔案，只有名稱和大小的屬性，沒有其他諸如時長，連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料，在記憶體中都是瞬時的，會隨著斷電、關機等丟失資料，因此android系統采用了持久化技術，用于存盤這些“瞬時”資料 持久化技術包括：檔案存盤、SharedPreference存盤以及資料庫存盤，還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式， ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景： Android專案里呼叫攝像頭拍攝視頻，原本使用的 MediaStore.ACTION_VIDEO_CAPTURE， 后來因專案需要，改成了camera2 1.Camera2Video 官方demo有點問題，下載后，不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕， ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新：應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏，開放網路，獨占設備，不需要額外下載軟體，微信掃碼，發現設備。支持標準DLNA協議，支持倍速播放。視頻，音頻，圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費，沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more

Copyright © 2010-2020 有解無憂