本文转载自：http://www.cocoachina.com/ios/20150105/10827.html  为了防止cocochina以后删除该文章，故转载至此；

CATiledLayer

有些时候你可能需要绘制一个很大的图片，常见的例子就是一个高像素的照片或者是地球表面的详细地图。iOS应用通畅运行在内存受限的设备上，所以读取整个图片到内存中是不明智的。载入大图可能会相当地慢，那些对你看上去比较方便的做法（在主线程调用UIImage的-imageNamed:方法或者-imageWithContentsOfFile:方法）将会阻塞你的用户界面，至少会引起动画卡顿现象。

能高效绘制在iOS上的图片也有一个大小限制。所有显示在屏幕上的图片最终都会被转化为OpenGL纹理，同时OpenGL有一个最大的纹理尺寸（通常是2048*2048，或4096*4096，这个取决于设备型号）。如果你想在单个纹理中显示一个比这大的图，即便图片已经存在于内存中了，你仍然会遇到很大的性能问题，因为Core Animation强制用CPU处理图片而不是更快的GPU（见第12章『速度的曲调』，和第13章『高效绘图』，它更加详细地解释了软件绘制和硬件绘制）。

CATiledLayer为载入大图造成的性能问题提供了一个解决方案：将大图分解成小片然后将他们单独按需载入。让我们用实验来证明一下。

小片裁剪

这个示例中，我们将会从一个2048*2048分辨率的雪人图片入手。为了能够从CATiledLayer中获益，我们需要把这个图片裁切成许多小一些的图片。你可以通过代码来完成这件事情，但是如果你在运行时读入整个图片并裁切，那CATiledLayer这些所有的性能优点就损失殆尽了。理想情况下来说，最好能够逐个步骤来实现。

清单6.11 演示了一个简单的Mac OS命令行程序，它用CATiledLayer将一个图片裁剪成小图并存储到不同的文件中。

清单6.11 裁剪图片成小图的终端程序

#import int main(int argc, const char * argv[]){

@autoreleasepool{

//handle incorrect arguments

if (argc < 2) {

NSLog(@"TileCutter arguments: inputfile");

return 0;

}

//input file

NSString *inputFile = [NSString stringWithCString:argv[1] encoding:NSUTF8StringEncoding];

//tile size

CGFloat tileSize = 256; //output path

NSString *outputPath = [inputFile stringByDeletingPathExtension];

//load image

NSImage *image = [[NSImage alloc] initWithContentsOfFile:inputFile];

NSSize size = [image size];

NSArray *representations = [image representations];

if ([representations count]){

NSBitmapImageRep *representation = representations[0];

size.width = [representation pixelsWide];

size.height = [representation pixelsHigh];

}

NSRect rect = NSMakeRect(0.0, 0.0, size.width, size.height);

CGImageRef imageRef = [image CGImageForProposedRect:&rect context:NULL hints:nil];

//calculate rows and columns

NSInteger rows = ceil(size.height / tileSize);

NSInteger cols = ceil(size.width / tileSize);

//generate tiles

for (int y = 0; y < rows; ++y) {

for (int x = 0; x < cols; ++x) {

//extract tile image

CGRect tileRect = CGRectMake(x*tileSize, y*tileSize, tileSize, tileSize);

CGImageRef tileImage = CGImageCreateWithImageInRect(imageRef, tileRect);

//convert to jpeg data

NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:tileImage];

NSData *data = [imageRep representationUsingType: NSJPEGFileType properties:nil];

CGImageRelease(tileImage);

//save file

NSString *path = [outputPath stringByAppendingFormat: @"_i_i.jpg", x, y];

[data writeToFile:path atomically:NO];

}

}

}

return 0;

}

这个程序将2048*2048分辨率的雪人图案裁剪成了64个不同的256*256的小图。（256*256是CATiledLayer的默认小图大小，默认大小可以通过tileSize属性更改）。程序接受一个图片路径作为命令行的第一个参数。我们可以在编译的scheme将路径参数硬编码然后就可以在Xcode中运行了，但是以后作用在另一个图片上就不方便了。所以，我们编译了这个程序并把它保存到敏感的地方，然后从终端调用，如下面所示：

> path/to/TileCutterApp path/to/Snowman.jpg

