Core Animation学习笔记（一）- CALayer

本文是我阅读书籍《iOS CORE ANIMATION ADVANCED TECHNIQUES》的读书笔记，感谢原书作者及译者的分享！
推荐大家有时间可以读读英文版原书，虽然年代比较久远了，但是还是能有不少收获。英文不好的同学可以看中文版

一、Core Animation定义

什么是Core Animation，相信很多同学对于它既熟悉又陌生，从名字上来看它应该是一个做动画的框架，其实动画只是它的一部分，它曾经叫做Layer Kit。

引用书中的定义：

Core Animation是一个复合引擎，它的职责就是尽可能快地组合屏幕上不同的可视内容，这个内容是被分解成独立的Layer，并存储在Layer Tree中。于是这个树形成了UIKit以及在iOS应用程序当中你所能在屏幕上看见的一切的基础。

看完还是一脸懵逼？没关系，在这一系列文章中，我将抽丝剥茧，带领大家揭开Core Animation的神秘面纱。

二、UIView与CALayer

我们平时开发中，接触最多的就是UIView，UIView可以处理触摸事件，可以支持基于Core Graphics绘图，可以做仿射变换（例如旋转或者缩放），或者简单的类似于滑动或者渐变的动画。

每个UIView都包含一个CALayer实例，也就是所谓的backing layer。CALayer与UIView最大的区别是它不处理用户的交互，它的职责是负责屏幕上的显示和动画。UIView负责处理用户交互，并管理CALayer。

UIView其实就是对CALayer的高级封装，为什么苹果不直接用一个简单层级来处理所有事情？原因在于要做职责分离，这样也能避免很多重复代码。在iOS和Mac OS两个平台上，事件和用户交互有很多地方的不同，基于多点触控的用户界面和基于鼠标键盘有着本质的区别，这就是为什么iOS有UIKit和UIView，但是Mac OS有AppKit和NSView的原因。他们功能上很相似，但是在实现上有着显著的区别。

CALayer独有功能

有一些UIView没有暴露出来的CALayer的功能：

• 阴影，圆角，带颜色的边框
• 3D变换
• 非矩形范围
• 透明遮罩
• 多级非线性动画

三、backing image

backing image是CALayer的重要部分，通过它可以实现各种复杂的UI。有两种设置backing image的方法:

1. 设置CALayer的contents属性
2. 直接用Core Graphics绘制

contents

CALayer有一个属性叫做contents，这个属性的类型被定义为id，但是，如果你给contents赋的不是CGImage，那么你得到的图层将是空白的。

contents这个奇怪的表现是由Mac OS的历史原因造成的。它之所以被定义为id类型，是因为在Mac OS系统上，这个属性对CGImage和NSImage类型的值都起作用。如果你试图在iOS平台上将UIImage的值赋给它，只能得到一个空白的图层。一些初识Core Animation的iOS开发者可能会对这个感到困惑。

我们先来看一个Demo，在CALayer中加载了一张图片：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor lightGrayColor];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    view.backgroundColor = [UIColor whiteColor];
    view.center = self.view.center;
    [self.view addSubview:view];
    CALayer *layer = [CALayer layer];
    [view.layer addSublayer:layer];
    layer.frame = CGRectMake(0, 0, 100, 100);
    
    // [UIImage imageNamed:@"test"]会根据不同机型取不同倍图
    UIImage *image = [UIImage imageNamed:@"test"];
    // UIImage转CGImageRef时scale属性丢失
    CGImageRef imageRef = image.CGImage;
    layer.contents = (__bridge id)imageRef;
    // 设置图片缩放
    // 如果contentsGravity设置为自动缩放，可以不用设置这个属性
    layer.contentsScale = image.scale;
    // 设置图片居中不缩放
    layer.contentsGravity = kCAGravityCenter;
}

contentsGravity

UIImageView中通过设置contentMode来设置图片拉伸方式，在CALayer中有一个对应属性contentsGravity，它是一个NSString类型，默认值是kCAGravityResize。
它的可选的值有：

• kCAGravityCenter
• kCAGravityTop
• kCAGravityBottom
• kCAGravityLeft
• kCAGravityRight
• kCAGravityTopLeft
• kCAGravityTopRight
• kCAGravityBottomLeft
• kCAGravityBottomRight
• kCAGravityResize
• kCAGravityResizeAspect
• kCAGravityResizeAspectFill

