500-CALayer

一、CALayer的常用设置

1.UIView的图层

    UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2.0 - 50, 30, 100, 100)];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    // 1.边框宽度和边框颜色
    redView.layer.borderWidth = 5;
    redView.layer.borderColor = [UIColor purpleColor].CGColor;
    
    // 2.图层实现设置圆角
    // 对于UIView的圆角设置我们可以不需要设置masksToBounds为YES
    redView.layer.cornerRadius = 30;
    
    // 3.图层实现设置阴影
    // 阴影的设置必须设置masksToBounds为YES
    redView.layer.shadowColor = [UIColor yellowColor].CGColor; // 阴影颜色
    redView.layer.shadowOffset = CGSizeMake(20, 20); // 阴影偏差(右下偏正左上偏负)
    redView.layer.shadowOpacity = 0.5; // 图层阴影的透明度(默认为0)
    
    // 4.图层的裁剪(默认为NO，超出图层的部分就会被裁剪)
    redView.layer.masksToBounds = NO;

2.UIImageView的图层

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2.0 - 50, 160, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1.jpg"];
    [self.view addSubview:imageView];
    
    // 1.设置圆角
    imageView.layer.cornerRadius = 10;
    
    // 2.在设置图片圆角时，必须设置为裁剪效果
    imageView.layer.masksToBounds = YES;

 总结：UIView和UIImageView圆角设置的区别

　　对于UIImageView而言，CALayer有主层和子层之分，主层上会依照图层参数设置展示，但是Image是显示在子层上的，所以在设置圆角时，必须设置图层剪裁效果(裁剪超出主层的部分)

　　对于UIView而言，CALayer只有一个主层，所以在设置圆角时可以不用设置剪裁效果

 

二、图层的三维属性

1.方法设置

    // 创建UIImageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2.0 - 50, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1.jpg"];
    [self.view addSubview:imageView];
    
    // 1.三维缩放
    // x：宽度缩放比例
    // y：高度缩放比例
    // z：由于iOS7的扁平化无效
    imageView.layer.transform = CATransform3DMakeScale(1.5, 1.5, 0);
    
    // 2.三维平移
    // x：x方向平移(正右负左)
    // y：y方向平移(正下负上)
    // z：由于iOS7的扁平化无效
    imageView.layer.transform = CATransform3DMakeTranslation(10, 10, 0);
    
    // 3.三维旋转
    // 旋转轴：{(0, 0, 0), (x, y, z)}
    // 旋转方向：逆时针旋转
    // 旋转弧度：angle
    imageView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);

2.KVC赋值

　　1）给结构体赋值

    // 创建UIImageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2.0 - 50, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1.jpg"];
    [self.view addSubview:imageView];
// 1.图片三维平面旋转
    // transform：结构体,传值必须是包装为NSValue
    NSValue *value1 = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1, 1, 0)];
    [imageView.layer setValue:value1 forKeyPath:@"transform"];
    
    // 2.图片二维平面平移
    // transform.translation：结构体,传值必须是包装为NSValue
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 20)];
    [imageView.layer setValue:value2 forKeyPath:@"transform.translation"];

　　2）给结构体中的成员赋值

    // 创建UIImageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2.0 - 50, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1.jpg"];
    [self.view addSubview:imageView];
// 1.图片宽度缩小为0.5
    [imageView.layer setValue:@(0.5) forKeyPath:@"transform.scale.x"];
    
    // 2.图片二维平面旋转45°
    [imageView.layer setValue:@(M_PI_4) forKeyPath:@"transform.rotation"];
    
    // 3.图片二维平面平移(x轴向右移动100)
    [imageView.layer setValue:@100 forKeyPath:@"transform.translation.x"];

　　总结：苹果官方文档中搜索“CATransform3D key paths”，这里面关于KVC赋值的一些Key对应的Value类型写得很清楚

　　直接上图：

　　　

 　　　

 

三、CALayer的创建和自定义

1.CALayer的创建

代码演示之前我们必须搞清楚，CALayer的两个重要属性(position和anchorPoint)

　　1）position：CALayer相对于父层中原点(0, 0)的位置

　　2）anchorPoint：定位点、锚点 -- 以自己的左上角为原点(0, 0)

　　　　

　　其实就一句话：锚点决定着CALayer自身的哪一个点(默认为中点(0.5, 0.5))在父层中的位置坐标是position的坐标值

    // 1.初始化CALayer对象
    // CALayer *redLayer = [[CALayer alloc] init];
    CALayer *redLayer = [CALayer layer];
    
    // 2.设置CALayer的位置和尺寸
    // redLayer的(1, 0.5)这个点在父层中的坐标是(50, 50)
    // 设置锚点(默认(0.5, 0.5))
    redLayer.anchorPoint = CGPointMake(1, 0.5);
    redLayer.bounds = CGRectMake(0, 0, 100, 100);
    redLayer.position = CGPointMake(50, 50);
    // redLayer.frame = CGRectMake(50, 50, 100, 100);
    
    // 3.设置背景色(注意是CG类型)
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    // 4.设置边框
    redLayer.borderWidth = 10;
    redLayer.borderColor = [UIColor greenColor].CGColor;
    
    // 5.设置圆角
    redLayer.cornerRadius = 10;
    
    // 6.设置阴影
    redLayer.shadowColor = [UIColor yellowColor].CGColor;
    redLayer.shadowOffset = CGSizeMake(20, 20);
    redLayer.shadowOpacity = 0.5; // 设置阴影必须设置，默认为0
    
    // 7.设置头CALayer透明度
    redLayer.opacity = 0.5;
    
    // 8.将新建的CALayer对象加载在self.view.layer上
    [self.view.layer addSublayer:redLayer];

