iOS mask layer的使用

本文介绍了如何使用UIView.layer.mask在iOS中控制View的显示区域,通过设置填充规则kCAFillRuleEvenOdd实现圆形区域外的其他部分显示。利用此技巧,可以创建有趣的图形遮罩效果,并结合CABasicAnimation动画制作出炫酷的转场动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

利用UIView.layer.mask可以控制一个View的显示区域,如图所示


如果我们让这个蓝色的View只显示一个圆形域我们可以这样写:

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.topView.bounds];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = path.CGPath;
    self.topView.layer.mask = maskLayer;

这段代码的意思就是,创建一个圆形的遮罩,然后让圆形的区域显示内容,如图所示。


这是有如果有同学要问,如果我们想要圆形区域不显示,其他区域显示怎么办,那可以这样写:

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.topView.bounds];
    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:self.topView.bounds]];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = path.CGPath;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    self.topView.layer.mask = maskLayer;
这样效果如下

上面的代码的意思就是,先创建一个矩形,然后再添加一个圆形,遮罩的形状如图所示

关键的一句代码:maskLayer.fillRule = kCAFillRuleEvenOdd;这句代码的意思就是设置填充规则,利用奇偶填充规则,意思就是从图形内任意一点射出一条射线,如果改射线跟图形的交点有偶数个则不填充,如果有奇数个交点,则填充,也就是说,上面的图形矩形和圆形相交的地方是不填充的,因为从圆形里射出的射线有两个交点,所以不会填充,填充完的图形如图所示。

以此图形进行遮罩,变会产生图三的效果。知道了这个原理,配合CABasicAnimation动画可以写出很炫酷的转场效果,到下一篇文章再跟大家介绍!



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值