iOS核心笔记——CALayer-基本使用

Posted 2020-08-29

1、CALayer简单使用：

※了解： 通过操作CALayer对象，可以很方便的调整UIView的一些界面属性，例如：阴影、圆角大小、边框宽度……等；在ios 7.0以前使用CALayer需要手动导入QuartzCore框架。

---

2、通过CALayer修改UIView的界面属性：

1、在storyboard中拖入UIView，并设置相关属性：

如下图所示：

---

2、设置阴影：

1.  // 1. 设置阴影颜色
2.  self.blueView.layer.shadowColor = [UIColor blackColor].CGColor;
3.  // 2. 设置阴影偏移量, width: 向右为正, height: 向下为正.
4.  self.blueView.layer.shadowOffset = CGSizeMake(-20, -20);
5.  // 3. 设置阴影不透明度, 0: 不显示阴影; 1: 显示阴影. 必须设置该属性才能显示阴影
6.  self.blueView.layer.shadowOpacity = 1;

第1行：设置阴影的颜色为黑色，注意，这里使用的是UIColor的CGColor属性，是一种CGColorRef类型的数据；

第2行：设置阴影的偏移大小，可以看出阴影往原图左上角偏移；

第3行：设置阴影不透明度，0：不显示阴影；1：显示阴影； 必须设置该属性才能显示阴影。

※重要：设置阴影时，必须设置view的masksToBounds = NO；否则，无法显示阴影。

效果示例图：

---

3、设置圆角大小：

1.  // 3. 切圆角, 不需要裁剪也能显示圆角
2.  self.blueView.layer.cornerRadius = 10;

第1行：设置圆角的半径为10；

※重要：UIView设置圆角无需设置masksToBounds = YES；因为，UIView内部默认只有一个图层，即：主layer；所以，直接设置主layer圆角半径即可。

效果示例图：

---

4、设置边框宽度和颜色：

1.  // 1. 设置边框颜色, 单独设置无效; 必须结合边框宽度
2.  self.blueView.layer.borderColor = [UIColor redColor].CGColor;
3.  // 2. 设置边框宽度
4.  self.blueView.layer.borderWidth = 5;

第1行：设置边框颜色为红色（注：CGColor类型）；

第2行：设置边框宽度为8；

备注：给UIView设置边框，边框不占据内容区域；边框在UIView内容区域外部。

效果示例图：

---

3、通过CALayer修改UIImageView的界面属性：

1. 在storyboard中拖入UIImageView，并设置相关属性：

如下图所示：

---

2、设置阴影：

1.    // 1. 设置阴影
2.    self.imageView.layer.shadowColor = [UIColor blackColor].CGColor;
3.    // 2. 设置阴影偏移量
4.    self.imageView.layer.shadowOffset = CGSizeMake(-20, -20);
5.    // 3. 显示阴影
6.    self.imageView.layer.shadowOpacity = 1;

第1行：设置阴影的颜色为黑色，注意，这里使用的是UIColor的CGColor属性，是一种CGColorRef类型的数据；

第2行：设置阴影的偏移大小，可以看出阴影往原图左上角偏移；

第3行：设置阴影的不透明度为1，表示完全不透明；如果为0.5，则表示为半透明。

示例效果图：

---

3、设置圆角大小：

1.    // 1. 设置圆角
2.    self.imageView.layer.cornerRadius = 20;
3.    // 2. 超出主layer裁剪
4.    self.imageView.layer.masksToBounds = YES;

第1行：设置圆角半径为20；

第2行：masksToBounds = YES：设置该属性为YES是为了将子layer超出主layer部分进行裁剪，UIImageView是由子layer显示图片；但是，切圆角等所有操作都是在主layer上，所以，即便我们设置了主layer圆角特效，如果没有设置masksToBounds = YES；子layer超出部分没有被裁减，imageView便没有圆角效果；

重要：设置masksToBounds = YES之后，阴影便没有阴影效果了。

效果示例图：

---

4、设置边框宽度和颜色：

1.    // 1. 设置边框, 默认为黑色, 边框占据imageView的内容部分
2.    self.imageView.layer.borderWidth = 8;
3.    // 2. 设置边框颜色
4.    self.imageView.layer.borderColor = [UIColor redColor].CGColor;

备注： 给UIImageView设置边框，其边框内容是显示在UIImageView里面的内容区域；

第1行：设置边框宽度为8；

第2行：设置边框颜色为红色（注：CGColor类型）。

效果示例图：

---

5、设置形变(CATransform3D)：

1.    // 1. 方式一: 使用transform-3D方法
2.    self.imageView.layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);
3.    // 1-1. 对比transform-2D
4.    self.imageView.transform = CGAffineTransformMakeScale(0.5, 1);
5.
6.    // 2. 方式二: 使用KVC, 在值中指定transform类型
7.    NSValue *transform = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 1.0, 0)];
8.    [self.imageView.layer setValue:transform forKeyPath:@"transform"];
9.
10.    // 3. 方式三: 使用KVC, 在forKeyPath中指定transform类型
11.    [self.imageView.layer setValue:@(0.5) forKeyPath:@"transform.scale.x"];
12.    [self.imageView.layer setValue:@(M_PI_4) forKeyPath:@"transform.rotation"];

备注：CATransform3DMakeRotation(M_PI_4, 0, 0, 1)参数

1、利用transform属性可以设置旋转、缩放、平移等效果；

2、M_PI_4：表示四份之π，顺时针旋转45°；

3、后面的（0，0，1）表示旋转参考向量（即：绕Z轴向量旋转），修改参考向量可以做3D旋转效果；

4、函数含义：layer绕着Z轴顺时针旋转45°，也就是在x、y平面进行旋转。

效果示例图：

---

备注-1： CALayer使用CATransform的坐标系：

---

备注-2： CALayer使用KVC形式修改CATransform的Key：

注：在苹果官方文档中搜索“CATransform3D Key Paths”，便能找到如何使用KVC修改layer的transform。

---

4、CALayer动画：

4-1、暂停动画：

---

4-2、重新开始：

---