ios开发 方形到圆的动画_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 ()

/// 按钮

@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

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