UIImage转CGImage拉伸丢失问题

和UIImage不同，CGImage没有拉伸的概念。使用UIImage类去读取图片的时候，它会读取了屏幕（1x、2x、3x）对应尺寸的图片。但是用CGImage来设置layer.contents时，拉伸这个因素在转换的时候就丢失了，不过我们可以通过手动设置contentsScale来修复这个问题。

contentsScale

如果contentsScale设置为1.0，将会以每个点1个像素绘制图片，如果设置为2.0，则会以每个点2个像素绘制图片。UIView中对应contentScaleFactor属性。

contentsCenter

contentsCenter是一个CGRect，它定义了一个固定的边框和一个在图层上可拉伸的区域。类似于UIImage里的resizableImageWithCapInsets 方法，只是它可以运用到任何backing image，甚至包括Core Graphics绘制的图形。

15436482245238.jpg

Custom Drawing

第二种方案是直接用Core Graphics绘制backing image，具体实现方式是通过继承UIView并实现drawRect来自定义绘制。

CALayerDelegate

要理解drawRect的工作原理，首先我们来看看CALayerDelegate。
CALayer有一个可选的delegate，通过实现CALayerDelegate，就可以自定义CALayer的backing image。
CALayerDelegate中有两个值得关注的方法：

// 由-display方法的默认实现调用，你应该实现整个显示过程（通常通过设置'contents'属性）
// 如果实现了该方法，就不会调用drawLayer:inContext:了
- (void)displayLayer:(CALayer *)layer;

// 由-drawInContext方法的默认实现调用
// 如果没有实现displayLayer:，就会调用该方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;

给个简单的Demo：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor lightGrayColor];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    view.backgroundColor = [UIColor whiteColor];
    view.center = self.view.center;
    [self.view addSubview:view];
    
    CALayer *layer = [CALayer layer];
    [view.layer addSublayer:layer];
    layer.frame = CGRectMake(0, 0, 100, 100);
    // 设置代理
    layer.delegate = self;
    // display方法必须手动调用，不然不会执行绘制
    [layer display]; 
}

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    // 画一个圆环
    CGContextSetLineWidth(ctx, 10);
    CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
    CGContextStrokeEllipseInRect(ctx, layer.bounds);
}

需要注意的是，[layer display]需要手动调用，CALayer不会自动重绘它的内容，而是把重绘决定权交给了开发者。

drawRect

理解了CALayerDelegate再来看drawRect就简单很多了，UIView把CALayerDelegate设置为自己，并实现了displayLayer:，我们不再需要关心这些细节，只需要重写drawRect，在方法内绘制backing image即可。

drawRect调用时机

当UIView在屏幕上出现的时候，drawRect方法就会被自动调用。然后内容就会被缓存起来直到它需要被更新，通常是因为手动调用了setNeedsDisplay，或影响到表现效果的属性值被更改时，如bounds属性。

需要注意的是，调用setNeedsDisplay后，不会马上触发drawRect，而是要等到接收到RunLoop的kCFRunLoopBeforeWaiting通知后触发drawRect，如下图所示。

15436511549803.jpg

如非必须，勿重写drawRect

drawRect方法没有默认的实现，因为对UIView来说，backing image并不是必须的。如果UIView检测到drawRect方法被调用了，它就会为视图分配一个backing image，这个backing image的像素尺寸等于视图大小 * contentsScale；反之则不会创建backing image，因此如果没有自定义绘制的任务就不要在重写一个空的drawRect。

在做实验的时候发现了一个有趣现象，在同一个RunLoop循环里，先调用setNeedsDisplay，再设置view.layer的contents，系统就不会调用drawRect方法了(难道是因为设置contents会把needsDisplay设置为NO？？)。

小结

如果我们只是写一个简单的登录界面，其实用UIView这种高级接口就够了。但是为了实现复杂UI与丝滑体验，使用Core Animation就是一个很好的选择（缺点是门槛高点，编码复杂度要高些）。
本文要点总结如下：

1. Core Animation是一个负责处理图层、屏幕绘制、动画等的复合引擎
2. UIView是对CALayer的高级封装，每个UIView包含一个CALayer实例。
3. 在CALayer上绘制内容，需要设置它的backing image，有两种方式：
   • 设置CALayer的contents属性
   • 直接用Core Graphics绘制

博客地址，如果有帮助点个赞支持一下😁