View.layer.mask属性的应用(画圆角,画心)

前言

看到什么app,脑子里都会不自觉的想这个东西是怎么实现的。哔哩哔哩作为我用来偶尔看看鬼畜,追追新番的一个应用,感觉它某些细节的设计确实不错。例如下图中的标注处的圆角

哔哩哔哩的iOS客户端首页截图

设置View的四个角都为圆角

像图中处的4个角都为圆角,这都是一些基础的东西感觉就没必要写了,什么你还不知道?特别简单,只需要设置下面的属性就可以了,产生圆角引发的性能问题此处不做讨论,这样写一般应用是没有问题的

view.layer.cornerRadius = 10;
view.layer.masksToBounds = YES;

设置View的两个角都为圆角

像图中的两个圆角,当然就实现效果来说,方法有很多种,此处讲一个,使用CALayer的mask属性:

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds
                                                   byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                         cornerRadii:CGSizeMake(15, 15)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;
self.layer.mask = maskLayer;

设置View显示一个心形❤️

其实和显示两个圆角的方法差不多,只不过就是绘制图形的路径不一样
下图的图片上使用两根贝塞尔曲线绘制了一个心形❤️,曲线的算式,想要看的可以看下github的工程

各个形状的展示

总结

mask属性是做什么的?
看下苹果文档的描述:

The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

The default value of this property is nil nil. When configuring a mask, remember to set the size and position of the mask layer to ensure it is aligned properly with the layer it masks.

翻译成中文就是:

这个layer的alpha通道决定展示多少layer的内容和背景,完全或部分不透明的像素允许下面的内容展示出来,但是完全透明的像素会阻碍内容

为什么用CAShapeLayer + UIBezierPath哪?

UIBezierPath是系统对画图方法的封装,可以很方便的调用,获取路径path
@property(nonatomic) CGPathRef CGPath;

CAShapeLayer有path属性
@property(nullable) CGPathRef path;
可以很方便的将你画的path绘制到layer上

这两个搭配简直就是珠连璧合、相得益彰、相辅相成、不好意思没词了。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言:关于贝塞尔曲线与CAShapeLayer的学习 学习Demo演示: 贝塞尔曲线简单了解 使用UIBezier...
    麦穗0615阅读 17,930评论 18 149
  • 转载://www.greatytc.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,321评论 0 13
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,663评论 7 11
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,147评论 5 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,160评论 0 17