iOS动画（一）UIView和CALayer关系

我们在搭建iOS系统app界面的时候，用到的控件诸如UILabel、UIButton、UIImageView等都继承自UIView,UIView是界面元素的基础。

UIView和CALayer的联系

UIView有个属性 layer,苹果官方给的注释是：

@property(nonatomic,readonly,strong)   CALayer  *layer
// returns view's layer. Will always return a non-nil value. view is layer's delegate

CALayer是图层，和界面展示相关。UIView很多属性和方法和CALayer里的属性和方法是一致的。UIView可以看做是CALayer的管理者，除了负责视图展示之外，还可以处理一些事件，比如手势交互等。但我们对UIView做的一些有关视图显示和动画的操作，本质上还是对CALayer进行的操作。

比如我们访问UIView跟绘图和跟坐标有关的属性，例如frame，bounds等等，实际上内部都是在访问它所包含的CALayer的相关属性。

笔者做了个小小的测试

    UIImageView * PictureView = [[UIImageView alloc]initWithFrame:CGRectMake(150, 200, 100, 90)];
    PictureView.image = [UIImage imageNamed:@"Test"];
    PictureView.layer.transform = CATransform3DMakeRotation(0.3, 0, 0, 1);
    [self.view addSubview:PictureView];
    
     NSLog(@"view.frame.x=%f,view.frame.y=%f,view.frame.width=%f,view.frame.height=%f",PictureView.frame.origin.x,PictureView.frame.origin.y,PictureView.frame.size.width,PictureView.frame.size.height);
    
    NSLog(@"layer.frame.x=%f,layer.frame.y=%f,layer.frame.width=%f,layer.frame.height=%f",PictureView.layer.frame.origin.x,PictureView.layer.frame.origin.y,PictureView.layer.frame.size.width,PictureView.layer.frame.size.height);

    NSLog(@"layer.bounce.x=%f,layer.bounce.y=%f,layer.bounce.width=%f,layer.bounce.height=%f",PictureView.layer.bounds.origin.x,PictureView.layer.bounds.origin.y,PictureView.layer.bounds.size.width,PictureView.layer.bounds.size.height);

    NSLog(@"view.bounce.x=%f,view.bounce.y=%f,view.bounce.width=%f,view.bounce.height=%f",PictureView.bounds.origin.x,PictureView.bounds.origin.y,PictureView.bounds.size.width,PictureView.bounds.size.height);

打印出来的内容是：

view.frame.x=150.000000,view.frame.y=200.000000,view.frame.width=100.000000,view.frame.height=90.000000
layer.frame.x=150.000000,layer.frame.y=200.000000,layer.frame.width=100.000000,layer.frame.height=90.000000 
view.bounce.x=0.000000,view.bounce.y=0.000000,view.bounce.width=100.000000,view.bounce.height=90.00000
layer.bounce.x=0.000000,layer.bounce.y=0.000000,layer.bounce.width=100.000000,layer.bounce.height=90.000000

可以看到，UIView和CALayer的frame、bounces始终保持一致。

UIView 和CALayer设置视图位置和大小的几个属性

---

• frame: UIView和CALayer共有属性，为CGRect 类型，可以设置视图的X、Y坐标，以及视图的width和height。X、Y确定了该视图在其父视图的位置（layer在父layer的位置），width、height则确定了该视图的大小。
• bounds: UIView和CALayer共有属性，为CGRect 类型，可以设置视图的X、Y坐标，以及视图的width和height。X、Y默认都是0，可以用来调整该视图的全部子视图在它的内部的位置（子layer在其内部的位置），width、height则确定了该视图的大小。如果子视图的bounds比父视图大，那么子视图可以全部显示出来
  好多人不明白 frame和bounds之间的区别，笔者认为frame是子视图用来调整其在父视图内部位置使用的，每个子视图都需要通过设置frame调整自己在父视图的位置。而父视图可以通过设置bounds的X、Y来调整该内部全部子视图的位置，子视图之间的相对位置不会发生改变。有一点需要注意的是，设置子视图frame的X、Y和设置父视图bounds的X、Y，对于子视图位置效果是相反的。
  例如：

  self.view.backgroundColor = [UIColor whiteColor];
    UIImageView * PictureView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 100, 40, 20)];
    PictureView.image = [UIImage imageNamed:@"Test"];
    self.view.bounds= CGRectMake(20, 20, 10, 10);
    [self.view addSubview:PictureView];

显示效果：

添加下面的代码：

    self.view.bounds= CGRectMake(20, 20, 10, 10);

显示效果：

屏幕快照 2016-03-23 下午2.30.27.png

即，图像向左、向上偏移了二十

• center:UIView独有的属性，是CGPoint类型，是子视图的中心在父视图中的位置，是frame的中心位置。
• position:CALayer独有的属性，是CGPoint类型，layer 的anchorPoint（锚点）在父类的layer相对位置。
• zPosition：CALayer独有的属性，是CGFloat类型。zPosition等效于在Z轴上做了个偏移Transform，所以我们可以通过3D Transform来视觉化各个CALayer的zPosition。
  如下图，可以通过控制棕色图层和绿色图层的zPosition,让它们在垂直屏幕的方向上分层。
  屏幕快照 2016-03-23 下午10.34.41.png
• anchorPoint：俗称（锚点）CALayer独有的属性，是CGPoint类型。决定着CALayer身上的哪个点会在position属性所指的位置
  以自己的左上角为原点(0, 0)。它的x、y取值范围都是0~1，默认值为（0.5, 0.5）。关于position和anchorPoint如何确定子视图在父视图上的位置，大家可以参考这篇博文CAlayer层的属性

• anchorPointZ CALayer独有的属性，是CGFloat类型。anchorPointZ和anchorPointZ在一起使用可以确定一个立方体在三维空间的位置。

后记：

了解这些属性的含义，以后在做动画的时候，就可以通过不断变化相应控件的位置和大小，达到我们想要的效果