iOS 自定义转场动画初探

      最近项目刚迭代，正好闲下来捣鼓了一下iOS的自定义转场的效果。闲话不多说，直接开始上代码吧。(ps：请忽略实际的转场效果，关注技术本身呢哦。pps：主要是转场的动画做的比较low啦！)

1、首先定义一个转场动画的类

      第一步，咱们先定义一个管理转场动画的类。首先创建一个继承自NSObject的类，这里叫JTAnimatedTransition，并且让其遵循UIViewControllerAnimatedTransitioning这个协议。
      这个是.h文件代码。 我在这里定义了一个枚举，用来表示转场的类型。并且还遵循的CAAnimationDelegate协议，这个后面会说到。 再有呢，就是一个类方法了，这个是在使用的控制器中会用到的方法，具体的用法后续代码中会有体现。

#import <Foundation/Foundation.h>#import <UIKit/UIKit.h>typedef enum {    JTAnimatedTransitionTypePush,    JTAnimatedTransitionTypePop,    JTAnimatedTransitionTypePresent,    JTAnimatedTransitionTypeDismiss}JTAnimatedTransitionType;@interface JTAnimatedTransition : NSObject<UIViewControllerAnimatedTransitioning, CAAnimationDelegate>@property (assign, nonatomic) JTAnimatedTransitionType type;@property (strong, nonatomic) id transitionContext;+ (JTAnimatedTransition *)animatedTransitionWithType:(JTAnimatedTransitionType)type;@end

接下来是.m中的代码了。 具体说明在代码中都有详细注释。

#import "JTAnimatedTransition.h"@implementation JTAnimatedTransition+ (JTAnimatedTransition *)animatedTransitionWithType:(JTAnimatedTransitionType)type{    JTAnimatedTransition *animatedTransition = [[JTAnimatedTransition alloc] init];    animatedTransition.type = type;    return animatedTransition;}#pragma mark - UIViewControllerAnimatedTransitioning- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{    //返回动画执行的时间    return 0.5;}- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    //在这里设置自己想要的动画效果    self.transitionContext = transitionContext;    if (self.type == JTAnimatedTransitionTypePush) {        // 获得即将消失的vc的v        UIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];        // 获得即将出现的vc的v        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        // 获得容器view        UIView *containerView = [transitionContext containerView];        [containerView addSubview:fromeView];        [containerView addSubview:toView];        UIBezierPath *startBP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake((containerView.frame.size.width-100)/2, 100, 100, 100)];        CGFloat radius = 1000;        UIBezierPath *finalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(150 - radius, 150 -radius, radius*2, radius*2)];        CAShapeLayer *maskLayer = [CAShapeLayer layer];        maskLayer.path = finalBP.CGPath;        toView.layer.mask = maskLayer;        //执行动画        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];        animation.delegate = self;        animation.fromValue = (__bridge id _Nullable)(startBP.CGPath);        animation.toValue = (__bridge id _Nullable)(finalBP.CGPath);        animation.duration = [self transitionDuration:transitionContext];        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];        [maskLayer addAnimation:animation forKey:@"path"];    } else if (self.type == JTAnimatedTransitionTypePresent) {        UIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        UIView *containerView = [transitionContext containerView];        [containerView addSubview:fromeView];        [containerView addSubview:toView];        fromeView.frame = containerView.frame;        toView.frame = containerView.frame;        toView.layer.anchorPoint = CGPointMake(0.0f, 1.0f);        toView.frame = containerView.frame;        toView.transform = CGAffineTransformMakeRotation(-M_PI/2);        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{            toView.transform = CGAffineTransformIdentity;        } completion:^(BOOL finished) {            [self.transitionContext completeTransition:YES];        }];    } else if (self.type == JTAnimatedTransitionTypeDismiss) {        UIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];        UIView *containerView = [transitionContext containerView];        [containerView addSubview:fromeView];        [containerView addSubview:toView];        fromeView.frame = containerView.frame;        toView.frame = CGRectMake(containerView.frame.size.width, containerView.frame.origin.y, 0, containerView.frame.size.height);        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{            fromeView.frame = CGRectMake(containerView.frame.origin.x, containerView.frame.origin.y, 0, containerView.frame.size.height);            toView.frame = containerView.frame;        } completion:^(BOOL finished) {            [self.transitionContext completeTransition:YES];        }];    } else {    }}#pragma mark - CAAnimationDelegate-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{    //告诉系统转场动画完成    [self.transitionContext completeTransition:YES];    //清除相应控制器视图的mask    [self.transitionContext viewForKey:UITransitionContextFromViewKey].layer.mask = nil;    [self.transitionContext viewForKey:UITransitionContextToViewKey].layer.mask = nil;}@end

