基本介绍:
CAGradientLayer
是用来生成两种或更多颜色平滑渐变的。用
Core Graphics
复制一个
CAGradientLayer
并将内容绘制到一个普通图层的寄宿图也是有可能的,但是
CAGradientLayer
的真正好处在于绘制使用了硬件加速。
了解iOS中Layer
的单位坐标系统:
属性解析:
public class CAGradientLayer : CALayer {
颜色数组,默认为 nil, 该数组定义了每一个渐变值得颜色。这个数组成员接受 CGColorRef 类型的值 , 如果你愿意, colors 属性可以包含很多颜色,所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下,这些颜色在空间上均匀地被渲染,但是我们可以用 locations 属性来调整空间。是可动画属性
public var colors: [ AnyObject ]?
可选的数组,定义了每一个渐变点的位置 ( 即定义了 colors 属性中每个不同颜色的位置 ) ,范围在 [ 0 , 1 ], 数组中的值必须是渐变增加,如果数组为 nil ,那么将均匀渐变,当渲染的时候,颜色数组值会被映射到输出颜色空间。默认为 nil, 是可动画属性。
public var locations: [ NSNumber ]?
startPoint和endPoint属性,它们决定了渐变的方向。startPoint就是第一个渐变点,endPoint就是最后一个渐变点。这两个参数是以单位坐标系进行的定义,当进行绘制内容的时候会映射到layer的矩形区域,左上角坐标是[0,0],右下角坐标是[1,1]。默认值是[.5,0]和[.5,1],都是可动画属性。
public
var
startPoint:
CGPoint
public var endPoint: CGPoint
public var endPoint: CGPoint
默认值是
kCAGradientLayerAxial
,表示按像素均匀变化。除了默认值也无其它选项。
public var type: String
}
public var type: String
}
实际使用:
1:简单使用
CAGradientLayer
//TODO:
基本渐变效果
func basicGradient(){
let gradientLayer: CAGradientLayer = CAGradientLayer ()
gradientLayer. frame = CGRect (x: 20 , y: 100 , width: 280 , height: 200 )
func basicGradient(){
let gradientLayer: CAGradientLayer = CAGradientLayer ()
gradientLayer. frame = CGRect (x: 20 , y: 100 , width: 280 , height: 200 )
//设置渐变的起始点和结束点,可看图一效果
gradientLayer.
startPoint
=
CGPoint
(x:
0.0
, y:
0.5
)
gradientLayer. endPoint = CGPoint (x: 1.0 , y: 0.5 )
// 添加颜色
let colors = [
UIColor . blackColor (). CGColor ,
UIColor . whiteColor (). CGColor ,
UIColor . blackColor (). CGColor
]
gradientLayer. colors = colors
gradientLayer. endPoint = CGPoint (x: 1.0 , y: 0.5 )
// 添加颜色
let colors = [
UIColor . blackColor (). CGColor ,
UIColor . whiteColor (). CGColor ,
UIColor . blackColor (). CGColor
]
gradientLayer. colors = colors
//设置渲染位置,可看图二
let
locations = [
0.25 ,
0.5 ,
0.75
]
gradientLayer. locations = locations
view . layer . addSublayer (gradientLayer)
0.25 ,
0.5 ,
0.75
]
gradientLayer. locations = locations
view . layer . addSublayer (gradientLayer)
}
部分效果图:
图一:设置起点和结束点
图二:设置渲染颜色的位置
图三:最终实现效果图
2:开机效果渐变效果实现
//
自定义类实现开机文字渐变效果
class AnimatedMaskLabel: UIView {
let gradientLayer: CAGradientLayer = {
class AnimatedMaskLabel: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
// Configure the gradient here
gradientLayer. startPoint = CGPoint (x: 0.0 , y: 0.5 )
gradientLayer. endPoint = CGPoint (x: 1.0 , y: 0.5 )
// 设置对应显示颜色数组
gradientLayer. startPoint = CGPoint (x: 0.0 , y: 0.5 )
gradientLayer. endPoint = CGPoint (x: 1.0 , y: 0.5 )
// 设置对应显示颜色数组
let
colors = [
UIColor
.
yellowColor
().
CGColor
,
UIColor . greenColor (). CGColor ,
UIColor . orangeColor (). CGColor ,
UIColor . cyanColor (). CGColor ,
UIColor . redColor (). CGColor ,
UIColor . yellowColor (). CGColor
UIColor . greenColor (). CGColor ,
UIColor . orangeColor (). CGColor ,
UIColor . cyanColor (). CGColor ,
UIColor . redColor (). CGColor ,
UIColor . yellowColor (). CGColor
]
//
设置对应颜色显示的位置
.
可以设置多个点
,
根据需要操作
!
let
locations = [
0.25
,
0.5 ,
0.75
0.5 ,
0.75
]
gradientLayer.
colors
= colors
gradientLayer. locations = locations
return gradientLayer
}()
// 设置文本属性 {} 其实就是一个函数,懒加载
let textAtteibutes: [ String : AnyObject ] = {
let style = NSMutableParagraphStyle ()
gradientLayer. locations = locations
return gradientLayer
}()
// 设置文本属性 {} 其实就是一个函数,懒加载
let textAtteibutes: [ String : AnyObject ] = {
let style = NSMutableParagraphStyle ()
style.alignment = .Center
return
[
NSFontAttributeName
:
UIFont
(name:
"HelveticaNeue-Thin"
,
size: 28.0 )!, NSParagraphStyleAttributeName : style]
}()
size: 28.0 )!, NSParagraphStyleAttributeName : style]
}()
@IBInspectable
var text: String! {
didSet {
setNeedsDisplay()
//创建一个临时的绘图文本,用于渲染文本内容为对应的图片.
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
//绘制文本内容,并获得对应文字图片
text.drawInRect(bounds , withAttributes: textAtteibutes)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//创建一个 layer 显示绘制的图片
let maskLayer = CALayer()
maskLayer.backgroundColor = UIColor.clearColor().CGColor
maskLayer.frame = CGRectOffset(bounds, bounds.size.width, 0)
maskLayer.contents = image.CGImage
//显示在渐变 layer 上,作为掩膜,及覆盖物会盖住layer的内容,无背景颜色。
gradientLayer.mask = maskLayer
}
}
overridefunc layoutSubviews() {
layer.borderColor = UIColor.greenColor().CGColor
gradientLayer.frame = CGRect(x: -bounds.size.width, y: bounds.origin.y, width: 3 * bounds.size.width, height: bounds.size.height)
}
overridefunc didMoveToWindow() {
super.didMoveToWindow()
layer.addSublayer(gradientLayer)
//添加位置动画 locations是可动画属性
let gradientAniamtion = CABasicAnimation(keyPath: "locations")
//设置颜色显示的对应位置,一一对应
gradientAniamtion.fromValue = [0.0,0.0,0.0,0.0,0.0,0.25]
gradientAniamtion.toValue = [0.65, 0.8, 0.85, 0.9, 0.95 ,1.0]
gradientAniamtion.duration = 3.0
//无限执行
gradientAniamtion.repeatCount = Float.infinity
gradientLayer.addAnimation(gradientAniamtion, forKey: nil)
didSet {
setNeedsDisplay()
//创建一个临时的绘图文本,用于渲染文本内容为对应的图片.
UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
//绘制文本内容,并获得对应文字图片
text.drawInRect(bounds , withAttributes: textAtteibutes)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//创建一个 layer 显示绘制的图片
let maskLayer = CALayer()
maskLayer.backgroundColor = UIColor.clearColor().CGColor
maskLayer.frame = CGRectOffset(bounds, bounds.size.width, 0)
maskLayer.contents = image.CGImage
//显示在渐变 layer 上,作为掩膜,及覆盖物会盖住layer的内容,无背景颜色。
gradientLayer.mask = maskLayer
}
}
overridefunc layoutSubviews() {
layer.borderColor = UIColor.greenColor().CGColor
gradientLayer.frame = CGRect(x: -bounds.size.width, y: bounds.origin.y, width: 3 * bounds.size.width, height: bounds.size.height)
}
overridefunc didMoveToWindow() {
super.didMoveToWindow()
layer.addSublayer(gradientLayer)
//添加位置动画 locations是可动画属性
let gradientAniamtion = CABasicAnimation(keyPath: "locations")
//设置颜色显示的对应位置,一一对应
gradientAniamtion.fromValue = [0.0,0.0,0.0,0.0,0.0,0.25]
gradientAniamtion.toValue = [0.65, 0.8, 0.85, 0.9, 0.95 ,1.0]
gradientAniamtion.duration = 3.0
//无限执行
gradientAniamtion.repeatCount = Float.infinity
gradientLayer.addAnimation(gradientAniamtion, forKey: nil)
}
}
效果图如下:
相关推荐: