iOS核心动画之CALayer

CALayer简介

在iOS中几乎所有能看的见的UI控件都是继承自UIView，所有的继承自UIView的控件之所以能显示在屏幕上是因为UIView的内部的一个图层CALayer
在创建UIView对象时，UIView的内部会自动创建一个图层（即CALayer对象），通过UIView的layer这个属性可以访问到这个层
当UIView需要显示到屏幕上时，会调用drawRect方法进行绘图，并且将所有的内容绘制到自己的图层（CALayer）上，绘图完毕后，系统会将图层“拷贝”到屏幕上就完成了UIView的显示
换句话说，UIView本身不具备显示功能，是UIView内部的层CALayer具有显示功能

Tips：核心动画只作用在CALayer上

CALayer的基本使用

通过操作CALayer对象，可以很方便地调整UIView的一些外观属性
比如：

• 阴影
• 圆角大小
  • 通过layer实现图片圆角会出发离屏渲染，很消耗性能，建议通过Quartz 2D的方式对图片进行切割，实现圆角
  • iOS9之后对UIImageView加载png图片通过layer设置圆角做了优化处理。
  • 设置UIView的圆角的值不要是小数，小数会出发离屏渲染
• 边框宽度和颜色

// 阴影
grayView.layer.shadowOpacity = 1
grayView.layer.shadowColor = UIColor.red.cgColor
grayView.layer.shadowOffset = CGSize(width: 10, height: 10)

// 设置边框
grayView.layer.borderColor = UIColor.black.cgColor
grayView.layer.borderWidth = 3

// 圆角
/*
 对纯UIView操作，不需要设置超出内容剪切
 */
grayView.layer.cornerRadius = 50

// 阴影
imageView.layer.shadowOpacity = 1
imageView.layer.shadowColor = UIColor.red.cgColor
imageView.layer.shadowOffset = CGSize(width: 10, height: 10)

// 设置边框
imageView.layer.borderColor = UIColor.black.cgColor
imageView.layer.borderWidth = 3

// 圆角
/*
 对UIImageView，因为UIImage不是直接存储在CALayer上，是存储在layer中的content中（imageView.layer.contents），所以设置layer的cornerRadius对图片不起作用
 我们可以通过裁剪超过UIImageView的内容实现超过layer的内容不显示
    imageView.clipsToBounds = true
 也可以通过裁剪超过
    imageView.layer.masksToBounds = true
 */
imageView.layer.cornerRadius = 65
imageView.clipsToBounds = true

还可以给图层添加动画，来实现一些比较炫酷的效果

UIView.animate(withDuration: 0.5) {
    self.imageView.layer.transform = CATransform3DMakeRotation(.pi, 0, 0, 1)
    self.imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, .pi, 0, 0, 1)
    self.imageView.layer.setValue(CGFloat.pi, forKeyPath: "transform.rotation.x")
}

UIView.animate(withDuration: 0.5) {
    self.imageView.layer.transform = CATransform3DMakeTranslation(100, 100, 100)
    self.imageView.layer.transform = CATransform3DTranslate(self.imageView.layer.transform, 100, 100, 100)
    self.imageView.layer.setValue(100, forKeyPath: "transform.translation.x")
}

UIView.animate(withDuration: 0.5) {
    self.imageView.layer.transform = CATransform3DMakeScale(1.5, 1.5, 1.5)
    self.imageView.layer.transform = CATransform3DScale(self.imageView.layer.transform, 1.5, 1.5, 1.5)
    self.imageView.layer.setValue(1.5, forKeyPath: "transform.scale.x")
}

