美文网首页
CALayer的mask属性

CALayer的mask属性

作者: li好孩子 | 来源:发表于2017-12-19 22:56 被阅读6次

之前对mask属性了解的特别少,今天特意来看看其用法:
*********mask就是PS中的遮罩;
*********遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称“被*********遮罩层”;这两个图层中只有相重叠的地方才会被显示。也就是说在遮*********罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没*********有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。
1.可以实现UILabel 字体的渐变效果
1.1先设置一个渐变的CAGradientLayer图层
1.2给渐变图层添加一个遮盖(UIlabel)使其frame跟图层完全一样
1.3把label 设置成渐变图层的mask(遮盖)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(x: 100, y: 200, width: 100, height: 30)
gradientLayer.colors = [UIColor.green.cgColor,UIColor.blue.cgColor,UIColor.brown.cgColor,UIColor.red.cgColor]
gradientLayer.locations = [NSNumber(value: 0.1),NSNumber(value: 0.3),NSNumber(value: 0.5),NSNumber(value: 0.8)]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
self.view.layer.addSublayer(gradientLayer)
let testLabel = UILabel()
testLabel.frame = gradientLayer.bounds
testLabel.textColor = UIColor.black
testLabel.font = UIFont.systemFont(ofSize: 14)
testLabel.backgroundColor = UIColor.clear
testLabel.textAlignment = .center
testLabel.text = "我只是测试"
self.view.addSubview(testLabel)
gradientLayer.mask = testLabel.layer

实现效果:


Snip20171219_1.png

2.可以实现渐变的进度条
2.1先创建一个进度条背景图层
2.2创建一个渐变图层
2.3创建一个图层用于遮盖(渐变层的mask为当前图层)
2.4点击按钮修改遮盖的frame (此时的遮盖不要设置为clear,因为上面需要有对象才行)
//先创建一个进度条背景图层
let bgLayer = CALayer()
bgLayer.frame = CGRect(x: 100, y: 200, width: 200, height: 20)
bgLayer.backgroundColor = UIColor.gray.cgColor
bgLayer.masksToBounds = true
bgLayer.cornerRadius = 10
self.view.layer.addSublayer(belayer)
//创建一个渐变图层
gradientLayer = CAGradientLayer()
gradientLayer.frame = bgLayer.frame
gradientLayer.masksToBounds = true
gradientLayer.cornerRadius = 10
gradientLayer.colors = [UIColor.green.cgColor,UIColor.blue.cgColor,UIColor.brown.cgColor,UIColor.red.cgColor]
gradientLayer.locations = [NSNumber(value: 0.1),NSNumber(value: 0.3),NSNumber(value: 0.5),NSNumber(value: 0.8)]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
self.view.layer.addSublayer(gradientLayer)
//创建一个图层用于遮盖(渐变层的mask为当前图层)
maskLayer = CALayer()
maskLayer.frame = CGRect(x: 0, y: 0, width: 60, height: 20)
maskLayer.backgroundColor = UIColor.black.cgColor
gradientLayer.mask = maskLayer
//点击按钮修改遮盖的frame (此时的遮盖不要设置为clear,因为上面需要有对象才行)此时我们可以添加动画来展示效果
CATransaction.begin()
CATransaction.setDisableActions(false)
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut))
CATransaction.setAnimationDuration(0.4)
maskLayer.frame.size.width = 180
CATransaction.commit()


Snip20171220_1.png

相关文章

  • CALayer的mask属性

    CALayer的mask属性俗称蒙版。@property(nullable, strong) CALayer *m...

  • CALayer属性mask

    CALayer的属性mask,mask也是一个layer,这边称它为maskLayer。介绍中描述 An opti...

  • CALayer之mask使用

    mask是CALayer的一个属性,它本身也是一个CALayer类。mask有和其他图层一样的绘制和布局属性。它类...

  • 自定义转场动画-小圆点扩散

    mask的理解 CALayer有一个属性叫做mask。比如imageLayer有一个maskLayer作为mask...

  • CALayer的mask属性

    之前对mask属性了解的特别少,今天特意来看看其用法:*********mask就是PS中的遮罩;********...

  • 547,CALayer之mask属性-遮罩(面试点:mask属性

    CALayer有一个属性叫做mask。 这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。 ...

  • CALayer之mask属性-遮罩

    CALayer有一个属性叫做mask。 这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。 ...

  • SplashAnimation

    涉及到的技术点CALayer的mask属性mask 也是一个 CALayer当我们使用时,就需要单独创建一个 CA...

  • 【iOS开发】iOS中的Mask

    CALayer拥有mask属性,Apple的官方解释如下: An optional layer whose alp...

  • 图层蒙版的理解

    图层蒙版的理解 CALayer有一个属性叫做mask可以解决这个问题。这个属性本身就是个CALayer类型,有和其...

网友评论

      本文标题:CALayer的mask属性

      本文链接:https://www.haomeiwen.com/subject/acyiwxtx.html