2. 程式人生 > >TransitionAnimation自定義轉場動畫

TransitionAnimation自定義轉場動畫

阿新 • • 發佈：2018-12-04

    在iOS 7之後，蘋果就開放了自定義轉場的相關api，現在都快iOS 12了，一直都沒有好好研究轉場動畫，一個是之前沒有重視，覺得花裡胡哨的，另外一個是所做的專案中沒有這樣的轉場動畫需求。這裡說的轉場動畫和上一篇CAAnimation 系統動畫中CATransition動畫不是一個概念，上一篇指的是單個View的轉場特效，這裡指的是整個控制器的轉場特效。其實寫上篇文章的目前也是為今天打下鋪墊，複雜的轉場效果也是由單個動畫來組成的。

自定義轉場動畫類圖

    由圖中可以看出要完成自定義轉場動畫，必須遵從UIViewControllerAnimatedTransitioning協議，協議中有兩個必須實現的方法一個是返回轉場時間，一個是具體轉場的實現。文章會結合5個最常用的動畫場景來說明轉場動畫。

    先來看看網易嚴選App的轉場效果，可以看出當前頁面想要Push其他的頁面的時候，當前頁面會下沉同時其他頁面從右邊平移至左邊。Present頁面的時候，當前頁面也會下沉，目標檢視從底部彈出。

網易嚴選Push和Pop動畫.gif

網易嚴選Present和Dismiss動畫.gif

    來看程式碼，在ViewController裡面有兩個按鈕，分別是Push出SecondVC和Present出ThirdVC。

- (IBAction)pushBtnClick:(id)sender
{
    SecondViewController * vc = [[SecondViewController alloc] init];
    [self.navigationController pushViewController:vc animated:YES];
}


- (IBAction)presentBtnClick:(id)sender
{
    ThirdViewController * vc = [[ThirdViewController alloc] init];
    [self presentViewController:vc animated:YES completion:nil];
}

複製程式碼

Push和Pop動畫

UIViewControllerAnimatedTransitioning協議

    這裡新建一個AnimatedTransitioningObject類，然後要遵循UIViewControllerAnimatedTransitioning協議。這個為了方便，把Push、Pop、Present、Dismiss這四個效果寫在一起，用列舉來區分，當然也可以把每種動畫效果單獨用一個AnimatedTransitioningObject類來實現。

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
 


typedef NS_ENUM(NSInteger,TransitionAnimationObjectType) {
    TransitionAnimationObjectType_Push,
    TransitionAnimationObjectType_Pop,
    TransitionAnimationObjectType_present,
    TransitionAnimationObjectType_Dismiss
};

@interface TransitionAnimationObject : NSObject <UIViewControllerAnimatedTransitioning>

@property (nonatomic,assign) TransitionAnimationObjectType type;

- (instancetype)initWithTransitionAnimationObjectType:(TransitionAnimationObjectType)type;

+ (instancetype)initWithTransitionAnimationObjectType:(TransitionAnimationObjectType)type;

@end
複製程式碼

    來看看兩個必須實現的方法，在返回轉場時間裡也可以根據type來返回不同的動畫時間，這裡統一返回0.5秒。pushAnimateTransition裡面實現Push效果轉場。

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

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    switch (_type) {
        case TransitionAnimationObjectType_Push:
            [self pushAnimateTransition:transitionContext];
            break;

        case TransitionAnimationObjectType_Pop:
            [self popAnimateTransition:transitionContext];
            break;

        case TransitionAnimationObjectType_present:
            [self presentAnimateTransition:transitionContext];
            break;

        case TransitionAnimationObjectType_Dismiss:
            [self dismissAnimateTransition:transitionContext];
            break;

        default:
            break;
    }
}
複製程式碼

Push實現

