前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >绘图-视图遮罩MaskView的使用

绘图-视图遮罩MaskView的使用

作者头像
進无尽
发布2018-09-12 18:34:11
2.1K0
发布2018-09-12 18:34:11
举报
文章被收录于专栏:進无尽的文章

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

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

3123.png

代码语言:javascript
复制
官方定义*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不会被绘制

代码语言:javascript
复制
可以把任何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 一下,谢谢。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.09.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如果兼容低版本,用maskLayer替换。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档