MaskView使用指南

最近看渐变折现图，看到了对于MaskView的使用，对于MaskView表示接触太少，所以找了找资料，发现MaskView还是挺有趣的，所以对参考文章及代码进行总结，有兴趣的朋友可以自己看看这位大大的原文，代码在这，都可以好好参考参考。

简单来说，MaskView就是一个遮罩，只有在遮罩范围内的，才会显示，那么，MaskView可以怎么玩呢？

1、基本使用

VC的view的背景色设置为藏青色，用一张星形的image赋值给imageView，再将VC的view的maskView设置成星形的imageView，这时候，遮罩就只显示星形的部分，其他的部分就被遮盖起来了。

self.view.backgroundColor = [UIColor blackColor];
//创建一个和控制器底层View一样尺寸的view
UIView *view = [[UIView alloc] initWithFrame:self.view.bounds];
//设置背景色为藏青色
view.backgroundColor = [UIColor colorWithRed:145.0 / 255.0
                                            green:191.0 / 255.0
                                             blue:192.0 / 255.0
                                            alpha:1.0];
//创建星形图片
UIImage *star = [UIImage imageNamed:@"Star"];
//用星形图片创建一个图像视图
UIImageView *imageView = [[UIImageView alloc] initWithImage:star];
//设置成和view一样的尺寸
imageView.frame = view.frame;
//图片填充模式设置
imageView.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:view];
view.maskView = imageView;

2、用作过度动画

imageView左右两边半屏上下反向运动，将图片过渡为另外一张图片

self.view.backgroundColor = [UIColor whiteColor];

//背景层
UIImageView *background = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
background.image        = [UIImage imageNamed:@"base"];
background.center       = self.view.center;
[self.view addSubview:background];

//前景层
UIImageView *upGround = [[UIImageView alloc] initWithFrame:background.frame];
upGround.image        = [UIImage imageNamed:@"background"];
[self.view addSubview:upGround];

//创建mask和背景层、前景层的frame一样
UIView *mask      = [[UIView alloc] initWithFrame:upGround.bounds];
upGround.maskView = mask;

//加载一张下方半透明的图片
UIImageView *picOne = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 400)];
picOne.image        = [UIImage imageNamed:@"mask1"];
[mask addSubview:picOne];

//加载一张上方半透明的图片
UIImageView *picTwo = [[UIImageView alloc] initWithFrame:CGRectMake(100, -200, 100, 400)];
picTwo.image        = [UIImage imageNamed:@"mask"];
[mask addSubview:picTwo];

//移动左右两个mask里的图片，移动至都为透明处，因为此时mask为透明，所以upGround的maskView也为透明，即隐藏了upGround，显示background
[UIView animateWithDuration:2.f delay:2.f options:0 animations:^{
    picOne.y -= 400;
    picTwo.y += 400;
} completion:^(BOOL finished) {
    
}];

其中picOne加载的图片mask1为：

mask1

其中picTwo加载的图片mask为：

mask

如代码中注释的，两个 maskView中的使用的图片动画滚动到透明位置 后，因为透明， maskView不遮盖，显示下层图片，看起来的效果就如同过渡动画。

3、maskView配合CAShaperLayer使用

效果如下图：

可以使用拖拽移动图中毛玻璃效果的那个遮罩，使得图片像是添加了滤镜一样的效果

创建效果的代码如下：

[super viewDidLoad];
//创建背景图片视图层
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
imageView.image = [UIImage imageNamed:@"Slice"];
[self.view addSubview:imageView];

_maskLayer = [CAShapeLayer layer];

// 贝塞尔曲线(创建一个圆)
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                    radius:100
                                                startAngle:DEGREES(0)
                                                  endAngle:DEGREES(360)
                                                 clockwise:YES];
// 获取path
_maskLayer.path     = path.CGPath;
_maskLayer.position = CGPointMake(_showView.bounds.size.width/2.f,
                                  _showView.bounds.size.height/2.f);
// 设置填充颜色为透明
_maskLayer.fillColor = [UIColor whiteColor].CGColor;
_maskLayer.position = self.view.center;

//创建一个用于毛玻璃效果的视图
UIView *blurView = [[UIView alloc] initWithFrame:self.view.bounds];
blurView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blurView];
//毛玻璃效果的视图的mask设置为之前创建的绘制的圆形_maskLayer
blurView.layer.mask = _maskLayer;
//毛玻璃效果的视图的layer中添加一张完整的相同的用毛玻璃效果覆盖的图片
blurView.layer.contents = (__bridge id)([[UIImage imageNamed:@"Slice"] imgWithBlur].CGImage);

/* 
 透明的View,用于maskView中的ShapeLayer的参考View(用于拖拽)
 */
_showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
_showView.backgroundColor = [UIColor clearColor];
_showView.center = self.view.center;
[self.view addSubview:_showView];

UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];

[_showView addGestureRecognizer:recognizer];

实现拖拽的动画代码如下：

// 拖拽
CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                     recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

// 关闭CoreAnimation实时动画绘制(核心)
[CATransaction setDisableActions:YES];
_maskLayer.position = recognizer.view.center;

其中关闭CoreAnimation实时动画绘制很重要，否则实时动画绘制，就会导致拖动效果滞后。

4、maskView配合CAGradientLayer使用

效果图如下：

就如同之前的滑动解锁的那个从左往右的金属闪动效果

代码如下：

[super viewDidLoad];
self.view.backgroundColor = [UIColor grayColor];
// 渐变Layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
[self.view.layer addSublayer:gradientLayer];
gradientLayer.frame = CGRectMake(0, 200, self.view.width, 64);
gradientLayer.colors = @[
                         (__bridge id)[UIColor blackColor].CGColor,
                          (__bridge id)[UIColor whiteColor].CGColor,
                          (__bridge id)[UIColor blackColor].CGColor,
                         ];
gradientLayer.locations = @[@0.25,@0.5,@0.75];
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];
basicAnimation.fromValue = @[@0, @0, @0.25];
basicAnimation.toValue = @[@0.75, @1, @1];
basicAnimation.duration = 2.5;
basicAnimation.repeatCount = HUGE;
[gradientLayer addAnimation:basicAnimation forKey:nil];


UILabel *unlock = [[UILabel alloc] initWithFrame:gradientLayer.bounds];
self.unlock = unlock;
unlock.alpha = 0.5;
unlock.text = @"滑动来解锁 >>";
unlock.textAlignment = NSTextAlignmentCenter;
unlock.font = [UIFont boldSystemFontOfSize:30];
    gradientLayer.mask = unlock.layer;

这个就比较简单了，使用CABasicAnimation对CAGradientLayer的locations属性做动画，使得它有一个亮光滚动效果。
注意，CAGradientLayer 的这四个属性 colors locations startPoint endPoint 都是可以进行动画的哦。

以上就是跟大大学来的maskView的一些简单使用，如果有说的不对或者理解错的，希望各位大大不吝赐教。谢谢大家！