- (void)pushAnimateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    //獲取目標View(secondVC.view) 和 來源View(ViewController.view)
    UIView * toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView * fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

    //這裡截圖做動畫 隱藏來源View
    UIView * tempView = [fromView snapshotViewAfterScreenUpdates:NO];
    fromView.hidden = YES;

    //將需要做轉場的View按照順序新增到轉場容器中
    UIView * containerView = [transitionContext containerView];
    [containerView addSubview:tempView];
    [containerView addSubview:toView];

    CGFloat width = containerView.frame.size.width;
    CGFloat height = containerView.frame.size.height;

    //設定目標View的初始位置
    toView.frame = CGRectMake(width, 0, width, height);

    //開始做動畫
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    [UIView animateWithDuration:duration animations:^{
        tempView.transform = CGAffineTransformMakeScale(0.9, 0.9);
        toView.transform = CGAffineTransformMakeTranslation(-width, 0);
    } completion:^(BOOL finished) {
        //這裡要標記轉場成功 假如不標記 系統會認為還在轉場中 無法互動
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];

        //轉場失敗 也要做相應的處理
        if ([transitionContext transitionWasCancelled])
        {
            fromView.hidden = NO;
            [tempView removeFromSuperview];
        }
    }];

}
複製程式碼

Pop實現

     Push和Pop是相對的關係，所以在Pop動畫中，目標檢視和來源檢視互換身份，實現也是用CGAffineTransformIdentity來還原Push動畫即可。

- (void)popAnimateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    //注意這裡是還原 所以toView和fromView 身份互換了 toView是ViewController.view
    UIView * toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView * fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

    //獲取相應的檢視
    UIView * containerView = [transitionContext containerView];
    UIView * tempView = [[containerView subviews] firstObject];

    //在fromView 下面插入toView 不然回來的時候回黑屏
    [containerView insertSubview:toView belowSubview:fromView];

    //將動畫直接還原即可
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    [UIView animateWithDuration:duration animations:^{
        tempView.transform = CGAffineTransformIdentity;
        fromView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        //標記轉場
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];

        //轉場成功的處理
        if (![transitionContext transitionWasCancelled])
        {
            [tempView removeFromSuperview];
            toView.hidden = NO;
        }
    }];
}

複製程式碼

UINavigationControllerDelegate代理方法

    完成AnimatedTransitioningObject類後，再返回ViewController中，ViewController要遵循UINavigationBarDelegate和UIViewControllerTransitioningDelegate，把SecondVC的transitioningDelegate設定為自己。然後根據不同的operation，來返回不同的動畫實現。

@interface ViewController () <UINavigationControllerDelegate,UIViewControllerTransitioningDelegate>

- (IBAction)pushBtnClick:(id)sender
{
    SecondViewController * vc = [[SecondViewController alloc] init];
    vc.transitioningDelegate = self;
    [self.navigationController pushViewController:vc animated:YES];
}

#pragma mark - Push && Pop
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC
{
    if (operation == UINavigationControllerOperationPush)
    {
        return [TransitionAnimationObject initWithTransitionAnimationObjectType:TransitionAnimationObjectType_Push];
    }
    else if (operation == UINavigationControllerOperationPop)
    {
        return [TransitionAnimationObject initWithTransitionAnimationObjectType:TransitionAnimationObjectType_Pop];
    }
    return nil;
}
複製程式碼

    看看實現效果

Push和Pop效果.gif

Present動畫和Dismiss動畫

Present實現

- (void)presentAnimateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    //獲取目標View(ThirdVC.view) 和 來源View(ViewController.view)
    UIView * toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView * fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

    //截圖做動畫
    UIView * tempView = [fromView snapshotViewAfterScreenUpdates:NO];
    tempView.frame = fromView.frame;
    fromView.hidden = YES;

    //按照順序假如轉場動畫容器中
    UIView * containerView = [transitionContext containerView];
    [containerView addSubview:tempView];
    [containerView addSubview:toView];

    CGFloat width = containerView.frame.size.width;
    CGFloat height = containerView.frame.size.height;

    //設定toView的初始化位置 在螢幕底部
    toView.frame = CGRectMake(0, height, width, 400);

    //做轉場動畫
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.55 initialSpringVelocity:1 options:0 animations:^{
        tempView.transform = CGAffineTransformMakeScale(0.9, 0.9);
        toView.transform = CGAffineTransformMakeTranslation(0, -400);
    } completion:^(BOOL finished) {
        //轉場結束後一定要標記 否則會認為還在轉場 無法互動
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        if ([transitionContext transitionWasCancelled])
        {
            //轉場失敗
            fromView.hidden = NO;
            [tempView removeFromSuperview];
        }
    }];
}
複製程式碼

