iOS實現(xiàn)轉場動畫的3種方法示例

更新時間：2019年03月06日 11:24:36 作者：雪山飛狐_91ae

這篇文章主要給大家介紹了關于iOS實現(xiàn)轉場動畫的3種方法，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

什么是轉場動畫

在 NavigationController 里 push 或 pop 一個 View Controller，在 TabBarController 中切換到其他 View Controller，以 Modal 方式顯示另外一個 View Controller，這些都是 View Controller Transition。在 storyboard 里，每個 View Controller 是一個 Scene，View Controller Transition 便是從一個 Scene 轉換到另外一個 Scene, 中文稱呼其為「轉場」。顧名思義，轉場動畫便是 View Controller Transition 過程中的動畫效果。

在 iOS 7 之前，我們只能使用系統(tǒng)提供的轉場效果，大部分時候夠用，但僅僅是夠用而已，總歸會有各種不如意的小地方，但我們卻無力改變；iOS 7 開放了相關 API 允許我們對轉場效果進行全面定制，這太棒了，自定義轉場動畫以及對交互手段的支持帶來了無限可能。

本文主要給大家介紹了關于iOS實現(xiàn)轉場動畫的3種方法，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧

1.CATransition

CATransition是CAAnimation的子類，用于過渡動畫或轉場動畫。為視圖層移入移除屏幕提供轉場動畫。首先來看一下簡單的Demo：

 CATransition *animation = [CATransition animation];
 animation.type = kCATransitionFade;
 animation.subtype = kCATransitionFromRight;
 animation.duration = 1.0;
 // 在window上執(zhí)行CATransition, 即可在ViewController轉場時執(zhí)行動畫
 [self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"];
 
 AViewController *vc = [[AViewController alloc] init];
 [self presentViewController:vc animated:NO completion:nil];

將該動畫添加到window.layer上，則會present或push時使用指定的轉場動畫。

其中最主要的兩個屬性就是type和subtype。

type：轉場動畫的類型。

官方SDK只提供了四種轉場動畫的類型，即:

CA_EXTERN NSString * const kCATransitionFade;
CA_EXTERN NSString * const kCATransitionMoveIn;
CA_EXTERN NSString * const kCATransitionPush;
CA_EXTERN NSString * const kCATransitionReveal;

私有的type：

NSString *const kCATransitionCube = @"cube"; 
NSString *const kCATransitionSuckEffect = @"suckEffect"; 
NSString *const kCATransitionOglFlip = @"oglFlip"; 
NSString *const kCATransitionRippleEffect = @"rippleEffect"; 
NSString *const kCATransitionPageCurl = @"pageCurl"; 
NSString *const kCATransitionPageUnCurl = @"pageUnCurl"; 
NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";
NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";

subtype:動畫類型的方向

CA_EXTERN NSString * const kCATransitionFromRight;
CA_EXTERN NSString * const kCATransitionFromLeft;
CA_EXTERN NSString * const kCATransitionFromTop;
CA_EXTERN NSString * const kCATransitionFromBottom;

上面講的是給window.layer添加transition，這樣使得在present或push時使用指定的轉場動畫。

既然講到這里了，就看一下把transition加在layer上。

看一下示例代碼：

- (void)viewDidLoad {
 [super viewDidLoad];
 
 UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
 
 [button setTitle:@"進入" forState:UIControlStateNormal];
 
 button.backgroundColor = [UIColor redColor];
 
 [button addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
 
 [self.view addSubview:button];
 
 _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 300, 150, 150)];
 [self.view addSubview:_imageView];
 _imageView.backgroundColor = [UIColor redColor];
 _imageArray = @[[UIImage imageNamed:@"成果秀1"],[UIImage imageNamed:@"點贊他人1"],[UIImage imageNamed:@"偷師學藝1"],[UIImage imageNamed:@"學會欣賞3"]];
 
 _imageView.image = [UIImage imageNamed:@"成果秀1"];
}


- (void)buttonClicked{
 
 CATransition *animation = [CATransition animation];
 animation.type = @"cube";
 animation.subtype = kCATransitionFromRight;
 animation.duration = 1.0;
 //換圖片的時候使用轉場動畫
 [self.imageView.layer addAnimation:animation forKey:nil];
 //cycle to next image
 UIImage *currentImage = self.imageView.image;
 NSUInteger index = [self.imageArray indexOfObject:currentImage];
 index = (index + 1) % [self.imageArray count];
 self.imageView.image = self.imageArray[index];
 
}

