Ping转场动画的实现之一：mask遮罩

来源：互联网发布：mac ps锁定快捷键编辑：程序博客网时间：2024/04/28 20:24

PS：用MarkDown看不到文章详情，重新编辑。

实在不知道怎么描述这个动画，有点像圆形扩散，还是直接看图吧！

首先，要明白两样东西；第一：mask遮罩层，这又是什么东西，再看图：

顾名思义，遮罩就是给一个view添加一层，让这个view只显示遮罩范围内的部分，其他部分被遮住。mask是什么？每一个UIView都有一个CALayer属性，每一个CALayer都有mask属性，mask也是一个CALayer对象；

self.view.layer.mask

mask如何使用？

- (void)viewDidLoad {    [super viewDidLoad];    //设置背景色为红色    self.view.backgroundColor = [UIColor redColor];        //创建一个button    _btn = [UIButton buttonWithType:UIButtonTypeCustom];    _btn.frame = CGRectMake(50, 50, 50, 50);    _btn.backgroundColor = [UIColor redColor];    _btn.layer.cornerRadius = 25;    [_btn addTarget:self action:@selector(gogogo) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:_btn];        //创建一个mask    _maskLayer = [[CAShapeLayer alloc]init];    //设置mask的路径    _maskLayer.path = [[UIBezierPath bezierPathWithOvalInRect:_btn.frame] CGPath];        //将mask添加到view上    self.view.layer.mask = _maskLayer;}

效果：

如果让mask慢慢扩大，那么红色的view就会显示越来越多的内容，添加方法：

- (void)gogogo{    //以红色圆形的中心为原点，画一个足够大的圆，把整个self.view包含在园内（脑补一下）    //计算出这个大圆的半径newR    CGFloat newR = sqrt((self.view.frame.size.width-_btn.frame.size.width/2.0)*(self.view.frame.size.width-_btn.frame.size.width/2.0) + (self.view.frame.size.height-_btn.frame.size.height/2.0)*(self.view.frame.size.height-_btn.frame.size.height/2.0));        //path是大圆的路径    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(_btn.frame, -newR, -newR)];        //设置mask路径，保持动画完成后的状态    _maskLayer.path = [path CGPath];        //创建动画    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];    maskLayerAnimation.fromValue = (__bridge id)([[UIBezierPath bezierPathWithOvalInRect:_btn.frame] CGPath]);    maskLayerAnimation.toValue = (__bridge id)([path CGPath]);    maskLayerAnimation.duration = 2;        //添加动画    [_maskLayer addAnimation:maskLayerAnimation forKey:@"path"];}

run，点击红色btn：

mask先说这么多，下次在介绍转场的实现。

0 0