关于动画CALayer

关于CALayer

• 在iOS中，UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
• 在创建UIView对象时，UIView内部会自动创建一个图层（即CALayer对象），通过UIView的layer属性可以访问到这个层
• 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
• UIView本事是不具有显示功能的，是因为内部的层才有了显示功能

关于CALayer的疑惑

• CALayer是定义在QuartzCore框架中
• CGImageRef、CGColorRef俩种数据类型是定义在CoreCraphics框架中

• UIImage、UIColor是定义在UIKit中

• QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用

• 但是UIKit只能在iOS中使用
• 为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

//创建
CALayer *layer = [CALayer layer];
//尺寸（默认和控件一样大）
layer.frame = CGRectMake(50, 50, 200, 200);
//颜色（默认是透明的）
layer.backgroundColor = [UIColor redColor].CGColor;
//设置图层图片
layer.contents = (id)([UIImage imageNamed:@"s.jpg"].CGImage);
//layer只能添加在layer上面
[self.view.layer addSublayer:layer];

UIView和CALayer的选择

• 通过CALayer，就能做出和UIView一样的界面效果
• 对比CALayer，UIView多了一个事件处理的功能，CALayer不能处理用户的触摸事件，而UIView可以
• 所有，如果显示出来的东西需要和用户进行交互的话，用UIView；如果不需要和用户交互，UIView和CALayer都可以
• CALayer的性能会高一些，因为它少了事件处理功能，更加轻量级

CALayer基本使用

• 通过操作CALayer对象，可以调整UIView的一些外观

  • 阴影
  • 圆角大小
  • 边框宽度和颜色
    

    //阴影（不透明度）
    self.testView.layer.shadowOpacity = 1;
    //偏移量
    self.testView.layer.shadowOffset = CGSizeMake(10, -10);
    //阴影颜色
    self.testView.layer.shadowColor = [UIColor yellowColor].CGColor;
    //阴影半径
    self.testView.layer.shadowRadius = 10;
    // 圆角半径
    self.testView.layer.cornerRadius = 50;
    
    //关于UIImageView
    //cornerRadius：设置控件的主层边框
    self.testImageView.layer.cornerRadius = 50;
    //超出主层边框的内容全部裁剪掉
    self.testImageView.layer.masksToBounds = YES;
    
    //设置边框
    self.testImageView.layer.borderColor = [UIColor orangeColor].CGColor;
    self.testImageView.layer.borderWidth = 2;

• 给图层添加动画，实现一些效果

//x轴是上下翻转
//y轴是左右翻转
//z轴是中心转
self.testImageView.layer.transform = CATransform3DMakeRotation(M_PI, 1,1, 0);
//缩放
self.testImageView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);

//利用KVC做缩放
//注：给对象的哪个属性赋值，就写到keyPath里面
//注：value的值一定是属性的类型才行
//KVC的好处：利用KVC可以快速的进行二维旋转和，宽,高同时缩放
[self.testImageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
//利用KVC做旋转
[self.testImageView.layer setValue:@0.5 forKeyPath:@"transform.rotation"];

position 和anchorPoint

• position
  
  • 用来设置CALayer在父层中的位置
  • 以父层的左上角为原点（0，0）
• anchorPoint(定位点、锚点)
  
  • 决定CALayer身上的哪个点会在position属性所指的位置
  • 以自己的左上角为原点（0，0）
  • 它的x，y取值范围都是0~1，默认值（0.5，0.5）
  • 一般旋转等动画都是按锚点来旋转的

关于anchorPoint的示意图

关于position 和anchorPoint的示意图
蓝色图层在红色图层上面，蓝色图层的position是（100，100）

1、当蓝色图层的anchorPoint是（0，0）时

2、当蓝色图层的anchorPoint是（0.5，0.5）时

3、当蓝色图层的anchorPoint是（1，1）时

4、当蓝色图层的anchorPoint是（0.5，0）时

隐式动画

• 每一个UIView内部都默认关联着一个CALayer,这个Layer层为Root Layer（根层）
• 所有的非Root Layer，也就是手动创建的CALayer对象，都存在隐式动画
• 什么是隐式动画
  
  • 当对非Root Layer的部分属性进行修改时，不用添加动画，默认会产生一些动画效果
  • 而这些属性称为animatable Properties(可动画属性)

- (void)setUp{
    CALayer *layer = [CALayer layer];
    layer.position = CGPointMake(200, 200);
    layer.anchorPoint = CGPointZero;
    layer.bounds = CGRectMake(0, 0, 150, 150);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
    _layer = layer;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    _layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
}