Dismiss實現

- (void)dismissAnimateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    //dismiss的時候 fromVC和toVC身份倒過來了
    UIView * toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView * fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

    //containerView裡面的順序也倒過來了 截圖在最上面
    UIView * containerView = [transitionContext containerView];
    UIView * tempView = [[containerView subviews] firstObject];

    //做還原動畫就可以了
    NSTimeInterval duration = [self transitionDuration:transitionContext];

    [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.55 initialSpringVelocity:1 options:0 animations:^{
        tempView.transform = CGAffineTransformIdentity;
        fromView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        //轉場結束後一定要標記 否則會認為還在轉場 無法互動
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        if (![transitionContext transitionWasCancelled])
        {
            //轉場成功
            toView.hidden = NO;
            [tempView removeFromSuperview];
        }
    }];

}
複製程式碼

UIViewControllerTransitioningDelegate代理方法

    回到ViewController，把ThirdVC的transitioningDelegate設定為自己,然後在代理方法中自定型別。

- (IBAction)presentBtnClick:(id)sender
{
    ThirdViewController * vc = [[ThirdViewController alloc] init];
    vc.transitioningDelegate = self;
    [self presentViewController:vc animated:YES completion:nil];
}

#pragma mark - Present && Dismiss
- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    return [TransitionAnimationObject initWithTransitionAnimationObjectType:TransitionAnimationObjectType_present];
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [TransitionAnimationObject initWithTransitionAnimationObjectType:TransitionAnimationObjectType_Dismiss];
}
複製程式碼

手勢動畫

UIPercentDrivenInteractiveTransition建立手勢類

    新建一個手勢類GestureObject繼承自UIPercentDrivenInteractiveTransition，addGestureToViewController是給目標控制器新增手勢。

#import <UIKit/UIKit.h>

@interface GestureObject : UIPercentDrivenInteractiveTransition

//判斷是互動的手勢
@property (nonatomic,assign) BOOL interacting;

- (void)addGestureToViewController:(UIViewController *)viewController;

@end
複製程式碼

    然後再手勢的狀態之間來判斷是否執行動畫，這裡是判斷手勢偏移量超過螢幕一半的高度就生效，執行相關動畫，否則還原動畫。

- (void)handleGesture:(UIPanGestureRecognizer *)ges
{
    CGPoint point = [ges translationInView:ges.view];

    switch (ges.state) {
        case UIGestureRecognizerStateBegan:
        {
            self.interacting = YES;
            [self.targetVC dismissViewControllerAnimated:YES completion:nil];
            break;
        }

        case UIGestureRecognizerStateChanged:
        {
            CGFloat fraction = point.y / ges.view.frame.size.height;
            //限制在0和1之間
            fraction = MAX(0.0, MIN(fraction, 1.0));
            self.shouldComplete = fraction > 0.5;
            [self updateInteractiveTransition:fraction];
            break;
        }
        
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:
        {
            self.interacting = NO;
            if (!self.shouldComplete || ges.state == UIGestureRecognizerStateCancelled)
            {
                //還原動畫
                [self cancelInteractiveTransition];
            }
            else
            {
                //完成動畫
                [self finishInteractiveTransition];
            }
            break;
        }

        default:
            break;
    }
}
複製程式碼

UIViewControllerTransitioningDelegate代理方法

    回到ViewController中，在Present出ThirdVC的時候新增手勢，在代理方法interactionControllerForDismissal中指定手勢。

