绘图-视图遮罩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 一下,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用来创建并以可视化方式来呈现网页,它确定了一个网...

7423
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

2027
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

1051
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

2196
来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

2918
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

4453
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

4705
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

1694
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

21910
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

1142

扫码关注云+社区

领取腾讯云代金券