iOS 圆形扩散跳转转场动画

最近写代码的时候得到了一个需求，很多APP上都遇见过，就是圆形扩散的转场动画。今天分享给大家，看似很复杂的效果，实际上非常简单。

先上图：

转场动画.gif

首先我们需要两个控制器:ViewController、SecondViewController。我们从ViewController跳转到SecondViewController。

这里我们先展示SecondViewController控制器的内容：

#import "SecondViewController.h"

@interface SecondViewController ()

/// 图片
@property (nonatomic, strong) UIImageView *imageView;

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.imageView];
}

#pragma mark - Get方法
-(UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
        _imageView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
    }
    
    return _imageView;
}

@end

只有一张图片，是一个很简单的控制器
接下来展示ViewController：

#import "ViewController.h"
#import "SecondViewController.h"

@interface ViewController () <CAAnimationDelegate>

/// 按钮
@property (nonatomic, strong) UIButton *presentButton;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.presentButton];
}

#pragma mark - 点击事件
-(void)persentAction:(UIButton *)button {
    // 充当渐变的背景(可以用自定义view代替)
    UIImageView *bgImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
    bgImageView.frame = self.view.frame;
    [self.view addSubview:bgImageView];
    
    UIBezierPath *maskStartBP =  [UIBezierPath bezierPathWithOvalInRect:button.frame];
    CGFloat radius = [UIScreen mainScreen].bounds.size.height - 100;
    UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(button.frame, -radius, -radius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskFinalBP.CGPath;
    maskLayer.backgroundColor = (__bridge CGColorRef)([UIColor whiteColor]);
    bgImageView.layer.mask = maskLayer;
    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    maskLayerAnimation.fromValue = (__bridge id)(maskStartBP.CGPath);
    maskLayerAnimation.toValue = (__bridge id)((maskFinalBP.CGPath));
    // 时间
    maskLayerAnimation.duration = 5.f;
    maskLayerAnimation.delegate = self;
    [maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
}

/// 结束事件
-(void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    SecondViewController *viewController = [[SecondViewController alloc] init];
    
    [self presentViewController:viewController animated:NO completion:nil];
}

/// 开始事件
-(void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"开始事件");
}

#pragma mark - Get方法
-(UIButton *)presentButton {
    if (!_presentButton) {
        _presentButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _presentButton.frame = CGRectMake(0, 0, 100, 40);
        _presentButton.center = self.view.center;
        _presentButton.backgroundColor = [UIColor whiteColor];
        [_presentButton setTitle:@"跳转" forState:UIControlStateNormal];
        [_presentButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_presentButton addTarget:self action:@selector(persentAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _presentButton;
}

@end

其实在做转场动画的时候，我添加了一个“假”的视图，当动画结束的时候进行跳转。效果就显得很酷炫了。