2.CALayer实现UIImageView的效果

    // 1.初始化CALayer对象
    CALayer *redLayer = [CALayer layer];
    
    // 2.设置CALayer的位置和尺寸
    redLayer.bounds = CGRectMake(0, 0, 100, 100);
    redLayer.position = CGPointMake(100, 100);
    
    // 3.设置背景色(注意是CG类型)
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    // 4.设置边框
    redLayer.borderWidth = 10;
    redLayer.borderColor = [UIColor greenColor].CGColor;
    
    // 5.设置圆角
    redLayer.cornerRadius = 10;
    
    // 6.设置CALayer的内容(id类型)
    // [UIImage imageNamed:@"1.jpg"].CGImag  (C语言类型)
    redLayer.contents = (id)[UIImage imageNamed:@"1.jpg"].CGImage;
    
    // 7.CALayer的内容会在子层显示，如设置圆角就必须设置剪裁效果
    redLayer.masksToBounds = YES;
    
    // 8.加载
    [self.view.layer addSublayer:redLayer];

总结：既然CALayer也能实现UIImageView的效果，那么对于UIView和CALayer就有了一个选择的问题

　　1）对比CALayer，UIView多了一个事件处理的功能；也就是说，CALayer是不能处理用户的触摸事件

　　2）所以，如果要求显示出来的东西需要用户交互，必选UIView；如不需要，二者均可

　　3）另外，由于CALayer不需要处理事件，所以其性能也就相应会高一些，更加轻量级

3.自定义图层

　　1）继承的方法自定义图层

// CustomLayer.h文件
#import <QuartzCore/QuartzCore.h>

@interface CustomLayer : CALayer

@end

// CustomLayer.m文件
#import "CustomLayer.h"

@implementation CustomLayer

#pragma mark - 自定义CALayer调用setNeedsDisplay方法后会调用
- (void)drawInContext:(CGContextRef)ctx
{
    // 设置填充颜色
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 内接圆
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
    // 渲染
    CGContextFillPath(ctx);
}

@end

// ViewController.m文件
#import "ViewController.h"
#import "CustomLayer.h"  // 导入自定义CALayer头文件

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
      
    CustomLayer *customLayer = [[CustomLayer alloc] init];
    customLayer.anchorPoint = CGPointMake(0, 0);
    customLayer.position = CGPointMake(10, 40);
    customLayer.bounds = CGRectMake(0, 0, 120, 120);
    customLayer.backgroundColor = [UIColor purpleColor].CGColor;
    // 一定要调用重绘
    [customLayer setNeedsDisplay];
    [self.view.layer addSublayer:customLayer];
}

@end

　　2）代理的方法自定义图层

// ViewController.m文件
#import "ViewController.h"

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CALayer *customLayer = [[CALayer alloc] init];
    customLayer.anchorPoint = CGPointMake(0, 0);
    customLayer.position = CGPointMake(10, 200);
    customLayer.bounds = CGRectMake(0, 0, 120, 120);
    customLayer.backgroundColor = [UIColor yellowColor].CGColor;
    // 该代理不用遵守任何协议，该代理方法为NSObject的方法
    customLayer.delegate = self;
    // 一定要调用重绘
    [customLayer setNeedsDisplay];
    [self.view.layer addSublayer:customLayer];
}

#pragma mark - 代理方法<NSObject的方法>
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    // 设置填充颜色
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 内接圆
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
    // 渲染
    CGContextFillPath(ctx);
}

@end

 

四、CALayer的隐式动画

1.概念

每一个UIView内部都默认关联着一个CALayer，我们称这个Layer为Root Layer(根层)

所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画。当我们对这些非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果

2.代码实例

// ViewController.m文件
#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) CALayer *blueLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _blueLayer = [CALayer layer];
    // 设置锚点
    _blueLayer.anchorPoint = CGPointMake(0, 0);
    _blueLayer.position = CGPointMake(100, 100);
    _blueLayer.bounds = CGRectMake(0, 0, 100, 100);
    _blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    [self.view.layer addSublayer:_blueLayer];
}

#pragma mark - 点击改变一些属性
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 改变_blueLayer的位置
    if (_blueLayer.position.y <= self.view.bounds.size.height - 100) {
        _blueLayer.position = CGPointMake(_blueLayer.position.x, _blueLayer.position.y + 50);
    } else if (_blueLayer.position.y > self.view.bounds.size.height - 100) {
        _blueLayer.position = CGPointMake(_blueLayer.position.x, 100);
    }
}

@end

关闭隐式动画：

    // 开启事物
    [CATransaction begin];
    // 开闭隐式动画效果(设置为YES)
    [CATransaction setDisableActions:YES];
    
    // 改变_blueLayer的位置
    if (_blueLayer.position.y <= self.view.bounds.size.height - 100) {
        _blueLayer.position = CGPointMake(_blueLayer.position.x, _blueLayer.position.y + 50);
    } else if (_blueLayer.position.y > self.view.bounds.size.height - 100) {
        _blueLayer.position = CGPointMake(_blueLayer.position.x, 100);
    }
    
    // 提交事物
    [CATransaction commit];

3.如何查看CALayer的哪些属性有隐性动画效果

苹果官方文档搜索“CALayer Animatable Properties”，直接上图