iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法示例

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

這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

什么是轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

在 NavigationController 里 push 或 pop 一個(gè) View Controller，在 TabBarController 中切換到其他 View Controller，以 Modal 方式顯示另外一個(gè) View Controller，這些都是 View Controller Transition。在 storyboard 里，每個(gè) View Controller 是一個(gè) Scene，View Controller Transition 便是從一個(gè) Scene 轉(zhuǎn)換到另外一個(gè) Scene, 中文稱(chēng)呼其為「轉(zhuǎn)場(chǎng)」。顧名思義，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)便是 View Controller Transition 過(guò)程中的動(dòng)畫(huà)效果。

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

本文主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法，分享出來(lái)供大家參考學(xué)習(xí)，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

1.CATransition

CATransition是CAAnimation的子類(lèi)，用于過(guò)渡動(dòng)畫(huà)或轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。為視圖層移入移除屏幕提供轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。首先來(lái)看一下簡(jiǎn)單的Demo：

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

將該動(dòng)畫(huà)添加到window.layer上，則會(huì)present或push時(shí)使用指定的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

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

type：轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類(lèi)型。

官方SDK只提供了四種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類(lèi)型，即:

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:動(dòng)畫(huà)類(lèi)型的方向

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時(shí)使用指定的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

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

看一下示例代碼：

- (void)viewDidLoad {
 [super viewDidLoad];
 
 UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
 
 [button setTitle:@"進(jìn)入" 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:@"點(diǎn)贊他人1"],[UIImage imageNamed:@"偷師學(xué)藝1"],[UIImage imageNamed:@"學(xué)會(huì)欣賞3"]];
 
 _imageView.image = [UIImage imageNamed:@"成果秀1"];
}


- (void)buttonClicked{
 
 CATransition *animation = [CATransition animation];
 animation.type = @"cube";
 animation.subtype = kCATransitionFromRight;
 animation.duration = 1.0;
 //換圖片的時(shí)候使用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
 [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:這個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)是用在當(dāng)一個(gè)父視圖控制器中有幾個(gè)childViewController，當(dāng)要在這幾個(gè)子視圖控制器之間切換時(shí)就可以用這個(gè)方法。

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

// Curl 翻頁(yè)效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻轉(zhuǎn)效果
// 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的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)中，要指定UINavigationControllerDelegate對(duì)象：

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

UINavigationControllerDelegate主要有以下兩個(gè)協(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)建一個(gè)基類(lèi)PDAnimatorBaseTransition實(shí)現(xiàn)UIViewControllerAnimatedTransitioning協(xié)議的方法。

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

//動(dòng)畫(huà)持續(xù)時(shí)間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
//轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)現(xiàn)細(xì)節(jié)
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
動(dòng)畫(huà)結(jié)束時(shí)調(diào)用
- (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

//動(dòng)畫(huà)結(jié)束時(shí)回調(diào)
- (void)animationEnded:(BOOL) transitionCompleted{ 
}
- (void)animationPresent{ 
}
- (void)animationDismiss{
}
- (void)animationPop{ 
}
- (void)animationPush{
 
}

然后創(chuàng)建子類(lèi)PDAnimatorPUshPopTransition繼承自PDAnimatorBaseTransition，實(shí)現(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

然后我們?cè)谛枰猵ush的地方實(shí)現(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

首先需要設(shè)置被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)建子類(lèi)PDAnimationPresentTransitio繼承自基類(lèi)PDAnimatorBaseTransition，實(shí)現(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];
 }];
 
}

然后我們?cè)谛枰猵resent的地方實(shí)現(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;
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: