iOS 动画Animation-4-2: CALayer子类：CAGradientLayer，CATextLayer，CATiledLayer

首先说明：这是一系列文章，参考本专题下其他的文章有助于你对本文的理解。

在上一篇中对CALayer做了一个简单的介绍。CALayer的属性在这些子类身上也都有。如果对CALayer属性还不够了解，可以参照上一篇。

今天先介绍CALayer这三个子类，这三个子类使用的概率不高，不过可以了解一下，万一用到了呢。在每介绍一个类，我都会在后面附上我写的Demo来方便大家学习，Demo写的都比较简单，力求每一个能从 iOS 动画Animation-1看到这儿的人都可以看的懂

1、CAGradientLayer

CAGradientLayer简化了混合两种或更多颜色的工作，尤其适用于背景。要配置渐变色，你需要分配一个CGColor数组，以及标识渐变图层起止点的startPoint和endPoint。

注意：startPoint和endPoint并不是明确的点，而是用单位坐标空间定义，在绘制时映射到图层边界。也就是说x值为1表示点在图层右边缘，y值为1表示点在图层下边缘。

CAGradientLayer包含type属性，虽说该属性只有kCAGradientLayerAxial一个选择，由数组中的各颜色产生线性过渡渐变。

先上图：



在上代码：

let gradientLayer = CAGradientLayer()

gradientLayer.frame = someView.bounds

gradientLayer.colors = [cgColorForRed(209.0, green: 0.0, blue: 0.0),

cgColorForRed(255.0, green: 102.0, blue: 34.0),

cgColorForRed(255.0, green: 218.0, blue: 33.0),

cgColorForRed(51.0, green: 221.0, blue: 0.0),

cgColorForRed(17.0, green: 51.0, blue: 204.0),

cgColorForRed(34.0, green: 0.0, blue: 102.0),

cgColorForRed(51.0, green: 0.0, blue: 68.0)]

gradientLayer.startPoint = CGPoint(x: 0, y: 0)

gradientLayer.endPoint = CGPoint(x: 0, y: 1)

someView.layer.addSublayer(gradientLayer)

func cgColorForRed(red: CGFloat, green: CGFloat, blue: CGFloat) -> AnyObject {

return UIColor(red: red/255.0, green: green/255.0, blue: blue/255.0, alpha: 1.0).CGColor as AnyObject

}

这个比较简单，就不做过多解释了。

2、CATextLayer

CATextLayer能够对普通文本或属性字串进行简单快速的渲染。与UILabel不同，CATextLayer无法指定UIFont，只能使用CTFontRef或CGFontRef。

像下面这样的代码完全可以掌控文本的字体、字体大小、颜色、对齐、折行（wrap）和截断（truncation）规则，也有动画效果。

不仅是CATextLayer，所有图层类的渲染缩放系数都默认为1。在添加到视图时，图层自身的contentsScale缩放系数会自动调整，适应当前画面。你需要为手动创建的图层明确指定contentsScale属性，否则默认的缩放系数1会在Retina显示屏上产生部分模糊。

如果创建的文本图层添加到了方形的someView，效果会像这样：



你可以设置截断（Truncation）属性，生效时被截断的部分文本会由省略号代替显示。默认设定为无截断，位置可设为开头、末尾或中间截断：!



上代码：

// 1

let textLayer = CATextLayer()

textLayer.frame = someView.bounds

// 2

var string = ""

for _ in 1...20 {

string += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor arcu quis velit congue dictum. "

}

textLayer.string = string

// 3

let fontName: CFStringRef = "Noteworthy-Light"

textLayer.font = CTFontCreateWithName(fontName, fontSize, nil)

// 4

textLayer.foregroundColor = UIColor.darkGrayColor().CGColor

textLayer.wrapped = true

textLayer.alignmentMode = kCAAlignmentLeft

textLayer.contentsScale = UIScreen.mainScreen().scale

someView.layer.addSublayer(textLayer)

以上代码解释如下：

创建一个CATextLayer实例，令边界与someView相同。

重复一段文本，创建字符串并赋给文本图层。

创建一个字体，赋给文本图层。

将文本图层设为折行、左对齐，你也可以设自然对齐（natural）、右对齐（right）、居中对齐（center）或两端对齐（justified），按屏幕设置contentsScale属性，然后把图层添加到视图结构树。

3、CATiledLayer

CATiledLayer以图块（tile）为单位异步绘制图层内容，对超大尺寸图片或者只能在视图中显示一小部分的内容效果拔群，因为不用把内容完全载入内存就可以看到内容。

代码绘制6×6随机色块方格，最终效果如下：



上代码：

// In ViewController.swift

import UIKit

class ViewController: UIViewController {

// 1

@IBOutlet weak var tiledBackgroundView: TiledBackgroundView!

}

// In TiledBackgroundView.swift

import UIKit

class TiledBackgroundView: UIView {

let sideLength = CGFloat(50.0)

// 2

override class func layerClass() -> AnyClass {

return CATiledLayer.self

}

// 3

required init(coder aDecoder: NSCoder) {

super.init(coder: aDecoder)

srand48(Int(NSDate().timeIntervalSince1970))

let layer = self.layer as CATiledLayer

let scale = UIScreen.mainScreen().scale

layer.contentsScale = scale

layer.tileSize = CGSize(width: sideLength * scale, height: sideLength * scale)

}

// 4

override func drawRect(rect: CGRect) {

let context = UIGraphicsGetCurrentContext()

var red = CGFloat(drand48())

var green = CGFloat(drand48())

var blue = CGFloat(drand48())

CGContextSetRGBFillColor(context, red, green, blue, 1.0)

CGContextFillRect(context, rect)

}

}

代码解释：

tiledBackgroundView位于 (150, 150) ，宽高均为300。

重写layerClass()，令该视图创建的图层实例为CATiledLayer。

设置rand48()的随机数种子，用于在drawRect()中生成随机颜色。CATiledLayer类型转换，缩放图层内容，设置图块尺寸，适应屏幕。

重写drawRect()，以随机色块填充视图。

今天到此为止，下一篇介绍CAReplicatorLayer（可以制作菊花）

依旧先上图：