浅谈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)