绘图-视图遮罩MaskView的使用


在UIView中有一个maskView属性,我们可以利用这个属性很方便的做出一些有意思的效果

这个属性在iOS8之后开始使用,用来表示视图的遮罩。


3123.png
官方定义*An optional view whose alpha channel is used to mask a view’s content.
(一个通过alpha通道来掩盖一个view的内容的可选view。)

注意:

  • maskView的颜色不显示,最终效果图怎么显示只跟maskView每个point的alpha相关。

  • 当一个view设置了maskView后,那么它只会显示与maskView重叠部分,即在此图中只会显示maskView部分(maskView跟view没有层次,可以理解maskView嵌在View里)

  • 对于maskView与View重叠部分怎么显示

  • 如果你的maskView 就是不起作用,请设置一下 maskView的背景颜色。

可以这样理解,是将maskView每个point的alpha赋值给View的重叠部分相对应的point,这样view的重叠每个point都有个alpha值了,view重叠部分就可能显示多种透明色。

gitHub上上传的dome效果图如下,做一下思路说明,供有需要的兄弟参考一下:

效果.png

这个效果的实现关键点在于 动画执行时间的延迟设置,这个时间的计算和设置,直接决定效果能否缓缓出来,因为代码的执行速度是很快的,而动画又是移步执行的,如果设置动画的执行时间为0,你会看到图片瞬间改变,出不了想要的效果。

效果1.png

途中圆圈羽化的边缘是用的图片填充,对CALayer内容的图片填充才有的羽化边缘的形状,才出的这样的效果,这其实是 maskLayer的使用了,具体可以参考我的代码查看。喜欢的话,请star一下。

如果兼容低版本,用maskLayer替换。

可以结合CAGradientLayer用来实现颜色滚动渐变

  • 初始化一个CAGradientLayer
  • 设置一个CABasicAnimation 用来做CAGradientLayer 的动画
  • CAGradientLayer.mask = label.layer; Lable的layer 赋值给 CAGradientLayer的maskLayer即可

效果如下:


滑动.gif

此处只做思路的介绍,查看具体源码可以参看这篇文章:
http://www.jianshu.com/p/f0c198e8de91

当然也可以结合CAShapeLayer用来实现自己想要的任意效果,layer的mask是种位掩蔽,在shapeLayer的填充区域中,alpha值不为零的部分,self会被绘制;alpha值为零的部分,self不会被绘制

可以把任何UIView切成任意形状的代码:
- (void)dwMakeForEveryView
{
CGSize size = self.frame.size;
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setFillColor:[[UIColor whiteColor] CGColor]];
 
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, size.width - radius, size.height);
CGPathAddArc(path, NULL, size.width-radius, size.height-radius, radius,)
..............
 .............
CGPathCloseSubpath(path);
[shapeLayer setPath:path];
CFRelease(path);
self.layer.mask = shapeLayer;//layer的mask,顾名思义,
}
视图初始化的时候调用即可
- (id)initWithFrame:(CGRect)frame
  {
        if (self = [super initWithFrame:frame])
       {
         [self dwMakeBottomRoundCornerWithRadius:3.0];
        }
       return self;
}

本文考虑到简洁就不上代码了,大体都是思路介绍,具体的代码实现的效果可以到我GitHub去下载查看,喜欢的话,请star 一下,谢谢。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 3,975评论 5 10
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 6,860评论 4 27
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 3,661评论 0 12
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,145评论 4 39
  • 昨晚做梦,梦到吃了一晚上的自助。 中午吃方便面,继而发生第一次孕吐… 洪老师说:“这孩子生出来得什么样啊?”
    雪杉非狐阅读 182评论 3 0