背景

最近在看《ios核心动画高级技巧》，这本书的中文版本可以在iOS Core Animation: Advanced Techniques中文译本 这里找到，看到图形几何学这一章，其中讲到的 CALayer 的 anchorPoint 属性，发现不是很了解，所以自己发了点时间做了些研究，做了点简单的总结，主要涉及到以下主题：

• anchorPoint 是什么
• anchorPoint 应用场景

本文的DemoDrawDemo

anchorPoint 是什么

图层的anchorPoint通过position来控制它的frame的位置，你可以认为anchorPoint是用来移动图层的把柄。

上面是《ios核心动画高级技巧》书中对 anchorPoint 的解释，只看概念可能会不好理解，下面用两个例子来解释anchorPoint的概念。

修改了anchorPoint 对图层的影响

如图所示，创建一个Frame为(100, 200, 100, 100)的蓝色layer，橙色的layer是修改了anchorPoint为CGPointMake(1, 1)之后的结果

1、分析蓝色layer
默认的anchorPoint是(0.5, 0.5)，位于layer的中间，position也是位于layer的中间，layer以中心点为定位点，此时positon的意义是 layer的中心点距离父layer的原点的位置是position.x，position.y ，所以最终的frame位置如图所示为 {{100, 100}, {100, 100}}

2、分析橙色layer anchorPoint是(1, 1)，位于layer的右下角，position也是位于layer的右下角，layer以右下角为定位点，此时positon的意义是 layer的右下角距离父layer的原点的位置是position.x，position.y ，所以最终的frame位置如图所示为 {{50, 50}, {100, 100}}

3、两个重要的结论

1. anchorPoint和position是一一对应的，anchorPoint是相对于layer自身的，是一个单位坐标 (0~1, 0~1) ,表示当前layer的定位点是位于layer的什么位置，定位点决定了layer相对于父layer的关系以及layer的旋转中心，后面会有旋转的例子
2. 只修改了anchorPoint不会使position变化，但是图层位置会变化，因为定位点的位置改变了，导致最终Layer的Frame改变了，Frame是最终决定Layer位置的。

例子的代码如下：

// anchorPoint 对图层的影响     layer = [[CALayer alloc] init];     layer.frame = CGRectMake(100, 200, 100, 100);     layer.borderColor = [UIColor blueColor].CGColor;     layer.borderWidth = 1;     layer.anchorPoint = CGPointMake(0.5, 0.5);     [self.view.layer addSublayer:layer];     NSLog(@"layer position = %@, anchorPoint = %@  frame = %@", NSStringFromCGPoint(layer.position), NSStringFromCGPoint(layer.anchorPoint), NSStringFromCGRect(layer.frame));      {         CALayer* copyLayer = [self cloneLayer:layer];         copyLayer.borderColor = [UIColor orangeColor].CGColor;         [self.view.layer addSublayer:copyLayer];         // 默认的anchorPoint位置为(0.5, 0.5)，和position是对应的         // 需要移动anchorPoint到layer的右下角，         // 假设认为anchorPoint的位置是固定的，怎样才能把anchorPoint定位到位置为(1, 1)         // 需要把整个的layer往上和往左移动(layer.width * 0.5)个点才能够做到         // 这样会导致frame的origin的变化，也就是layer会往左上角偏移了         // position的值没有改变，anchorPoint位置是对应的，下面会进行谈论         copyLayer.anchorPoint = CGPointMake(1, 1);         NSLog(@"layer position = %@, anchorPoint = %@  frame = %@", NSStringFromCGPoint(copyLayer.position), NSStringFromCGPoint(copyLayer.anchorPoint), NSStringFromCGRect(copyLayer.frame));                  // 回到这里，继续讨论anchorPoint引起的frame的变化而position不变         // anchorPoint是layer定位点（包括旋转和缩放，是相对于layer自身的，是一个单位坐标的点）         // position是和anchorPoint对应的点，是layer相对于父layer的定位点，         // anchorPoint=(0.5, 0.5)，layer的中心位置相对于父layer原点的位置为position         // 因为在只修改anchorPoint的情况下不改变position的值，所以：         // anchorPoint=(1, 1)，layer的右下角位置相对于父layer原点的位置为position     } 

Frame不变，修改了anchorPoint 对图层的影响

