iOS轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的三種方式

1.CATransition

CATransition是CAAnimation的子類,用于過(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à)的類型。
    官方SDK只提供了四種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類型,即:
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à)類型的方向
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è)基類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)建子類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)建子類PDAnimationPresentTransitio繼承自基類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;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,694評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,270評(píng)論 5 13
  • 前言 本文只要描述了iOS中的Core Animation(核心動(dòng)畫(huà):隱式動(dòng)畫(huà)、顯示動(dòng)畫(huà))、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,742評(píng)論 7 11
  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種:UIView動(dòng)畫(huà),核心動(dòng)畫(huà),幀動(dòng)畫(huà),自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,326評(píng)論 1 23
  • 如果想讓事情變得順利,只有靠自己--夏爾·紀(jì)堯姆 上一章介紹了隱式動(dòng)畫(huà)的概念。隱式動(dòng)畫(huà)是在iOS平臺(tái)創(chuàng)建動(dòng)態(tài)用戶界...
    夜空下最亮的亮點(diǎn)閱讀 2,103評(píng)論 0 1

友情鏈接更多精彩內(nèi)容