遮罩Mask

学习1
学习2

1.mask 是CALayer的一个属性，同时也是CALayer 类型的。
2.原理：控制layer本身渲染的一个layer。效果是：比如imageLayer有一个maskLayer作为mask（注意maskLayer可以不跟imageLayer大小一样），那maskLayer透明的地方，imageLayer就不会渲染，而是变透明，显示出imageLayer之后的内容，maskLayer不透明的地方，imageLayer就会正常渲染，显示出imageLayer本来的内容如果maskLayer比imageLayer要小，那默认的maskLayer之外的地方都是透明的，都不会渲染。
3.mask 的作用就是让父图层部分区域可见。
4.mask 的backgroundColor必须设置，不设置mask 背景就是透明的，mask 是不会起作用的，但是backgroundColor设置什么颜色无所谓。
5.为一个layer的mask 创建一个新的mask时，这个新的mask不能有superlayer 和sublayer。（官方文档的说明）
6.mask 可以配合CAGradientLayer、CAShapeLayer 使用。可以实现蒙层透明度、显示不同形状图层、图案镂空、文字变色等等功能。
7.mask在动画中使用，可以产生很好的动画效果。

用法一

作为图片的遮罩

let backImage = UIImageView(frame: CGRect(x: 0, y: 0, width: KscreenWidth, height: KscreenHeight - 60))
backImage.image = UIImage(named: "R-C (1).jpeg")
backImage.contentMode = .scaleAspectFill
view.addSubview(backImage)

let coverImage = UIImageView(frame: CGRect(x: 0, y: 0, width: KscreenWidth, height: KscreenWidth))
coverImage.center = view.center
coverImage.image = UIImage(named: "R-C.jpeg")
coverImage.contentMode = .scaleAspectFit
view.addSubview(coverImage)
coverImage.isUserInteractionEnabled = true
let pan = UIPanGestureRecognizer(target: self, action: #selector(panAction(_:)))
coverImage.addGestureRecognizer(pan)

/// 图片的遮罩,修改layer的位置，需要使用layer的 position<位置> 和 anchorPoint<锚点>
maskLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
maskLayer.position = CGPoint(x: KscreenWidth/2, y: KscreenWidth/2)
maskLayer.backgroundColor = UIColor.orange.cgColor
maskLayer.cornerRadius = 100
coverImage.layer.mask = maskLayer

/// 拖动手势
@objc
func panAction(_ pan: UIPanGestureRecognizer){
    let point = pan.translation(in: view)
    var frame = maskLayer.frame
    frame.origin.x += point.x
    frame.origin.y += point.y
    maskLayer.frame = frame
    
    pan.setTranslation(.zero, in: view)
}

用法二

UILabel作为遮罩

UILabel作为遮罩.png

let converView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
converView.backgroundColor = .lightGray
converView.center = view.center
view.addSubview(converView)

let gradLayer = CAGradientLayer()
gradLayer.frame = converView.bounds
gradLayer.startPoint = .zero
gradLayer.endPoint = CGPoint(x: 1, y: 1)
gradLayer.colors = [UIColor.RGB(255, 0, 0), UIColor.RGB(255, 165, 0), UIColor.RGB(255, 255, 0), UIColor.RGB(0, 255, 0), UIColor.RGB(0, 255, 255), UIColor.RGB(0, 0, 255), UIColor.RGB(43, 0, 255), UIColor.RGB(87, 0, 255)]
converView.layer.addSublayer(gradLayer)

let lbl = UILabel()
lbl.text = "你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧你说说这是怎么个事吧"
lbl.numberOfLines = 0
lbl.font = .boldSystemFont(ofSize: 15)
lbl.frame = CGRect(x: 5, y: 5, width: 190, height: 190)
converView.addSubview(lbl)
gradLayer.mask = lbl.layer

用法三

文本颜色分段显示

文本颜色分段显示.png

let contentView = UIView(frame: CGRect(x: 0, y: 0, width: 280, height: 280))
contentView.center = view.center
view.addSubview(contentView)

let lblBack = UILabel()
lblBack.frame = CGRect(x: 5, y: 5, width: 180, height: 30)
lblBack.text = "你好，早饭吃了吗"
lblBack.textColor = .black
contentView.addSubview(lblBack)

let lblCover = UILabel()
lblCover.frame = CGRect(x: 5, y: 5, width: 180, height: 30)
lblCover.text = "你好，早饭吃了吗"
lblCover.textColor = .red
contentView.addSubview(lblCover)

/// 遮罩
let coverLayer = CALayer()
coverLayer.frame = CGRect(x: 30, y: 10, width: 100, height: 30)
coverLayer.backgroundColor = UIColor.orange.cgColor
coverLayer.cornerRadius = 15
lblCover.layer.mask = coverLayer