2.transitionFromViewController

UIViewController自帶的方法:
transitionFromViewController:toViewController:duration:options:animations:completion:這個轉場動畫是用在當一個父視圖控制器中有幾個childViewController，當要在這幾個子視圖控制器之間切換時就可以用這個方法。

AViewController *a = self.childViewControllers[0];
BViewController *b = self.childViewControllers[1];
CViewController *c = self.childViewControllers[2];

// Curl 翻頁效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻轉效果
// UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight
// UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromDown

[self transitionFromViewController:_currentViewController
   toViewController:b
    duration:0.5
    options:UIViewAnimationOptionTransitionFlipFromRight
   animations:^{

} completion:^(BOOL finished) {

}];

3.Transition Animation

1 UINavigationControllerDelegate + UIViewControllerAnimatedTransitioning

在UINavigationController的轉場動畫中，要指定UINavigationControllerDelegate對象：

self.navigationController.delegate = self;
[self.navigationController pushViewController:itemVC animated:YES];

UINavigationControllerDelegate主要有以下兩個協(xié)議方法：

//pop
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
       interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0);
//push
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
         animationControllerForOperation:(UINavigationControllerOperation)operation
            fromViewController:(UIViewController *)fromVC
             toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0);

首先創(chuàng)建一個基類PDAnimatorBaseTransition實現(xiàn)UIViewControllerAnimatedTransitioning協(xié)議的方法。

UIViewControllerAnimatedTransitioning協(xié)議的方法有：

//動畫持續(xù)時間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
//轉場動畫實現(xiàn)細節(jié)
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
動畫結束時調用
- (void)animationEnded:(BOOL) transitionCompleted;

PDAnimatorBaseTransition.h

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

typedef NS_ENUM(NSInteger, PDAnimationType){
 
 animationTypePresent = 0,
 animationTypeDismiss ,
 animationTypePush ,
 animationTypePop,
};

@interface PDAnimatorBaseTransition : NSObject <UIViewControllerAnimatedTransitioning>

@property (nonatomic, assign)PDAnimationType animationType;

@property (nonatomic, strong)UIView *containerView;

@property (nonatomic, strong)UIViewController *from;

@property (nonatomic, strong)UIViewController *to;

@property (nonatomic, strong)UIView *fromView;

@property (nonatomic, strong)UIView *toView;

@property (nonatomic, weak)id <UIViewControllerContextTransitioning> transitionContext;


@end

PDAnimatorBaseTransition.m

#import "PDAnimatorBaseTransition.h"
@interface PDAnimatorBaseTransition() 
@end
@implementation PDAnimatorBaseTransition

#pragma mark -required
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
 
 return 1.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
 
 _transitionContext = transitionContext;
 
 _containerView = [transitionContext containerView];
 
 _from = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
 
 _to = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
 
 if([transitionContext respondsToSelector:@selector(viewForKey:)]){
  
  _fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
  _toView = [transitionContext viewForKey:UITransitionContextToViewKey];
 }else{
  
  _fromView = _from.view;
  _toView = _to.view;
 }
 
 if(self.animationType == animationTypePresent){
  
  [self animationPresent];
 }else if (self.animationType == animationTypeDismiss){
  
  [self animationDismiss];
 }else if (self.animationType == animationTypePop){
  
  [self animationPop];
 }else{
  
  [self animationPush];
 }
 
}
#pragma mark -optional

//動畫結束時回調
- (void)animationEnded:(BOOL) transitionCompleted{ 
}
- (void)animationPresent{ 
}
- (void)animationDismiss{
}
- (void)animationPop{ 
}
- (void)animationPush{
 
}

然后創(chuàng)建子類PDAnimatorPUshPopTransition繼承自PDAnimatorBaseTransition，實現(xiàn)- (void)animationPush，- (void)animationPop方法。

PDAnimatorPUshPopTransition.h

#import "PDAnimatorBaseTransition.h"
#import <UIKit/UIKit.h>

