CALayer 图层简介

CALayer:

(1) 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView
(2) 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
(3) 在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer;
(4) 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能.

常用的CALayer属性

(1) 阴影

//阴影不透明(0.0 ~ 1.0)
@property float shadowOpacity;
//阴影颜色
@property CGColorRef shadowColor;
//阴影半径
@property CGFloat shadowRadius;
//阴影偏移位置
@property CGSize shadowOffset;

例如:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    imageView.image = [UIImage imageNamed:@"3"];

    //设置图层的阴影
    imageView.layer.shadowOpacity = 1;//默认为0,没有阴影
    imageView.layer.shadowColor = [UIColor greenColor].CGColor;
    imageView.layer.shadowRadius = 10;//设置阴影的半径
    [self.view addSubview:imageView];

其他属性

@property CGRect bounds;
//位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;
//锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;
//背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;
//形变属性
@property CATransform3D transform;
//边框颜色(CGColorRef类型)
@property CGColorRef borderColor;
//边框宽度
@property CGFloat borderWidth;
//圆角半径
@property CGFloat cornerRadius;
//内容(比如设置为图片CGImageRef)
@property(nullable, strong) id contents;

例如:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    imageView.image = [UIImage imageNamed:@"3"];

    //设置边框
    imageView.layer.borderWidth = 5;
    imageView.layer.borderColor = [UIColor redColor].CGColor;

    //设置圆角
    imageView.layer.cornerRadius = 20;

    //超出图层的部分裁减掉
    imageView.layer.masksToBounds = YES;

    [self.view addSubview:imageView];

transform 属性

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //图层的移动
    self.imageView.layer.transform = CATransform3DMakeTranslation(150,200, 0);
    //图层的旋转
    self.imageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
    //缩放
    self.imageView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 0.5);
}

坐标简介

UIView 和 CALayer 选择问题?

通过CALayer，就能做出跟UIView一样的界面效果,那么既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
(1) 对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以. 所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以
(2) CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级.

CALayer 的两个重要属性

(1) position :用来设置 CALayer 在父层上的位置, 以父层的左上角为原点(0,0)
(2) anchorPoint: “锚点”,决定着CALayer 身上哪个点会在 position 属性指定的位置,以自己的左上角为原点(0,0), 最大的坐标位置为右下角为(1,1), 其默认位置为(0.5,0.5)(中心点)

自定义图层

(1) 创建一个图层;
(2) 设置它的尺寸;
(3) 设置它的位置;
(4) 设置其他属性(如颜色, 锚点等);
(5) 设置内容.

/**
 *  自定义图层
 */
- (void)addLayer{
    CALayer *layer = [[CALayer alloc] init];
    //设置layer的尺寸
    layer.bounds = CGRectMake(0, 0, 100, 100);

    //设置layer显示的位置
    layer.position = CGPointMake(50, 300);

    //设置layer的锚点(默认为0.5,0.5),锚点显示在 position 处
    layer.anchorPoint = CGPointMake(0.5, 0.5);

    //设置颜色
    layer.backgroundColor = [UIColor yellowColor].CGColor;

    //设置圆角
    layer.cornerRadius = 10;

    //添加图层
    [self.view.layer addSublayer:layer];
}

隐式动画

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
什么是隐式动画？
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果, 而这些属性称为Animatable Properties(可动画属性).
列举几个常见的Animatable Properties：
(1) bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
(2) backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
(3) position：用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务(CATransaction)关闭默认的隐式动画效果

[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];

示例:

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //隐式动画
    //获得触摸点
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];
    //可动画属性
    self.layer.position = point;

    //设置颜色
    CGFloat r = arc4random_uniform(255) / 255.0;
    CGFloat g = arc4random_uniform(255) / 255.0;
    CGFloat b = arc4random_uniform(255) / 255.0;
    self.layer.backgroundColor = [UIColor colorWithRed:r green:g blue:b alpha:1.0].CGColor;

    //设置圆角
    self.layer.cornerRadius = arc4random_uniform(60)+1;

    //设置边框
    self.layer.borderWidth = arc4random_uniform(10) + 1;

//    //取消隐式动画
//    //开启事物
//    [CATransaction begin];
//    //取消动画
//    [CATransaction setDisableActions:YES];
//    //可动画属性
//    self.layer.position = point;
//    //提交事物
//    [CATransaction commit];
}