认识CALayer

/*

CALayer: 负责视图中显示的内容和动画

UIView: 负责监听和响应事件

没有CALayer, UIView就不能显示东西

也就是说UIView不具备显示的功能, CALayer才有.

下面是CALayer的一些基本用法

*/

/*

01 - UIView图层

标明: 我的_blueView是拖入的控件, 在sb中

*/

 1 // ------------------- 阴影 -------------------
 2     // 阴影颜色
 3     _blueView.layer.shadowColor = [UIColor redColor].CGColor;
 4
 5     // 阴影不透明度, 默认透明0, 不透明1
 6     _blueView.layer.shadowOpacity = 1;
 7
 8     // 阴影偏移
 9     _blueView.layer.shadowOffset = CGSizeMake(0, 0);
10
11     // 阴影半径
12     _blueView.layer.shadowRadius = 50;
13
14
15     // ------------------- 圆角 -------------------
16     _blueView.layer.cornerRadius = 50;
17
18     // ------------------- 边框 -------------------
19     // 边框颜色
20     _blueView.layer.borderColor = [UIColor whiteColor].CGColor;
21
22     // 边框宽度
23     _blueView.layer.borderWidth = 2;

/*

02 - UIImageView图层和UIView图层的用法基本上是一样的

标注: _imageView为拖入的控件, 在sb中

*/

 1 _imageView.layer.cornerRadius = 50;
 2
 3     // 必须设置这个属性, 图片才会被裁剪
 4     _imageView.layer.masksToBounds = YES;
 5
 6     _imageView.layer.borderWidth = 2;
 7     _imageView.layer.borderColor = [UIColor redColor].CGColor;
 8
 9     // 打印这个是为了证明图片放到了layer的contens上
10     NSLog(@"%@, %@", _imageView.layer.sublayers, _imageView.layer.contents);

/*

03 - 自定义图层

*/

 1 // 创建一个图层
 2     CALayer * layer = [CALayer layer];
 3
 4     // 设置位置
 5     layer.position = CGPointMake(300, 100);
 6
 7     // 设置大小
 8     layer.bounds = CGRectMake(0, 0, 100, 100);
 9
10     // 设置颜色
11     layer.backgroundColor = [UIColor blueColor].CGColor;
12
13     // 设置内容
14 //    layer.contents = CFBridgingRelease([UIImage imageNamed:@"阿狸头像"].CGImage);
15     layer.contents = (id)[UIImage imageNamed:@"阿狸头像"].CGImage;
16
17     // 添加图层
18     [self.view.layer addSublayer:layer];

/*

04 - 位置和锚点

position(位置): 它决定着视图在什么位置

anchorPoint(锚点): 它决定着视图上的哪个点在position上

*/

 1 CALayer * blueLayer = [CALayer layer];
 2     blueLayer.position = CGPointMake(0, 0);
 3     blueLayer.bounds = CGRectMake(0, 0, 200, 200);
 4
 5     // 设置锚点位置为(0, 0), 这样整个层才能在屏幕上完全的显现出来
 6     blueLayer.anchorPoint = CGPointMake(0, 0);
 7     blueLayer.backgroundColor = [UIColor blueColor].CGColor;
 8     [self.view.layer addSublayer:blueLayer];
 9
10     CALayer * redlayer = [CALayer layer];
11     redlayer.position = CGPointMake(200, 200);
12     redlayer.bounds = CGRectMake(0, 0, 100, 100);
13
14     // 锚点取值([0, 1], [0, 1]), 默认为(0.5, 0.5)
15     redlayer.anchorPoint = CGPointMake(1, 0.5);
16     redlayer.backgroundColor = [UIColor redColor].CGColor;
17     [self.view.layer addSublayer:redlayer];

/*

05 - 隐式动画

当更改一些非根层的一些属性时, 默认会产生一些动画效果, 这就是隐式动画

如:

bounds: 用于设置CALayer的宽度和高度, 修改这个属性会产生缩放动画

backgroundColor: 用于设置CALayer的背景色, 修改这个属性会产生背景色的渐变动画

position: 用于设置CALayer的位置, 修改这个属性会产生平移动画.

*/

 1 // 创建图层
 2     CALayer * layer = [CALayer layer];
 3
 4     // 设置大小
 5     layer.bounds = CGRectMake(0, 0, 100, 100);
 6
 7     // 设置颜色
 8     layer.backgroundColor = [UIColor redColor].CGColor;
 9
10     // 添加图层
11     [self.view.layer addSublayer:layer];
12
13     _layer = layer;
14
15 // 当触摸屏幕时就会出现隐式动画
16 - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
17
18     // 开启事务
19     [CATransaction begin];
20
21     // 取消隐式动画
22 //    [CATransaction setDisableActions:YES];
23     // 更改位置
24 //    _layer.position = CGPointMake(200, 200);
25
26     // 添加边框
27     CGFloat r = arc4random_uniform(256) / 255.0;
28     CGFloat g = arc4random_uniform(256) / 255.0;
29     CGFloat b = arc4random_uniform(256) / 255.0;
30 //    _layer.borderColor = [UIColor colorWithRed:r green:g blue:b alpha:1].CGColor;
31     _layer.borderWidth = arc4random_uniform(5) + 1;
32
33     // 更改背景色
34     _layer.backgroundColor = [UIColor colorWithRed:r green:g blue:b alpha:1].CGColor;
35
36     // 随点击移动
37     UITouch * touch = [touches anyObject];
38     CGPoint pos = [touch locationInView:self.view];
39     _layer.position = pos;
40
41     // 提交事务
42     [CATransaction commit];
43 }

/*

06 - 图层动画

*/

 1 // 触摸屏幕开始图层动画
 2 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
 3
 4     [UIView animateWithDuration:1 animations:^{
 5
 6         // 绽放
 7 //        _imageView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
 8 //        [_imageView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1)] forKeyPaht:@"transform"];
 9 //        [_imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
10
11         // 旋转
12 //        _imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
13 //        [_imageView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)] forKeyPath:@"transform"];
14 //        [_imageView.layer setValue:@M_PI forKeyPath:@"transform.rotation"];
15
16         // 平移
17 //        _imageView.layer.transform = CATransform3DMakeTranslation(100, 100, 0);
18 //        [_imageView.layer setValue:[NSValue valueWithCGPoint:CGPointMake(100, 100)] forKeyPath:@"transform.translation"];
19         [_imageView.layer setValue:@100 forKeyPath:@"transform.translation.y"];
20
21     }];
22
23 }

注意点:

CALayer 和 UIView

通过CALayer可以做出和UIView一样的界面效果

UIView可以进行用户交互, 有事件处理的功能, 而CALayer没有.

但是CALayer更轻量级.