- (IBAction)presentBtnClick:(id)sender
{
    ThirdViewController * vc = [[ThirdViewController alloc] init];
    vc.transitioningDelegate = self;
    [self.gestureObject addGestureToViewController:vc];
    [self presentViewController:vc animated:YES completion:nil];
}

- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator
{
    return self.gestureObject.interacting ? self.gestureObject : nil;
}
複製程式碼

看看效果

Present和Dismiss效果.gif

小結

     Push、Pop、Present、Dismiss、手勢動畫都講解完了，可以看出，自定義轉場大致的步驟是

  • 根據viewForKey來獲取轉場上下文
  • 將要轉場的檢視加入轉場容器中
  • 做出轉場動畫
  • 標記轉場成功的狀態，根據狀態做相應的處理

    理解了這些，再複雜的轉場動畫都能一步步分解出來，下面是格瓦拉App的轉場效果，第一次看的時候，覺得很酷炫，現在瞭解了轉場的核心後，覺得不那麼難了，有時間再把它的效果寫出來吧。

格瓦拉轉場動畫.gif

原始碼：TransitionAnimation

相關推薦

TransitionAnimation自定義轉場動畫

    在iOS 7之後，蘋果就開放了自定義轉場的相關api，現在都快iOS 12了，一直都沒有好好研究轉場動畫，一個是之前沒有重視，覺得花裡胡哨的，另外一個是所做的專案中沒有這樣的轉場動畫需求。這裡說的轉場動畫和上一篇CAAnimation 系統動畫中CATransition動畫不是一個概念，上一篇指的是單

UINavigationController 自定義轉場動畫（模仿淘寶App跳轉）

imp dal iap 默認 自定義轉場動畫 ict oda ack 調用 制作目的 想要自定義系統轉場動畫速度 放棄不順暢的 NavigationBar 隱藏消失 幹脆直接幹掉每個頁面的 NavigationBar，在使用 UINavigationController

iOS開發 tabbar自定義轉場動畫

1.小記 關於自定義轉場動畫,只要你理清他的”套路”,你就可以隨心所欲地自定義了. 大體思路就是:遵守對應的代理協議,然後設定對應的代理,實現代理方法,這個代理方法要返回的值就是你要實現的動畫.(如果返回nil,就是預設效果) 以UITabBarController為例的

iOS 關於自定義轉場動畫,以UITabBarController為例

1.小記 關於自定義轉場動畫,只要你理清他的”套路”,你就可以隨心所欲地自定義了. 大體思路就是:遵守對應的代理協議,然後設定對應的代理,實現代理方法,這個代理方法要返回的值就是你要實現的動畫.(如果返回nil,就是預設效果) 以UITabBarContro

iOS自定義轉場動畫

http://www.jianshu.com/p/45434f73019e 更新,更簡單的自定義轉場整合！ 寫在前面 這兩天閒下來好好的研究了一下自定義轉場，關於這方面的文章網路上已經很多了，作為新手，我想通過這篇文章把自己這幾天的相關學習心得記錄一下，方便加深印響和

iOS自定義轉場動畫（1）——自定義Push轉場動畫

版本：Xcode 7.0.1 語言：Objective-C 轉場動畫就是viewController之間切換的動畫。 主要有以下三種自定義方法： 列Push & Pop Modal Segue 第一種是UINavigationControl

關於自定義轉場動畫，我都告訴你(上)

這篇文章，我將講述幾種轉場動畫的自定義方式，並且每種方式附上一個示例，畢竟程式碼才是我們的語言，這樣比較容易上手。其中主要有以下三種自定義方法，供大家參考： Push & Pop Modal Segue 前兩種大家都很熟悉，第三種是 St

iOS自定義轉場動畫（4）——自定義模態跳轉之dismiss與手勢驅動

Dismiss 效果： 1、新建PresentTransition繼承NSObject，並在.h中遵守UIViewControllerAnimatedTransitioning協議。 2、實現協議的兩個方法，並在其中編寫 Push 的動畫。類似Pr

自定義轉場詳解(一)

