CoreAnimation理解和使用

简介

CoreAnimation如果只从字面上来理解，就会感觉这只是用来作用动画的一个类库，其实动画只是它的一部分，最重要的是它可以快速组合屏幕上不同的可视内容，这些内容被分解成独立的图层，存储在一个图层树的体系中。所有我们能在屏幕上看到的内容都和这个有关。

图层的理解

说到CoreAnimation不能不说的就是图层，图层可以说是CoreAnimation的基础。那么图层究竟是什么？

一般对于一个iOS开发人员来说视图(UIView)应该使我们比较熟悉,基本上我们可以在屏幕上看到的都和它有关。一个视图就是我们所能看到的矩形块，并且可以管理显示他上边的子视图，处理用户的交互事件，等等。

在每个UIView创建的时候都会创建一个CALayer实例，这个实例就是我们说的图层，UIView其实就是图层+ 处理交互事件的集合，图层负责展示可见的内容，但是图层并不处理交互事件，或者说根本不知道这些交互事件，真正处理这些事件的是UIView自己本身。简单来说，UIView中的图层(layer)主要做的是如何显示内容，各种交互事件由UIView自己处理。

同UIView一样，CALayer也有层级的概念，CALayer也可以添加子图层，添加子图层后，最终显示的就是多个图层叠加后的结果。

我们平时用的比较多的是UIView提供的高级接口，这是我们开发起来更容易，但有些时候UIView并不能完全满足我们的需求，这时候直接使用图层能给我们提供更大的定制化需求。例如在一个UIView上边直接绘制一个圆。

image

同时图层也提供了其他的一些能力：

• 设置阴影、圆角、带颜色的边框
• 3D变换
• 非矩形区域设置
• 透明的遮罩
• 多级非线性动画

创建图层

我们创建一个图层可以使用：

let layer = CALayer()

图层也有很多属性可以设置，背景色、frame、bounds等等

layer.backgroundColor = UIColor.blue.cgColor //图层的背景色是CGColor类型
layer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.position = CGPoint(x: 50, y: 50) // 在UIView中叫做 center
layer.isHidden = false

需要显示layer的时候可以将一个 layer添加到另一个layer上：

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.layer.addSublayer(layer)

CALayer的寄宿图

我们之间通过设置背景色可以将图层的底色设置为各种颜色，但是图层所能做的远远不止如此。

CALayer有一个contents属性，我们可以通过给contents属性赋值一个CGImage类型，来显示一张图片，虽然contents可以接受的类型是 Any，但是如果我们所赋的值不是一个CGImage类型，那么图层将显示一片空白。

image

image

设置了之后，我们发现这个图片好像被拉伸了，我们可以通过设置contentGravity来避免拉伸，这个属性对应UIView里边的contentMode, contentGravity是一个String类型，主要有这些可选：

• kCAGravityCenter //居中显示
• kCAGravityTop //从顶部开始显示
• kCAGravityBottom //从底部开始显示
• kCAGravityLeft //从左边开始显示
• kCAGravityRight //从右边开始显示
• kCAGravityTopLeft //从左上角开始显示
• kCAGravityTopRight //从右上角开始显示
• kCAGravityBottomLeft //从左下角开始显示
• kCAGravityBottomRight //从右下角开始显示
• kCAGravityResize //拉伸
• kCAGravityResizeAspect//按比例缩放
• kCAGravityResizeAspectFill//按比例填充

我们通过设置kCAGravityResizeAspect来让图片按比例缩小显示

image

CALayer有一个contentsScale属性表示的是我们屏幕的一个坐标点应该绘制几个像素，这个跟苹果的Retina屏幕有关。我们调整contentsGravity为kCAGravityCenter，也就是图片居中显示，不进行任何的拉伸和缩放。

image

我们可以看到图片变多了，并且可以看到一些像素颗粒，图片没有那么细腻了。我们可以通过设置contentsScale为屏幕的 scale来避免这样的显示。

layer.contentsScale = UIScreen.mian.scale

image

这样看起来是不是显示的细腻多了。

如果你仔细观察就会发现，我们layer本身的大小只有200 * 200,但实际的显示好像不止200 * 200了，为什么超过了边界还会显示，这个跟CALayer的另一个属性maskToBounds有关，这个属性默认是false，也就是当内容超过边界的时候不会裁剪，依然会绘制出来，我们把他设置为 true 来看下效果

image

contentsRect属性可以用来设置图层要显示寄宿图的哪部分区域,我们设置

layer.contentsRect = CGRect(x: 0, y: 0, width: 0.5, height: 0.5)

显示出来就是这个样子的：

image

这里的 CGRect 的每个属性的范围都是0 ~ 1，是一个单位坐标，这里我们设置的值就是取的图片的左上角的 1 / 4 。

还有一个比较重要的 contentsCenter 属性，表示当layer大小改变的时候，寄宿图可被拉伸的区域，默认的值是 CGRect(x: 0, y:0 ,width: 1, height: 1)。

自定义绘图

我们一般在UIView上绘图的时候可以继承UIView并重写draw(_ rect: CGRect)方法，在这个方法里边取的上下文进行自定义的绘制。如果重写了这个方法，UIView 就会创建一个寄宿图，大小是 UIView的 width * height * 屏幕scale，如果是在比较大的区域绘制，不建议用这种方式，这种方式会造成内存暴涨。可以通过专用图层来解决这个问题，后边会说道这个问题。

也可以直接通过CALayer的代理方法来绘制，当为layer设置了代理对象后，需要显示的时候，layer会先调用代理方法display(_ layer: CALayer)，来请求代理对象给他设置一个寄宿图。我们可以在这个代理方法里边设置layer的contents，如果代理不实现display(_ layer: CALayer)方法，那么layer会先创建一个空的寄宿图，然后调用draw(_ layer: CALayer, in ctx: CGContext)传入创建的上下文进行绘制。

当我们需要重绘一个layer的时候，可以调用它的setNeedsDisplay()和displayIfNeeded()。

结语

这是CoreAnimation的第一篇章，后边会继续介绍动画和绘图优化。