The app is very basic, but could easily be extended to support additional arguments such as tile size, or to export images in formats other than JPEG. The result of running it is a sequence of 64 new images, named as follows:

这个程序相当基础，但是能够轻易地扩展支持额外的参数比如小图大小，或者导出格式等等。运行结果是64个新图的序列，如下面命名：

Snowman_00_00.jpg

Snowman_00_01.jpg

Snowman_00_02.jpg

...

Snowman_07_07.jpg

既然我们有了裁切后的小图，我们就要让iOS程序用到他们。CATiledLayer很好地和UIScrollView集成在一起。除了设置图层和滑动视图边界以适配整个图片大小，我们真正要做的就是实现-drawLayer:inContext:方法，当需要载入新的小图时，CATiledLayer就会调用到这个方法。

清单6.12演示了代码。图6.12是代码运行结果。

清单6.12 一个简单的滚动CATiledLayer实现

#import "ViewController.h"

#import @interface ViewController ()

@property (nonatomic, weak) IBOutlet UIScrollView *scrollView;

@end

@implementation ViewController

- (void)viewDidLoad{

[super viewDidLoad];

//add the tiled layer

CATiledLayer *tileLayer = [CATiledLayer layer];?

tileLayer.frame = CGRectMake(0, 0, 2048, 2048);

tileLayer.delegate = self; [self.scrollView.layer addSublayer:tileLayer];

//configure the scroll view

self.scrollView.contentSize = tileLayer.frame.size;

//draw layer

[tileLayer setNeedsDisplay];

}

- (void)drawLayer:(CATiledLayer *)layer inContext:(CGContextRef)ctx{

//determine tile coordinate

CGRect bounds = CGContextGetClipBoundingBox(ctx);

NSInteger x = floor(bounds.origin.x / layer.tileSize.width);

NSInteger y = floor(bounds.origin.y / layer.tileSize.height);

//load tile image

NSString *imageName = [NSString stringWithFormat: @"Snowman_i_i, x, y];

NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];

UIImage *tileImage = [UIImage imageWithContentsOfFile:imagePath];

//draw tile

UIGraphicsPushContext(ctx);

[tileImage drawInRect:bounds];

UIGraphicsPopContext();

}

@end

图6.12 用UIScrollView滚动CATiledLayer

当你滑动这个图片，你会发现当CATiledLayer载入小图的时候，他们会淡入到界面中。这是CATiledLayer的默认行为。（你可能已经在iOS 6之前的苹果地图程序中见过这个效果）你可以用fadeDuration属性改变淡入时长或直接禁用掉。CATiledLayer（不同于大部分的UIKit和Core Animation方法）支持多线程绘制，-drawLayer:inContext:方法可以在多个线程中同时地并发调用，所以请小心谨慎地确保你在这个方法中实现的绘制代码是线程安全的。

Retina小图

你也许已经注意到了这些小图并不是以Retina的分辨率显示的。为了以屏幕的原生分辨率来渲染CATiledLayer，我们需要设置图层的contentsScale来匹配UIScreen的scale属性：

tileLayer.contentsScale = [UIScreen mainScreen].scale;

有趣的是，tileSize是以像素为单位，而不是点，所以增大了contentsScale就自动有了默认的小图尺寸（现在它是128*128的点而不是256*256）.所以，我们不需要手工更新小图的尺寸或是在Retina分辨率下指定一个不同的小图。我们需要做的是适应小图渲染代码以对应安排scale的变化，然而：

//determine tile coordinate

CGRect bounds = CGContextGetClipBoundingBox(ctx);

CGFloat scale = [UIScreen mainScreen].scale;

NSInteger x = floor(bounds.origin.x / layer.tileSize.width * scale);

NSInteger y = floor(bounds.origin.y / layer.tileSize.height * scale);

通过这个方法纠正scale也意味着我们的雪人图将以一半的大小渲染在Retina设备上（总尺寸是1024*1024，而不是2048*2048）。这个通常都不会影响到用CATiledLayer正常显示的图片类型（比如照片和地图，他们在设计上就是要支持放大缩小，能够在不同的缩放条件下显示），但是也需要在心里明白。

CAEmitterLayer

在iOS 5中，苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎，被用来创建实时例子动画如：烟雾，火，雨等等这些效果。

