iOS动画-CALayer布局属性详解
本篇主要内容： 1.Frame与Bounds的区别 2.中心点(position)与锚点(anchorPoint) 3.视图与图层的坐标系
一、Frame与Bounds的区别
我们已经知道UIView的很多布局属性其实都来自于图层；UIView的布局属性包括:frame、bouns、center，分别对应了CALayer中frame、bounds、position。为了能清楚区分，图层用了position，视图用了center，但它们都代表了同样的值。
UIView属性 | CALayer属性 | 属性说明 |
|---|---|---|
frame | frame | 表示相对于其父视图的坐标位置 |
bounds | bounds | 表示相对于其自身的坐标位置，{0,0}通常是其左上角 |
center | position | 相对于父图层锚点AnchorPoint所在位置 |
frame&&bounds.png
上图对原有视图做了旋转变换，之后的frame实际上代表了覆盖在图层旋转之后的整个轴对齐的矩形区域，此时frame的宽和高和bounds不再一致了。
其实，对于视图和图层来说，frame是根据bounds、position、和transform计算而来的；所以当其中的任何一个值发生变化时，frame就会发生变化，相反改变frame也同样影响他们当中的值。
六、中心点(position)与锚点(anchorPoint)
1.锚点的概念
position与anchorPoint是两个容易混淆的概念，我们首先从Xcode中找到关于它们的注释说明如下：
/* The position in the superlayer that the anchor point of the layer's
* bounds rect is aligned to. Defaults to the zero point. Animatable. */
@property CGPoint position;
/* Defines the anchor point of the layer's bounds rect, as a point in
* normalized layer coordinates - '(0, 0)' is the bottom left corner of
* the bounds rect, '(1, 1)' is the top right corner. Defaults to
* '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */
@property CGPoint anchorPoint;我们可以看出，position被用于描述当前layer在superlayer中的位置，而且是通过当前layer的anchorPoint来确定的。换句话来讲就是：position是当前layer的anchorPoint在superLayer中的位置。
我们也可以更确切理解为：position是相对于superLayer来讲，而anchorPoint是相对于当前layer来讲；只不过在默认情况下，anchorPoint与position是重合的；锚点是用单位坐标来描述的(即图层的相对坐标），图层的左上角是{0,0}，右下角是{1,1}，因此图层的默认锚点是{0.5, 0.5}，表示图层的中间位置代表了其位置position。
下面的图示是将锚点从{0.5，0.5}改为了{0，0}，我们在这里更容易看到position与anchorPoint之间的关系：
anchorPoint.png
如图，修改图层锚点会改变layer的frame，但是其position不会改变，这看起来似乎有点奇怪，但是我们依然可以通过一些计算方式看出端倪：
position.x = frame.origin.x + 0.5 * bounds.size.width；
position.y = frame.origin.y + 0.5 * bounds.size.height； 这里的0.5参数，其实就是由于锚点默认值得到的，所以改进公式如下：
position.x = frame.origin.x + anchorPoint.x * bounds.size.width；
position.y = frame.origin.y + anchorPoint.y * bounds.size.height；此时，我们如果通过修改anchorPoint的值来进行测试，就会发现改变的只有frame的origin，这就说明修改position与anchorPoint中任何一个属性都不能影响另一个属性，由此我们也可以再次改进公式：
frame.origin.x = position.x - anchorPoint.x * bounds.size.width；
frame.origin.y = position.y - anchorPoint.y * bounds.size.height；最后得出结论：frame的origin坐标由position与anchorPoint来共同决定；
2.锚点的作用
锚点就相当于一个支点，可以形象的理解为一颗固定了图层的图钉，尤其是我们在做旋转动画时，可能会需要设置此属性来决定图层是围绕哪一个点旋转的；但这时候我们又不得不考虑一个问题：修改锚点可以让我们的动画围绕非中心点旋转，但是这也改变了原有视图的位置frame，这是我们不想要的结果，该如何解决呢？这里提供一种方法如下:
- (void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view{
CGPoint oldOrigin = view.frame.origin;
view.layer.anchorPoint = anchorPoint;
CGPoint newOrigin = view.frame.origin;
CGPoint transition;
transition.x = newOrigin.x - oldOrigin.x;
transition.y = newOrigin.y - oldOrigin.y;
view.center = CGPointMake (view.center.x - transition.x, view.center.y - transition.y);
}下面再来具体演示一下修改锚点改变动画状态的用法，我们分别创建橙色视图默认围绕中心旋转，而紫色视图围绕左顶点旋转，关键代码如下：
#import "TestLayerFiveVC.h"
@interface TestLayerFiveVC ()
@property (nonatomic,strong) UIView *viewA;
@property (nonatomic,strong) UIView *viewB;
@end
@implementation TestLayerFiveVC
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.orangeView];
[self.view addSubview:self.purpleView];
[self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(100);
make.centerX.equalTo(self.view);
make.width.height.mas_equalTo(100);
}];
[self.purpleView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.orangeView.mas_bottom).offset(150);
make.centerX.equalTo(self.view);
make.width.height.mas_equalTo(100);
}];
[self.view layoutIfNeeded];
//orangeView的旋转动画
[self addRotationAnimation:self.orangeView withDuration:3];
//修改purpleView的锚点，并恢复其原先的Frame,使其可以绕着左上角顶点旋转
[self resetAnchorPoint:CGPointMake(0, 0) forView:self.purpleView];
[self addRotationAnimation:self.purpleView withDuration:3];
}
- (void)resetAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view{
CGPoint oldOrigin = view.frame.origin;
view.layer.anchorPoint = anchorPoint;
CGPoint newOrigin = view.frame.origin;
CGPoint transition;
transition.x = newOrigin.x - oldOrigin.x;
transition.y = newOrigin.y - oldOrigin.y;
//重新设置原来视图位置
view.center = CGPointMake (view.center.x - transition.x, view.center.y - transition.y);
[view mas_remakeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(view.superview).offset(view.center.y - transition.y);
make.leading.equalTo(view.superview).offset(view.center.x - transition.x);
make.width.mas_equalTo(view.width);
make.height.mas_equalTo(view.height);
}];
}
- (void)addRotationAnimation:(__kindof UIView *)view withDuration:(CFTimeInterval)dutation {
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI * 2.0];
rotationAnimation.duration = dutation;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = MAXFLOAT;
rotationAnimation.removedOnCompletion = NO;
[view.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}效果图如下：
锚点动画.gif
三、视图与图层的坐标系
CALayer给不同坐标系之间的图层转换提供了一些工具类方法：
- (CGPoint)convertPoint:(CGPoint)p fromLayer:(nullable CALayer *)l;
- (CGPoint)convertPoint:(CGPoint)p toLayer:(nullable CALayer *)l;
- (CGRect)convertRect:(CGRect)r fromLayer:(nullable CALayer *)l;
- (CGRect)convertRect:(CGRect)r toLayer:(nullable CALayer *)l;与此对应的UIView也具有相似的方法如下：
- (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view;
- (CGPoint)convertPoint:(CGPoint)point fromView:(nullable UIView *)view;
- (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;
- (CGRect)convertRect:(CGRect)rect fromView:(nullable UIView *)view;通过这些方法，我们可以把定义在一个图层(或视图)坐标系下的点或者矩形转换为另一个图层(或视图)坐标系下的点或者矩形；开发过程中我们通常操作的对象都是视图，所以下面以视图为例简单演示其用法：首先创建添加两个宽高都是100*100的橙色、紫色视图在控制器的View上，
坐标系.png
使用下面的代码进行测试，结果如下：
CGPoint targetPoint = CGPointMake(10, 10);
CGPoint point1 = [purpleView convertPoint:targetPoint toView:orangeView]; //代码1
CGPoint point2 = [orangeView convertPoint:targetPoint fromView:purpleView];
NSLog(@"\npoint1:%@\npoint2:%@",NSStringFromCGPoint(point1),NSStringFromCGPoint(point2));
/*测试结果：
point1:{160, 60}
point2:{160, 60}
*/代码分析： 这里分别测试了convertPoint的两种用法(convertRect与其相似)，我们可以将代码1理解为：参考organView为坐标系时，purpleView上坐标为target的点的坐标值；