到这里转场动画管理者就写好了，后面我们只需要关注使用者的情况了。

2、怎么使用转场动画

      现在我们创建一个使用者类。我这里就直接使用了ViewController了。下面是创建好之后的效果图。

首页.png

下面就是.m的具体实现代码了，一些简单的界面搭建代码就不贴出来了。下面的代码只是一些跟转场动画有关的代码哦。

这是点击cell之后的逻辑

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{    [tableView deselectRowAtIndexPath:indexPath animated:YES];    ViewControllerTwo *vc = [[ViewControllerTwo alloc]init];    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];    CGRect rectInTableView = [tableView rectForRowAtIndexPath:indexPath];    CGRect rect = [tableView convertRect:rectInTableView toView:[tableView superview]];    cell.imageView.hidden = YES;    self.selectImageView.image = cell.imageView.image;    self.selectImageView.frame = CGRectMake(cell.imageView.frame.origin.x, rect.origin.y, cell.imageView.frame.size.width, cell.imageView.frame.size.height);    vc.img = self.selectImageView.image;    vc.row = indexPath.row;    [UIView animateWithDuration:0.5 animations:^{        self.selectImageView.frame = CGRectMake(0, 2, self.view.bounds.size.width/2, self.view.bounds.size.width/2);        self.selectImageView.center = CGPointMake(self.view.bounds.size.width/2, 200);    } completion:^(BOOL finished) {    [self.navigationController pushViewController:vc animated:YES];        }];}

要实现自定义的转场，还需要使用者必须遵循UINavigationControllerDelegate协议或者, UIViewControllerTransitioningDelegate协议。根据需要的专场类型，实现自己的协议方法。

#pragma mark - pop / push- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{    if (operation == UINavigationControllerOperationPush) {        JTAnimatedTransition *animatedTransition = [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePush];        return animatedTransition;    }    return nil;}- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated{    if (viewController != self) {        self.selectImageView.frame = CGRectNull;    }}#pragma mark - present / dismiss-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{    return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePresent];}- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{    return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypeDismiss];}

首页push效果图.gif

3、模态跳转

模态跳转效果图.gif

调用跳转的代码

-(void)click:(UIButton *)sender{    ViewControllerThree *vc = [[ViewControllerThree alloc]init];    [self presentViewController:vc animated:YES completion:^{    }];}调用者 ViewController 内实现了协议方法

在返回时 在 ViewControllerThree 内需要遵循 UIViewControllerTransitioningDelegate 并实现其协议方法

#import "ViewControllerThree.h"#import "JTAnimatedTransition.h"@interface ViewControllerThree ()<UIViewControllerTransitioningDelegate>@end@implementation ViewControllerThree- (void)viewDidLoad {    [super viewDidLoad];    self.transitioningDelegate = self;    self.title = @"模态";    self.view.backgroundColor = [UIColor lightGrayColor];    UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];    btn.backgroundColor = [UIColor redColor];    [btn setTitle:@"点我返回" forState:UIControlStateNormal];    [btn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:btn];}-(void)back{    [self dismissViewControllerAnimated:YES completion:^{    }];}#pragma mark - UIViewControllerTransitioningDelegate- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{    return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePresent];}- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{    return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypeDismiss];}@end

结束语

      写到这转场动画就自定义完成了。其实转场动画主要就是两个协议：1、在动画管理类内遵循UIViewControllerAnimatedTransitioning 2、在动画使用的类内遵循, UIViewControllerTransitioningDelegate以及UINavigationControllerDelegate协议，并实现其协议方法。
      如果你有什么更加炫酷的动画，只需要在JTAnimatedTransition内设置动画的位置写上自己想要的动画即可。