CAEmitterLayer看上去像是许多CAEmitterCell的容器，这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版，同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer：它有一个contents属性可以定义为一个CGImage，另外还有一些可设置属性控制着表现和行为。我们不会对这些属性逐一进行详细的描述，你们可以在CAEmitterCell类的头文件中找到。

我们来举个例子。我们将利用在一圆中发射不同速度和透明度的粒子创建一个火爆炸的效果。清单6.13包含了生成爆炸的代码。图6.13是运行结果

清单6.13 用CAEmitterLayer创建爆炸效果

#import "ViewController.h"

#import @interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad{

[super viewDidLoad];

//create particle emitter layer

CAEmitterLayer *emitter = [CAEmitterLayer layer];

emitter.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:emitter];

//configure emitter

emitter.renderMode = kCAEmitterLayerAdditive;

emitter.emitterPosition = CGPointMake(emitter.frame.size.width / 2.0, emitter.frame.size.height / 2.0);

//create a particle template

CAEmitterCell *cell = [[CAEmitterCell alloc] init];

cell.contents = (__bridge id)[UIImage imageNamed:@"Spark.png"].CGImage;

cell.birthRate = 150;

cell.lifetime = 5.0;

cell.color = [UIColor colorWithRed:1 green:0.5 blue:0.1 alpha:1.0].CGColor;

cell.alphaSpeed = -0.4;

cell.velocity = 50;

cell.velocityRange = 50;

cell.emissionRange = M_PI * 2.0;

//add particle template to emitter

emitter.emitterCells = @[cell];

}

@end

图6.13 火焰爆炸效果

CAEMitterCell的属性基本上可以分为三种：

这种粒子的某一属性的初始值。比如，color属性指定了一个可以混合图片内容颜色的混合色。在示例中，我们将它设置为桔色。

例子某一属性的变化范围。比如emissionRange属性的值是2π，这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值，就可以创造出一个圆锥形

指定值在时间线上的变化。比如，在示例中，我们将alphaSpeed设置为-0.4，就是说例子的透明度每过一秒就是减少0.4，这样就有发射出去之后逐渐小时的效果。

CAEmitterLayer的属性它自己控制着整个例子系统的位置和形状。一些属性比如birthRate，lifetime和celocity，这些属性在CAEmitterCell中也有。这些属性会以相乘的方式作用在一起，这样你就可以用一个值来加速或者扩大整个例子系统。其他值得提到的属性有以下这些：

preservesDepth，是否将3D例子系统平面化到一个图层（默认值）或者可以在3D空间中混合其他的图层

renderMode，控制着在视觉上粒子图片是如何混合的。你可能已经注意到了示例中我们把它设置为kCAEmitterLayerAdditive，它实现了这样一个效果：合并例子重叠部分的亮度使得看上去更亮。如果我们把它设置为默认的kCAEmitterLayerUnordered，效果就没那么好看了（见图6.14）.

图6.14 禁止混色之后的火焰粒子

CAEAGLLayer

当iOS要处理高性能图形绘制，必要时就是OpenGL。应该说它应该是最后的杀手锏，至少对于非游戏的应用来说是的。因为相比Core Animation和UIkit框架，它不可思议地复杂。

OpenGL提供了Core Animation的基础，它是底层的C接口，直接和iPhone，iPad的硬件通信，极少地抽象出来的方法。OpenGL没有对象或是图层的继承概念。它只是简单地处理三角形。OpenGL中所有东西都是3D空间中有颜色和纹理的三角形。用起来非常复杂和强大，但是用OpenGL绘制iOS用户界面就需要很多很多的工作了。

为了能够以高性能使用Core Animation，你需要判断你需要绘制哪种内容（矢量图形，例子，文本，等等），但后选择合适的图层去呈现这些内容，Core Animation中只有一些类型的内容是被高度优化的；所以如果你想绘制的东西并不能找到标准的图层类，想要得到高性能就比较费事情了。

因为OpenGL根本不会对你的内容进行假设，它能够绘制得相当快。利用OpenGL，你可以绘制任何你知道必要的集合信息和形状逻辑的内容。所以很多游戏都喜欢用OpenGL（这些情况下，Core Animation的限制就明显了：它优化过的内容类型并不一定能满足需求），但是这样依赖，方便的高度抽象接口就没了。