如图所示，创建一个Frame为(100, 300, 100, 100)的蓝色layer，橙色的layer是修改了anchorPoint为CGPointMake(0, 0)之后但是Frame不变的结果，红色的layer是修改了anchorPoint为CGPointMake(1, 1)之后但是Frame不变的结果

1、分析橙色Layer
在保持Frame不变的情况下，anchorPoint是(0, 0)，位于layer的左上角，position也是位于layer的左上角，layer以左上角为定位点，此时positon的意义是 layer的左上角距离父layer的原点的位置是position.x，position.y ，对layer进行45°的旋转之后，如图Layer以左上角做了顺时针的45°旋转。

2、分析红色Layer
在保持Frame不变的情况下，anchorPoint是(1, 01)，位于layer的右下角，position也是位于layer的右下角，layer以右下角为定位点，此时positon的意义是 layer的右下距离父layer的原点的位置是position.x，position.y ，对layer进行45°的旋转之后，如图Layer以右下角做了顺时针的45°旋转。

例子的代码如下：

    // 在Frame不变的情况下讨论anchorPoint对position的影响     // 可以这么认为，position是因变量，anchorPoint是自变量     // anchorPoint和position是一一对应的，是同一个点     layer = [[CALayer alloc] init];     layer.borderColor = [UIColor blueColor].CGColor;     layer.borderWidth = 1;     layer.anchorPoint = CGPointMake(1, 1);     layer.frame = CGRectMake(100, 300, 100, 100);     [self.view.layer addSublayer:layer];          {         CALayer* copylayer = [self cloneLayer:layer];         copylayer.borderColor = [UIColor orangeColor].CGColor;         [self.view.layer addSublayer:copylayer];                  // Frame不变，anchorPoint设置到右下角，positon位置也会变到右下角{150, 500}         copylayer.anchorPoint = CGPointMake(1, 1);         copylayer.frame = CGRectMake(100, 300, 100, 100);         NSLog(@"layer.position = %@", NSStringFromCGPoint(copylayer.position));                  // 旋转         copylayer.affineTransform = CGAffineTransformRotate(copylayer.affineTransform, M_PI_4);     }          {         CALayer* copylayer = [self cloneLayer:layer];         copylayer.borderColor = [UIColor orangeColor].CGColor;         [self.view.layer addSublayer:copylayer];                  // Frame不变，anchorPoint设置到坐上角，positon位置也会变到坐上角{50, 400}         copylayer.anchorPoint = CGPointMake(0, 0);         copylayer.frame = CGRectMake(100, 300, 100, 100);         NSLog(@"layer.position = %@", NSStringFromCGPoint(copylayer.position));                  // 旋转         copylayer.affineTransform = CGAffineTransformRotate(copylayer.affineTransform, M_PI_4);     } 

anchorPoint 应用场景

例子来自于《ios核心动画高级技巧》书中国的 时钟表盘例子

例子可以在我的git上找到ClockFace

初始的时钟指针在表盘中的位置如下：

// 秒针 layer frame:{{124, 77}, {8, 102}} anchorPoint:{0.5, 0.5} position:{128, 128} // 分针 layer frame:{{118, 75}, {20, 106}} anchorPoint:{0.5, 0.5} position:{128, 128} // 时针  layer frame:{{113, 81}, {30, 94}} anchorPoint:{0.5, 0.5} position:{128, 128} 

没有设置anchorPoint的指针走动效果：

根据以上的分析我们知道原因是默认的anchorPoint为{0.5, 0.5}，也就是旋转中心是指针的中心点导致的效果如此，知道原因了修改也不难了，最简单的做法就是把anchorPoint设置为{0.5, 0.9}即可。

    //adjust anchor points     self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);     self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);     self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); 

对应的指针的layer变化：

// 秒针 layer frame:{{124, 36.2}, {8, 102}} anchorPoint:{0.5, 0.89} position:{128, 128} // 分针 layer frame:{{118, 32.6}, {20, 106}} anchorPoint:{0.5, 0.8} position:{128, 128} // 时针 layer frame:{{113, 43.4}, {30, 94}} anchorPoint:{0.5, 0.89} position:{128, 128} 

效果如下：

总结

以上是Layer中anchorPoint属性的一些总结以及一个应用场景，如有不妥之处敬请指教。