CAGradientLayer是CALayer的子类,它能够绘制一个渐变层
除了继承自父类的属性外,CAGradientLayer还有下边几个自己的属性
colors :颜色数组,用来填充渐变的颜色
locations:是一个坐标数组,用来显示渐变开始的位置 参数是 0-1
endPoint:渐变结束的位置 默认值是(0.5,1)参数是 0-1
startPoint: 渐变开始的位置 默认值是(0.5,0)参数是 0-1
从坐标图可以看出 (0,0)为左上角 (1, 1)为右下角
type: 渐变绘制的样式,默认是 kCAGradientLayerAxial(也只有这一种样式,所以压根不用设置)
Demo:
let layer = CAGradientLayer()
layer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
layer.position = self.view.center
layer.colors = [UIColor.yellowColor().CGColor,UIColor.redColor().CGColor] layer.locations = [0.3]
layer.startPoint = CGPointMake(0.5, 0)
layer.endPoint = CGPointMake(0.5, 1)
self.view.layer.addSublayer(layer)
上边代码绘制了一个从上到下 黄色到红色的一个渐变
我们也可以再添加一个渐变颜色 只要在colors数组中再添加一个颜色 ,注意colors数组中的参数为CGColorRef 类型,记得要将UIColor转换一下
layer.colors = [UIColor.yellowColor().CGColor,UIColor.redColor().CGColor, UIColor.blueColor().CGColor]
再修改一下新的渐变颜色开始的位置
layer.locations = [0.3, 0.6]
这里的意思是从0.3位置开始到红色过度,从0.6开始到蓝色过度
运行一下结果是这样:
如果要绘制一个从左上到右下的颜色渐变,只要修改一下 startPoint和 endPoint
layer.startPoint = CGPointMake(0, 0)
layer.endPoint = CGPointMake(1, 1)
运行一下结果是这样:
在创建了一个CAGradientLayer后 我们就可以用它来做一点其他事啦 ~~
给jinx添加一个带有渐变的遮罩层:
let layer = CAGradientLayer()
layer.frame = imageView.bounds
layer.colors = [UIColor.blackColor().CGColor,UIColor.clearColor().CGColor] layer.locations = [0.1]
layer.startPoint = CGPoint(x: 0.5, y: 0.2)
layer.endPoint = CGPoint(x: 0.5, y: 1)
imageView.layer.mask = layer
创建了一个CAGradientLayer 然后传给 layer的mask属性
也可以创建一个带有渐变的切换动画, jinx 变身 ~ catalina!
步骤很简单
1.创建三个CAGradientLayer,分别将三个layer添加到baseView上
2.将baseView设置成catalinaView的maskView (maskView属性是在iOS8中添加的,功能类似layer的mask属性)
3.为gradientLayer分别添加动画
如果写的有什么不足的地方,欢迎大家留言或私信与我沟通,我会及时做出更正