@interface PDAnimatorPUshPopTransition : PDAnimatorBaseTransition
@property (nonatomic, assign)CGPoint itemCenter;

@property (nonatomic, assign)CGSize itemSize;

@property (nonatomic, strong)NSString *imageName;

@end

PDAnimatorPUshPopTransition.m

#import "PDAnimatorPUshPopTransition.h"

@implementation PDAnimatorPUshPopTransition

- (instancetype)init{
 
 self = [super init];
 if(self){
  
  
 }
 
 return self;
}

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
 
 return 5.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
 
 [super animateTransition:transitionContext];
}

- (void)animationPush{
 
 NSTimeInterval duration = [self transitionDuration:self.transitionContext];
 __weak typeof(self) weakSelf = self;
 
 self.containerView.backgroundColor = [UIColor lightGrayColor];
 
 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 160)];
 imageView.image = [UIImage imageNamed:self.imageName];
 imageView.center = _itemCenter;
 
 CGFloat initialScale = _itemSize.width / CGRectGetWidth(imageView.frame);
 
 CGAffineTransform transform = CGAffineTransformIdentity;
 
 transform = CGAffineTransformScale(transform, initialScale, initialScale);
 transform = CGAffineTransformRotate(transform, M_PI);
 
 imageView.layer.affineTransform = transform;
 
 // imageView.transform = CGAffineTransformMakeScale(initialScale, initialScale);
 
 [self.containerView addSubview:imageView];
 
 
 self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
 CGPoint finalCenter = self.toView.center;
 self.toView.center = finalCenter;
 self.toView.alpha = 0.0;
 //這一句一定要
 [self.containerView addSubview:self.toView];
 
 [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
  

  imageView.layer.affineTransform = CGAffineTransformIdentity;
  
  imageView.center = finalCenter;
  
  self.fromView.alpha = 0.0;
  self.containerView.backgroundColor = [UIColor redColor];
 } completion:^(BOOL finished){
  
  [imageView removeFromSuperview];
  
  weakSelf.toView.alpha = 1.0f;
  weakSelf.fromView.alpha = 1.0f;
  
  [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]];
 }];
 
}

- (void)animationPop{
 
 NSTimeInterval duration = [self transitionDuration:self.transitionContext];
 __weak typeof(self) weakSelf = self;
 
 self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
 
 [self.containerView insertSubview:self.toView belowSubview:self.fromView];
 
 self.fromView.alpha = 0.0;
 
 self.fromView.backgroundColor = [UIColor clearColor];
 
 [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
  
  CGFloat initialScale = _itemSize.width / 200;
  weakSelf.fromView.transform = CGAffineTransformMakeScale(initialScale, initialScale);
  weakSelf.fromView.center = weakSelf.itemCenter;
  
  weakSelf.toView.alpha = 1.0f;
 } completion:^(BOOL finished){
  
  weakSelf.fromView.alpha = 0.0f;
  
  [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]];
 }];
}


@end

然后我們在需要push的地方實現(xiàn)UINavigationControllerDelegate的協(xié)議方法：

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
           animationControllerForOperation:(UINavigationControllerOperation)operation
               fromViewController:(UIViewController *)fromVC
               toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0){
 
 PDAnimatorPUshPopTransition *animationTransition = [[PDAnimatorPUshPopTransition alloc] init];
 if(operation == UINavigationControllerOperationPush){
  
  animationTransition.animationType = animationTypePush;
 }else if (operation == UINavigationControllerOperationPop){
  
  animationTransition.animationType = animationTypePop;
 }
 
 NSArray *indexPaths = [self.collectionView indexPathsForSelectedItems];
 if (indexPaths.count == 0) {
  return nil;
 }
 
 NSIndexPath *selectedIndexPath = indexPaths[0];
 UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];
 
 // 一定要加上convertPoint:toView:操作
 animationTransition.itemCenter = [self.collectionView convertPoint:cell.center toView:self.view];
 animationTransition.itemSize = cell.frame.size;
 animationTransition.imageName = [NSString stringWithFormat:@"%ld", (long)selectedIndexPath.item];
 
 return animationTransition;
}

2 UIViewControllerTransitioningDelegate+UIViewControllerAnimatedTransitioning

首先需要設置被present的Controller的transitionDelegate

DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init];
presentedVC.transitionDelegate = self;
[self presentViewController:presentedVC animated:YES completion:nil];

UIViewControllerTransitioningDelegate的代理的協(xié)議方法有：

//  prenent  
- (id )animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
//  pop  
- (id )animationControllerForDismissedController:(UIViewController *)dismissed;
//  prenent  
- (id )interactionControllerForPresentation:(id )animator;
//  pop  
- (nullable id )interactionControllerForDismissal:(id )animator;

創(chuàng)建子類PDAnimationPresentTransitio繼承自基類PDAnimatorBaseTransition，實現(xiàn)- (void)animationPresent，- (void)animationDismiss方法。

PDAnimationPresentTransition.h

#import "PDAnimatorBaseTransition.h"

@interface PDAnimationPresentTransition : PDAnimatorBaseTransition

@end

PDAnimationPresentTransition.m

#import "PDAnimationPresentTransition.h"

@implementation PDAnimationPresentTransition

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
 
 return 1.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
 [super animateTransition:transitionContext];
}

- (void)animationPresent{
 
 NSTimeInterval duration = [self transitionDuration:self.transitionContext];
 __weak typeof(self) weakSelf = self;
 
 self.toView.frame = [self.transitionContext initialFrameForViewController:self.to];
 
 self.fromView.frame = [self.transitionContext initialFrameForViewController:self.from];
 
 CGAffineTransform transform = CGAffineTransformIdentity;
 transform = CGAffineTransformScale(transform, 0.001, 0.001);
 self.toView.layer.affineTransform = transform;
 
 [self.containerView addSubview:self.toView];
 
 self.toView.alpha = 0.0;
 
 [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  
  self.toView.layer.affineTransform = CGAffineTransformIdentity;
  self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
  self.toView.alpha = 1.0;
 } completion:^(BOOL finished){
  
  BOOL wasCancelled = [weakSelf.transitionContext transitionWasCancelled];
  [weakSelf.transitionContext completeTransition:!wasCancelled];
 }];
 
}

然后我們在需要present的地方實現(xiàn)UIViewControllerTransitioningDelegate的代理方法。

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
 
 PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init];
 animationTransition.animationType = animationTypePresent;
 return animationTransition;
}

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
 
 PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init];
 animationTransition.animationType = animationTypePresent;
 return animationTransition;
}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

僅幾行iOS代碼限制TextField輸入長度
這篇文章主要為大家詳細介紹了通過幾行iOS代碼限制TextField輸入長度的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
iOS7 毛玻璃特效代碼
這篇文章主要分享了iOS7 毛玻璃特效代碼，非常的實用，做IOS開發(fā)的童鞋們不要錯過了
2014-10-10
iOS實現(xiàn)app間跳轉功能
這篇文章主要為大家詳細介紹了iOS實現(xiàn)app間跳轉功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
iOS 對plist文件進行讀寫,增刪改查的實例
下面小編就為大家?guī)硪黄猧OS 對plist文件進行讀寫,增刪改查的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
iOS中SQLite的操作方法
這篇文章主要為大家詳細介紹了iOS中SQLite的操作方法，感興趣的小伙伴們可以參考一下
2016-05-05
NSURLSession跨域重定向透傳HTTP Header問題解決
這篇文章主要為大家介紹了NSURLSession跨域重定向透傳HTTP Header問題解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
iOS10 權限崩潰問題詳解及解決方案
這篇文章主要介紹了iOS10 權限崩潰問題詳解及解決方案的相關資料,需要的朋友可以參考下
2016-11-11
iOS新版微信底部返回橫條問題的解決
這篇文章主要介紹了iOS新版微信底部返回橫條問題的解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
IOS 中XAMPP配置問題及解決方法
這篇文章主要介紹了IOS 中XAMPP配置問題及解決方法的相關資料,需要的朋友可以參考下
2017-06-06
淺析iOS中的淺拷貝和深拷貝(copy和mutableCopy)
ios提供了copy和mutablecopy方法，顧名思義，copy就是復制了一個imutable的對象，而mutablecopy就是復制了一個mutable的對象。本文給大家介紹iOS中的淺拷貝和深拷貝(copy和mutableCopy) ，感興趣的朋友一起看看吧
2016-04-04