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
网友评论