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个改变:
- blueView的位置发生了变化
- 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;