在iOS 5中，苹果引入了一个新的框架叫做GLKit，它去掉了一些设置OpenGL的复杂性，提供了一个叫做CLKView的UIView的子类，帮你处理大部分的设置和绘制工作。前提是各种各样的OpenGL绘图缓冲的底层可配置项仍然需要你用CAEAGLLayer完成，它是CALayer的一个子类，用来显示任意的OpenGL图形。

大部分情况下你都不需要手动设置CAEAGLLayer（假设用GLKView），过去的日子就不要再提了。特别的，我们将设置一个OpenGL ES 2.0的上下文，它是现代的iOS设备的标准做法。

尽管不需要GLKit也可以做到这一切，但是GLKit囊括了很多额外的工作，比如设置顶点和片段着色器，这些都以类C语言叫做GLSL自包含在程序中，同时在运行时载入到图形硬件中。编写GLSL代码和设置EAGLayer没有什么关系，所以我们将用GLKBaseEffect类将着色逻辑抽象出来。其他的事情，我们还是会有以往的方式。

在开始之前，你需要将GLKit和OpenGLES框架加入到你的项目中，然后就可以实现清单6.14中的代码，里面是设置一个GAEAGLLayer的最少工作，它使用了OpenGL ES 2.0 的绘图上下文，并渲染了一个有色三角（见图6.15）.

清单6.14 用CAEAGLLayer绘制一个三角形

#import "ViewController.h"

#import #import @interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *glView;

@property (nonatomic, strong) EAGLContext *glContext;

@property (nonatomic, strong) CAEAGLLayer *glLayer;

@property (nonatomic, assign) GLuint framebuffer;

@property (nonatomic, assign) GLuint colorRenderbuffer;

@property (nonatomic, assign) GLint framebufferWidth;

@property (nonatomic, assign) GLint framebufferHeight;

@property (nonatomic, strong) GLKBaseEffect *effect;

@end

@implementation ViewController

- (void)setUpBuffers{

//set up frame buffer

glGenFramebuffers(1, &_framebuffer);

glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);

//set up color render buffer

glGenRenderbuffers(1, &_colorRenderbuffer);

glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderbuffer);

glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _colorRenderbuffer);

[self.glContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.glLayer];

glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &_framebufferWidth);

glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &_framebufferHeight);

//check success

if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {

NSLog(@"Failed to make complete framebuffer object: %i", glCheckFramebufferStatus(GL_FRAMEBUFFER));

}

}

- (void)tearDownBuffers{

if (_framebuffer) {

//delete framebuffer

glDeleteFramebuffers(1, &_framebuffer);

_framebuffer = 0;

}

if (_colorRenderbuffer) {

//delete color render buffer

glDeleteRenderbuffers(1, &_colorRenderbuffer);

_colorRenderbuffer = 0;

}

}

- (void)drawFrame {

//bind framebuffer & set viewport

glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);

glViewport(0, 0, _framebufferWidth, _framebufferHeight);

//bind shader program

[self.effect prepareToDraw];

//clear the screen

glClear(GL_COLOR_BUFFER_BIT); glClearColor(0.0, 0.0, 0.0, 1.0);

//set up vertices

GLfloat vertices[] = {

-0.5f, -0.5f, -1.0f, 0.0f, 0.5f, -1.0f, 0.5f, -0.5f, -1.0f,

};

//set up colors

GLfloat colors[] = {

0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f,

};

//draw triangle

glEnableVertexAttribArray(GLKVertexAttribPosition);

glEnableVertexAttribArray(GLKVertexAttribColor);

glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);

glVertexAttribPointer(GLKVertexAttribColor,4, GL_FLOAT, GL_FALSE, 0, colors);

glDrawArrays(GL_TRIANGLES, 0, 3);

//present render buffer

glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderbuffer);

[self.glContext presentRenderbuffer:GL_RENDERBUFFER];

}

- (void)viewDidLoad{

[super viewDidLoad];

//set up context

self.glContext = [[EAGLContext alloc] initWithAPI: kEAGLRenderingAPIOpenGLES2];

[EAGLContext setCurrentContext:self.glContext];

//set up layer

self.glLayer = [CAEAGLLayer layer];

self.glLayer.frame = self.glView.bounds;

[self.glView.layer addSublayer:self.glLayer];

self.glLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@NO, kEAGLDrawablePropertyColorFormat: kEAGLColorFormatRGBA8};

