最近寫代碼的時候得到了一個需求，很多APP上都遇見過，就是圓形擴散的轉(zhuǎn)場動畫。今天分享給大家，看似很復(fù)雜的效果，實際上非常簡單。

先上圖：

轉(zhuǎn)場動畫.gif

首先我們需要兩個控制器:ViewController、SecondViewController。我們從ViewController跳轉(zhuǎn)到SecondViewController。

這里我們先展示SecondViewController控制器的內(nèi)容：

#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 {
    // 充當(dāng)漸變的背景(可以用自定義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"];
}

/// 結(jié)束事件
-(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:@"跳轉(zhuǎn)" forState:UIControlStateNormal];
        [_presentButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_presentButton addTarget:self action:@selector(persentAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _presentButton;
}

@end

其實在做轉(zhuǎn)場動畫的時候，我添加了一個“假”的視圖，當(dāng)動畫結(jié)束的時候進行跳轉(zhuǎn)。效果就顯得很酷炫了。