assign pda 好的 led hint ext hid case delegate 前言 本文是我學習了onevcat的這篇轉場入門做的一點筆記。 今天我們來實現一個簡單的自定義轉場，我們先來看看這篇文章將要實現的一個效果圖吧： 過程詳解 熱身準備 我們先創建一

android進階4step1：Android動畫處理與自定義View——轉場動畫

以下都需要執行在5.0以上 一、揭露動畫效果 參考：使用Circular Reveal為你的應用新增揭露動畫效果 最主要的類Circular Reveal 官方將這一動畫稱為揭露效果，它在官網中的描述是這樣的： 當您顯示或隱藏一組 UI 元素時，揭露動畫可為使用者提供視覺

【轉】自定義presentviewcontroller和pushviewcontroller轉場動畫

自定義NavigationController動畫 首先，實現一個非常簡單的UINavigationController轉場，一般會這麼幹 實現FirstViewController，加到Window上（沒用storyboard和xib） 實現FirstViewCo

控制器轉場動畫自定義（2）：modal/dismiss的實現

大家好，我是KK黃凱展，這次繼上篇的push/pop轉場動畫自定義後，我們把目標瞄準modal和dismiss這兩個傢伙，照舊，還是先把效果圖和預設搬出來給大家look一look~ 這是預設modal和dismiss的效果 這是自定義push和po

轉場動畫CALayer (Transition)

types bottom don media move bool != tran 類型 1、將對應UI控件的層調用以下接口即可 1.1 .h文件 // // 文 件 名:CALayer+Transition.h // // 版權所有:Copyright ? 2018年

Android 使用ActivityOptions實現Activity轉場動畫

之前一直都是用這種方式實現Activity的轉場動畫： // MainActivity overridePendingTransition(enterAnim, exitAnim); 從Android5.0之後，Google提供了一種新的方式來實現：ActivityOptions。

Android Reveal圓形Activity轉場動畫

一、效果 二、知識點 CircularReveal動畫、透明主題、轉場動畫（非必須） 三、方案 假設有兩個Activity A和B。Reveal圓形Activity轉場動畫效果先從A到B，那麼基本方案如下： 確定要顯示的圓形動畫中心起點位置 通過Intent將起點位置從A

實戰 | 使用揭露動畫（Reveal Effect）做一個絲滑的Activity轉場動畫

提筆之際（附總體思路） 最近跟幾個小夥伴在實踐一個專案，考慮到介面效果，我們決定使用揭露動畫作為Activity的轉場動畫。 這裡主要是我負責這部分的實現。 話說之前是沒接

OC轉場動畫UIViewControllerTransitioningDelegate

  該專案一共兩個介面，第一個的只有一個SystemAnimationViewController只有UICollecitonView，第二個介面ImgDetailViewController只有一個UIImageView，程式碼簡單，這裡不做陳述 下面是轉場動畫的所有程式碼： //

iOS layer層的轉場動畫

layer層的轉場動畫 直接上程式碼 - (void)viewDidLoad { [super viewDidLoad]; self.imageView = [[UIImageView alloc]initWithFrame:self.view.bounds ];

iOS塗色塗鴉效果、Swift仿喜馬拉雅FM、抽屜轉場動畫、拖拽頭像、標籤選擇器等原始碼

iOS精選原始碼 iOS優質部落格 WKWebView是蘋果在iOS 8之後推出的框架WebKit中的瀏覽器控制元件, 其載入速度比UIWebView快了許多, 但記憶體佔用率卻下降很多, 也解決了載入網頁時的記憶體洩露問題. 現在的專

iOS | CAShapeLayer轉場動畫

什麼也不說了，作為一名樂於分享技術的小開發，直接先上個樣式最為直觀貼切，有需要的朋友可以直接拿過去用。 需要demo請點選這裡 ：github 在這個demo中，核心為選用畫布CAShapeLayer，因為一般都是用它來處理形狀之類的動畫，結合了貝塞爾曲線來控制路徑，然後使用CABasicAnimat