//set up base effect

self.effect = [[GLKBaseEffect alloc] init];

//set up buffers

[self setUpBuffers];

//draw frame

[self drawFrame];

}

- (void)viewDidUnload

{

[self tearDownBuffers];

[super viewDidUnload];

}

- (void)dealloc{

[self tearDownBuffers];

[EAGLContext setCurrentContext:nil];

}

@end

图6.15 用OpenGL渲染的CAEAGLLayer图层

在一个真正的OpenGL应用中，我们可能会用NSTimer或CADisplayLink周期性地每秒钟调用-drawRrame方法60次，同时会将几何图形生成和绘制分开以便不会每次都重新生成三角形的顶点（这样也可以让我们绘制其他的一些东西而不是一个三角形而已），不过上面这个例子已经足够演示了绘图原则了。

AVPlayerLayer

最后一个图层类型是AVPlayerLayer。尽管它不是Core Animation框架的一部分（AV前缀看上去像），AVPlayerLayer是有别的框架（AVFoundation）提供的，它和Core Animation紧密地结合在一起，提供了一个CALayer子类来显示自定义的内容类型。

AVPlayerLayer是用来在iOS上播放视频的。他是高级接口例如MPMoivePlayer的底层实现，提供了显示视频的底层控制。AVPlayerLayer的使用相当简单：你可以用+playerLayerWithPlayer:方法创建一个已经绑定了视频播放器的图层，或者你可以先创建一个图层，然后用player属性绑定一个AVPlayer实例。

在我们开始之前，我们需要添加AVFoundation到我们的项目中。然后，清单6.15创建了一个简单的电影播放器，图6.16是代码运行结果。

清单6.15 用AVPlayerLayer播放视频

#import "ViewController.h"

#import #import @interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView; @end

@implementation ViewController

- (void)viewDidLoad{

[super viewDidLoad];

//get video URL

NSURL *URL = [[NSBundle mainBundle] URLForResource:@"Ship" withExtension:@"mp4"];

//create player and player layer

AVPlayer *player = [AVPlayer playerWithURL:URL];

AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player];

//set player layer frame and attach it to our view

playerLayer.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:playerLayer];

//play the video

[player play];

}

@end

图6.16 用AVPlayerLayer图层播放视频的截图

我们用代码创建了一个AVPlayerLayer，但是我们仍然把它添加到了一个容器视图中，而不是直接在controller中的主视图上添加。这样其实是为了可以使用自动布局限制使得图层在最中间；否则，一旦设备被旋转了我们就要手动重新放置位置，因为Core Animation并不支持自动大小和自动布局（见第三章『图层几何学』）。

当然，因为AVPlayerLayer是CALayer的子类，它继承了父类的所有特性。我们并不会受限于要在一个矩形中播放视频；清单6.16演示了在3D，圆角，有色边框，蒙板，阴影等效果（见图6.17）.

清单6.16 给视频增加变换，边框和圆角

- (void)viewDidLoad{

...

//set player layer frame and attach it to our view

playerLayer.frame = self.containerView.bounds;

[self.containerView.layer addSublayer:playerLayer];

//transform layer

CATransform3D transform = CATransform3DIdentity;

transform.m34 = -1.0 / 500.0;

transform = CATransform3DRotate(transform, M_PI_4, 1, 1, 0);

playerLayer.transform = transform;

//add rounded corners and border

playerLayer.masksToBounds = YES;

playerLayer.cornerRadius = 20.0;

playerLayer.borderColor = [UIColor redColor].CGColor;

playerLayer.borderWidth = 5.0;

//play the video

[player play];

}

图6.17 3D视角下的边框和圆角AVPlayerLayer

总结

这一章我们简要概述了一些专用图层以及用他们实现的一些效果，我们只是了解到这些图层的皮毛，像CATiledLayer和CAEMitterLayer这些类可以单独写一章的。但是，重点是记住CALayer是用处很大的，而且它并没有为所有可能的场景进行优化。为了获得Core Animation最好的性能，你需要为你的工作选对正确的工具，希望你能够挖掘这些不同的CALayer子类的功能。 这一章我们通过CAEmitterLayer和AVPlayerLayer类简单地接触到了一些动画，在第二章，我们将继续深入研究动画，就从隐式动画开始。