之前对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
实现效果:
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()