Core Animation学习笔记（一）- CALayer-六虎

书籍《iOS CORE ANIMATION ADVANCED TECHNIQUES》的读书笔记

一、Core Animation界说

什么是Core Animation，相信许多同学关于它既了解又陌生，从姓名上来看它应该是一个做动画的结构，其实动画仅仅它的一部分，它曾经叫做Layer Kit。

引用书中的界说：

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

二、UIView 与 CALayer

咱们平时开发中，触摸最多的便是UIView，UIView能够处理触摸事情，能够支持依据Core Graphics绘图，能够做仿射改换（例如旋转或者缩放），或者简略的类似于滑动或者突变的动画。

CALayer则是更底层的东西，UIView其实便是对CALayer的高档封装。每个UIView都包含一个CALayer实例，也便是所谓的backing layer。CALayer与UIView最大的差异是它不处理用户的交互，它的责任是负责屏幕上的显示和动画。UIView负责处理用户交互，并办理CALayer。

还有一个很重要的点，直接运用CALayer不能用主动布局，需求自己核算布局。所以一般咱们不会直接运用CALayer。除非一些比较特别的需求：

写跨平台的代码，同时兼容 iPhone 和 Mac
直接运用CALayer的子类，完成特别图层的展示
关于功用要求很高

为什么苹果不直接用一个简略层级来处理一切事情？
原因在于要做责任别离，这样也能防止许多重复代码。在iOS和Mac OS两个平台上，事情和用户交互有许多地方的不同，依据多点触控的用户界面和依据鼠标键盘有着实质的差异，这便是为什么iOS有UIKit和UIView，但是Mac OS有AppKit和NSView的原因。他们功用上很相似，但是在完成上有着明显的差异。

CALayer独有功用

苹果官方为咱们封装好了UIView，简略易用却抛弃了灵活性，不免会有UIView满足不了的需求，这是就需求咱们直接运用CALayer了。有一些UIView没有露出出来的CALayer的功用：

暗影，圆角，带色彩的边框
3D改换
非矩形范围
透明遮罩
多级非线性动画

三、backing image

backing image是CALayer的重要部分，经过它能够完成各种复杂的UI。有两种设置backing image的办法:

设置CALayer的contents特点
直接用Core Graphics制作

3.1、contents

CALayer有一个特点叫做contents，这个特点的类型被界说为id，但是，假如你给contents赋的不是CGImage，那么你得到的图层将是空白的。

contents这个奇怪的体现是由 Mac OS 的前史原因形成的。它之所以被界说为 id 类型，是因为在 Mac OS 系统上，这个特点对 CGImage 和 NSImage 类型的值都起作用。假如你企图在iOS平台上将 UIImage 的值赋给它，只能得到一个空白的图层。

咱们先来看一个 Demo，如何用UIView而不是UIImageView加载了一张图片。


- (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);
 
  // imageNamed: 会依据不同机型取不同倍图
  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;
}

3.1.1、contentsGravity

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

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

3.1.2、UIImage转CGImage拉伸丢掉问题

和UIImage不同，CGImage没有拉伸的概念。运用UIImage类去读取图片的时分，它会读取了屏幕（1x、2x、3x）对应尺度的图片。但是用CGImage来设置layer.contents时，拉伸这个要素在转化的时分就丢掉了，不过咱们能够经过手动设置contentsScale来修正这个问题。

3.1.3、contentsScale

contentsScale界说了像素点与 view 的尺度的比例，假如contentsScale设置为1.0，将会以每个点1个像素制作图片，假如设置为2.0，则会以每个点2个像素制作图片。它的默许值是1.0。UIView中对应contentScaleFactor特点。

3.1.4、masksToBounds

当图片内容超出UIView尺度时，经过设置clipsToBounds能够界说是否裁剪内容，CALayer对应的特点便是masksToBounds。

3.1.5、contentsCenter

contentsCenter是一个CGRect，它界说了一个固定的边框和一个在图层上可拉伸的区域。类似于UIImage里的resizableImageWithCapInsets办法，仅仅它能够运用到任何backing image，甚至包括Core Graphics制作的图形。

4.1、Custom Drawing

第二种方案是直接用Core Graphics制作backing image，具体完成方式是经过承继UIView并完成drawRect来自界说制作。

4.1.1、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不会主动重绘它的内容，而是把重绘决定权交给了开发者。

4.1.2、drawRect

理解了CALayerDelegate再来看drawRect就简略许多了，UIView把CALayerDelegate设置为自己，并完成了displayLayer:，咱们不再需求关怀这些细节，只需求重写drawRect，在办法内制作backing image即可。

drawRect调用机遇

当UIView在屏幕上出现的时分，drawRect办法就会被主动调用。然后内容就会被缓存起来直到它需求被更新，一般是因为手动调用了setNeedsDisplay，或影响到体现效果的特点值被更改时，如 bounds 特点。

需求留意的是，调用setNeedsDisplay后，不会马上触发drawRect，而是要等到接收到RunLoop的kCFRunLoopBeforeWaiting告诉后触发drawRect

如非有必要，勿重写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便是一个很好的选择（缺陷是门槛高点，编码复杂度要高些）。
本文关键总结如下：

Core Animation是一个负责处理图层、屏幕制作、动画等的复合引擎
UIView是对CALayer的高档封装，每个UIView包含一个CALayer实例。
设置CALayer的backing image有两种方式：
- 直接设置contents特点
- 完成drawRect办法，用Core Graphics制作

Core Animation学习笔记（一）- CALayer