iOS layer.mask 的原理

直接上原理

控制layer本身渲染的一个layer。效果是:比如imageLayer有一个maskLayer作为mask(注意maskLayer可以不跟imageLayer大小一样),那maskLayer透明的地方,imageLayer就不会渲染,而是变透明,显示出imageLayer之后的内容,maskLayer不透明的地方,imageLayer就会正常渲染,显示出imageLayer本来的内容如果maskLayer比imageLayer要小,那默认的maskLayer之外的地方都是透明的,都不会渲染。

由以上原理可知,如果我们想让一个视图只展示一部分,

那么我们可以通过设置其layer.mask来实现,

如果一个视图要实现一个渐变的展示,我们也可以通过

layer.mask实现

复制代码
   self.view.backgroundColor = [UIColor cyanColor];
    CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(100, 200, 100, 100);
    layer.backgroundColor = [UIColor whiteColor].CGColor;
    self.view.layer.mask = layer;

效果

整个页面只展示了一部分

复制代码
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
  
    CAGradientLayer *gradientlayer = [[CAGradientLayer alloc] init];
    gradientlayer.frame = CGRectMake(100, 100, 100, 100);
    gradientlayer.colors = @[(id)[[UIColor whiteColor] colorWithAlphaComponent:0].CGColor, (id)[[UIColor whiteColor] colorWithAlphaComponent:1].CGColor];
    gradientlayer.locations = @[@0, @1];
    self.view.layer.mask = gradientlayer;
    // Do any additional setup after loading the view.
}
相关推荐
茶底世界之下20 小时前
蓝调鱼市的一盏暖灯:用 Awaking 把冷海与灯光分开
ios·app·产品
茶底世界之下2 天前
窗边白雏菊与旧书:用 Awaking 留住一束暖光
ios·app·产品
茶底世界之下3 天前
阴天海边的蓝船:用 Awaking 把灰蓝调成清亮主角
ios·app·产品
Digitally3 天前
如何将 iPhone 备份到 iCloud?
ios
传奇开心果编程4 天前
【Flutter踩坑排雷】第19课:路由硬编码坑|字符串路由书写错误,页面跳转失败排查
android·flutter·ios·移动开发·跨平台·ui框架·声明式ui
茶底世界之下4 天前
雨后街口的斑马线:用 Awaking 把颜色让给光与步伐
ios·app·产品
茶底世界之下5 天前
晨雾河岸的旧书摊:用 Awaking 给木色一点暖光
ios·app·产品
90后的晨仔5 天前
在 macOS 27 上运行 Xcode 26
ios
茶底世界之下6 天前
山间站台不必转暖:用 Awaking 留住冷光与红箱
ios·app·产品