浅谈Layer两个属性position和anchorPoint

CALayer有两个非常重要的属性:position和anchorPoint
@property CGPoint position;

用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;

称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

我们先来谈anchorPoint(锚点)
它的X值和Y值最大为1最小为0

image.png

默认的anchorPoint(锚点)位置是(0.5,0.5)，白点就是锚点所在位置

image.png

此时的anchorPoint(锚点)位置是(0.5,0)，白点就是锚点所在位置

image.png

此时的anchorPoint(锚点)位置是(0.5,1)，白点就是锚点所在位置

image.png

此时的anchorPoint(锚点)位置是(1,1)，白点就是锚点所在位置

image.png

就算宽、高样式改变了，X和Y值取值范围还是0~1
此时的anchorPoint(锚点)位置是(1,1)，白点就是锚点所在位置

image.png

image.png

@property CGPoint anchorPoint;
position
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

添加一个紫色图层到蓝色图层上，紫色图层是蓝色图层的子图层
假设紫色图层的position是（50，50）
紫色图层的anchorPoint(锚点)位置是(0,0)

image.png

紫色图层显示到什么位置，由position属性决定
图一是原始图
图二是即将移动的图
图三是移动完成的图
紫色图层自身的anchorPoint(锚点)必须和自身的position重合

---

image.png

假设紫色图层的position是（50，50）
紫色图层的anchorPoint(锚点)位置是(0.5,0.5)
图一是原始图
图二是即将移动的图
图三是移动完成的图

---

image.png

假设紫色图层的position是（50，50）
紫色图层的anchorPoint(锚点)位置是(1,1)
图一是原始图
图二是即将移动的图
图三是移动完成的图

---

image.png

紫色图层宽高为100
父控件position默认位置是左上角原点(0, 0)
紫色图层的anchorPoint(锚点)默认位置是(0.5,0.5)
紫色图层自身的anchorPoint(锚点)必须和自身的position重合
如图所示：所以只显示四分之一出来

---

image.png

如果设置紫色图层的anchorPoint(锚点)为(0,0)
父控件position默认位置是左上角原点(0, 0)
紫色图层自身的anchorPoint(锚点)必须和自身的position重合
如图所示：显示全部紫色图层
只要是CALayer这种类型,他的anchorPoint默认都是(0.5,0.5)