FieldKeyPath	Description
rotation.x	Set to an NSNumber object whose value is the rotation, in radians, in the x axis.
rotation.y	Set to an NSNumber object whose value is the rotation, in radians, in the y axis.
rotation.z	Set to an NSNumber object whose value is the rotation, in radians, in the z axis.
rotation	Set to an NSNumber object whose value is the rotation, in radians, in the z axis. This field is identical to setting the rotation.z field.
scale.x	Set to an NSNumber object whose value is the scale factor for the x axis.
scale.y	Set to an NSNumber object whose value is the scale factor for the y axis.
scale.z	Set to an NSNumber object whose value is the scale factor for the z axis.
scale	Set to an NSNumber object whose value is the average of all three scale factors.
translation.x	Set to an NSNumber object whose value is the translation factor along the x axis.
translation.y	Set to an NSNumber object whose value is the translation factor along the y axis.
translation.z	Set to an NSNumber object whose value is the translation factor along the z axis.
translation	Set to an NSValue object containing an NSSize or CGSize data type. That data type indicates the amount to translate in the x and y axis.

以上表格来自来自于此

CALayer是定义在QuartzCore框架中
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的

其次，QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

UIView和CALayer的选择

UIView是对CALayer的一层封装，并添加了事件处理等功能。理论上CAlayer的性能会比UIView更好，但是在实际开发中，虽然单从显示的角度CALayer几乎等同于UIView（如下，可以同UIView一样设置内容，背景色等并正常显示）

let layer = CALayer()
layer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
layer.contents = UIImage(named: "girl")?.cgImage
view.layer.addSublayer(layer)

但是考虑到实际开发过程中需求一般会经常有变动，比如一开始的需求是某个位置不需要事件处理，但是后期需求变更又需要进行事件处理，故在开发中一般使用UIView，不建议使用CALayer

CALayer的Position & AnchorPoint

Position是用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

AnchorPoint用来设置CALayer上的哪个点在Position属性所指的位置
AnchorPoint以自己的左上角为原点(0, 0)
AnchorPoint它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

Tips：

• Position类似于frame（以父layer层的左上角为原点），只不过不管宽高的值，只管x、y值。
• AnchorPoint决定了当前layer上的哪个点（以自己左上角为原点）与Position点重合

UIView的center就是内部CALayer的position，通过position设置CALayer的位置，改变position的值也会改变center的值

imageView.layer.position = CGPoint(x: 100, y: 100)
or
imageView.center = CGPoint(x: 100, y: 100)
// 以上任何一种修改位置，以下打印的值都相等
print(imageView.layer.position)
print(imageView.center)
// 以上打印的两个值完全相等

CALayer的隐式动画

每一个UIView内部都关联着一个CALayer，我们可以称这个CALayer为Root Layer（根层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画

什么是隐式动画？

• 当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
• 而这些属性称为Animatable Properties(可动画属性)

列举几个常见的Animatable Properties（修改该属性会产生隐式动画）：

• bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
• backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
• position：用于设置CALayer的位置。修改这个属性会产生平移动画

如何对隐式动画进行自定义设置，比如动画时间、关闭隐式动画？
对隐式动画进行设置需要用到CATransaction，如果需要对所有当前方法中的隐式动画进行设置，我们直接设置就可以。

/ 设置是否需要隐式动画
CATransaction.setDisableActions(false)
// 设置隐式动画的时间
CATransaction.setAnimationDuration(3)

layer.position = self.view.center
layer.bounds = CGRect(x: 0, y: 0, width: 200, height: 200)
layer.cornerRadius = 100

如果我们想对当前方法中的某两个属性比如Position、bounds进行修改时产生的动画进行自定义设置，我们需要用CATransaction的begin和commit方法包含需要自定义的CALayer的可动画属性

// 开启一个事务
CATransaction.begin()

// 设置是否需要隐式动画
CATransaction.setDisableActions(false)
// 设置隐式动画的时间
CATransaction.setAnimationDuration(3)

// 这两个属性在begin和commit方法之间，动画会被自定义设置
layer.position = self.view.center
layer.bounds = CGRect(x: 0, y: 0, width: 200, height: 200)

// 提交一个事务
CATransaction.commit()

// 该属性在ATransaction.begin()和CATransaction.commit()之外，其隐式动画不受事务的控制。不会被改变，呈默认状态。
layer.cornerRadius = 100