锚点和position的关系

 

1.position

定义：某一个视图的layer的position表示，该视图的layer的锚点在父视图的layer中的位置，默认的数值是视图layer的中点的数值。

从上面的定义的第二句来看，position表示的是在父视图中的位置！

2. anchorPoint

定义：锚点，就像船锚一样，起着固定的作用，有风浪时，船会围着船锚旋转；锚点也是这样的，说白了就是固定视图用的点，每当我们给视图添加一个旋转动画时，就是围绕该点进行旋转的。

3. 记住一点：position 和 锚点 必须是重合的！

4. 例子

    UIView *testView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    testView.backgroundColor = [UIColor redColor];
    [self.view addSubview:testView];
    
    UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 60)];
    blueView.backgroundColor = [UIColor blueColor];
    [testView addSubview:blueView];

看下初始的样子

 

初始视图.png

此时position的值是蓝色视图的中心点坐标(50， 30)，锚点是默认的(0.5, 0.5)

1. 修改蓝色矩形的锚点anchorPoint 为(0, 0)，position不变(50, 30)

    blueView.layer.anchorPoint = CGPointMake(0, 0);

结果：

 

修改锚点.png

我们发现，锚点和position依然是重合的，但是蓝色视图的位置却发生了变化；
原因：position还是(50, 30)，但是锚点从蓝色视图的中心点变成了左上角的点，由于position和锚点必须是重合的（即position是锚点在父视图layer中的位置），所以蓝色视图的位置发生了改变。

如何变回去呢？ ---- 修改position为(0, 0)

blueView.layer.position = CGPointMake(0, 0);

同时修改锚点和position.png

2. 让图中的蓝色矩形旋转

    UIView *testView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    testView.backgroundColor = [UIColor redColor];
    [self.view addSubview:testView];
    
    UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 60)];
    blueView.backgroundColor = [UIColor blueColor];
    [testView addSubview:blueView];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    animation.duration = 1;
    animation.toValue = @(2 * M_PI);
    animation.repeatCount = 100;
    [blueView.layer addAnimation:animation forKey:@"rotation"];

效果：

 

修改锚点之前.gif

修改blueView的锚点为(0, 0)

blueView.layer.anchorPoint = CGPointMake(0, 0);

结果：

 

修改锚点之后.gif

分析
比较之前的动画，发生了2个改变：

1. blueView的位置发生了变化
2. blueView旋转的中心发生了变化

位置的变化，我们在上面已经分析过了，我们这里还是说一说锚点的“固定视图功能”；我们可以看到，随着锚点的变化，视图旋转的中心也发生变化，就像船锚一样，船（视图）总是围着船锚（锚点）旋转的。

最后说一下frame，position，和anchor point坐标值的关系

frame.origin.x = position.x - anchorpoint.x*frame.size.width;

frame.origin.y = position.y - anchorpoint.y*frame.size.height;

从这两个公式你就应该很直观的看出为什么改变archorpoint的值会改变frame的位置吧，因为calayer中，position的位置不改变的，那么你就改变anchorpoint时，系统为了适配position的位置时，他就只能去修改frame的值去达到目的。

那么anchor point的值是在什么范围呢？

一般来说，默认的anchor point的位置（0.5，0.5），即在一张图片的中心，换算成实际在superlayer的坐标值，会发现他的值刚好等于position的坐标值，如果anchorpoint在左上角，那么坐标是（0，0），如果是在右下角，那么他的坐标是（1，1）；

规律如下：

1>会发现当anchorpoint.x的值小于0.5的时候，那么frame.origin.x的值就会增大，那么整体图片的效果就会向右平移；

2>当anchorpoint.x的值大于0.5的时候，那么frame.origin.x的值就会减小，那么图片的效果就会向左平移；

3>当anchorpoint.y的值小于0.5的时候，那么frame.origin.y的值就会增大，那么图片的效果就会向下平移；

4>当anchorpoint.y的值大于0.5的时候，那么frame.origin.y的值就会减小，那么图片的效果就会向上平移；

总结如下：

1、position是layer中的anchorPoint在superLayer中的位置坐标。 
2、互不影响原则：单独修改position与anchorPoint中任何一个属性都不影响另一个属性。 
3、frame、position与anchorPoint有以下关系：

frame.origin.x = position.x - anchorpoint.x*frame.size.width;

frame.origin.y = position.y - anchorpoint.y*frame.size.height;