概念
- CA -> Core Animation (核心动画) 相对更底层. CALayer负责视图中显示内容和动画.所有动画都是作用在CALayer上的. UIView负责监听和相应事件.UIView是更高层的封装
- 在 iOS 中,你能看得见,摸得着的东西基本上都是UIView.比如一个按钮,一个文本标签,一个文本输入框, 一个图标等.这些都是UIView,其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时, UIView内部会自动创建一个图层 (即CALayer对象), 通过UIView的layer属性即可访问这个图层.当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView得显示.换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能.
- 首先 : CALayer是定义在QuartzCore框架中. CGImageRef, CGColorRef两种数据类型是定义在CoreGraphics框架中的. UIColor, UIImage是定义在UIKit框架中的. 其次 : QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用 (C语言编写) 但是UIKit只能在iOS中使用 (OC编写). 因此 : 为了保证可移植性,QuartzCore不能使用UIImage,UIColor,只能使用CGImageRef,CGColorRef.
- 隐式动画 (可动画属性) 什么是隐式动画 ? 当对非 Root Layer的部分属性进行修改时, 默认会自动产生一些动画效果, 而这些属性称为Animatable Properties (可动画属性). 如 : bounds : 用于设置CALayer的宽度和高度,修改这个属性会产生缩放动画. background : 用户设置CALayer的背景色, 修改这个属性会产生背景色的渐变动画. position : 用于设置CALayer的位置,修改这个属性会产生平移动画.
- 可以通过动画事务 (CATransaction) 关闭默认的隐式动画效果. 代码参考如下 :
[CATransaction begin];
[CATransaction setDisableActions:YES];
// your code …
[CATransaction commit];
- UIView和CALayer的选择. 通过CALayer就能做出跟UIView一样的界面效果.都能实现相同的显示效果,那究竟该选择谁好呢? 其实,对比CALayer,UIView多了一个事件处理的功能,也就是说,CALayer不能处理用户的触摸事件,而UIView可以.所以,如果显示出来的东西需要跟用户进行交互的话,用UIView.UIView用来接收和处理系统事件,触摸事件.如果不需要跟用户进行交互,用UIView或者CALayer都可以.当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级
二、CALayer属性
- 设置图层的尺寸，高度和宽度
@property CGRect bounds;
- 设置位置
- 方式1：
用来设置CALayer在父层中的位置,position相当于UIView控件的center属性
@property CGPoint position;
称为 "定位点" / "锚点", 它的取值范围是0 ~ 1, 默认值为0.5. 可以通过该属性修改position的含义
@property CGPoint anchorPoint;
- 方式2： 直接设置frame（不建议使用）
layer.frame = CGRectMake(50, 50, 200, 200);
- 背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;
转换CGColor类型方法两种：
(__bridge CGColorRef _Nullable)([UIColor redColor]);
[UIColor redColor].CGColor;
- 设置边框颜色 （ border 边界）
redView.layer.borderColor = [UIColor whiteColor].CGColor;
- 设置边框宽度
redView.layer.borderWidth = 15;
- 设置阴影效果
阴影效果shadowColor、shadowOffset、shadowOpacity属性必须同时设置后才可以看到
- 设置阴影的颜色, 注意UIKit框架中的颜色不能直接设置给CGColorRef，需要.CGColor转换
self.demoView.layer.shadowColor = [UIColor yellowColor].CGColor;
- 设置阴影的偏移
self.demoView.layer.shadowOffset = CGSizeMake(5, 5);
redView.layer.shadowOffset = CGSizeZero;
- 设置阴影的透明度(layer的opacity相当于view的alpha)
self.demoView.layer.shadowOpacity = 1.0;
- 设置阴影半径
self.demoView.layer.shadowRadius = 10;
- 设置圆角效果，圆角矩形，layer剪裁
- 设置圆角半径
redView.layer.cornerRadius = 125;
- 如果控件有两层及以上就需要下面这个属性进行遮盖
redView.layer.masksToBounds = YES;
已知控件label有两层，imageView，Button，UIView默认就一层，直接设置圆角就可以裁掉，但是各控件加了图片就会变成两层，依然需要masksToBounds属性；
masksToBounds方法告诉layer将位于它之下的layer都遮盖住，这样会使圆角不被遮，但是这样会导致阴影效果没有，可以再添加一个SubLayer，添加阴影。
此处可以和UIView的clipToBounds来比较记忆（clipToBounds为yes会使其上的内容包括子视图不能超出边界）
控件截图裁剪的三种方法：
- 给layer设置圆角半径layer.cornerRadius
- view的clipToBounds 裁剪多余边缘
设置photoView中的所有子控件如果超出了photoView的有效范围,那么超出的部分将不会显示
photoView.clipsToBounds = YES ;
设置两边多余地方不裁剪
button.imageView.clipsToBounds = NO;
路径绘制，绘图剪裁
矩形图片剪裁成圆并且外面设置圆环并存储给layer设置背景图片，设置内容层（需要桥接）
redView.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"header"].CGImage);
__bridge类型表达式的作用一般就是把 Core Foundation 中的数据类型转换成 Foundation 中的类型, 桥接的时候也会设置到一些所有权的转换等。
给UIView设置背景图片的三种方式
- 设置layer的contents属性
redView.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"header"].CGImage);
- 调用自定义view的drawRect: 方法进行绘制
- 设置view的backgroundColor，调用colorWithPatternImage来进行设置
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"me"]];
- 可动画属性（隐式动画）
凡是文档中有 “animatable” 字样的属性都是可动画属性
当对以下非 Root Layer的部分属性进行修改时, 默认会自动产生一些动画效果
UIView 默认情况下禁止了 layer 动画，但是在 animation block 中又重新启用了它们
（1）bounds : 用于设置CALayer的宽度和高度,修改这个属性会产生缩放动画.
（2）backgroundColor: 用户设置CALayer的背景色, 修改这个属性会产生背景色的渐变动画
（3）position : 用于设置CALayer的位置,修改这个属性会产生平移动画
（4）hidden：溶解消失动画关闭隐式动画，关闭可动画属性方法，通过动画事务 (CATransaction)
[CATransaction begin];
[CATransaction setDisableActions:YES];
//your code …e.g.:
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];
- 3D放射形变属性（和view的transform用法一样，也有make和非make方法）
@property CATransform3D transform;
（1） 平移（当没有3D旋转的时候z值没有效果）
CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);
self.blueLayer.transform = CATransform3DTranslate(self.blueLayer.transform, 10, 10, 10);
（2） 缩放
CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);
self.blueLayer.transform = CATransform3DScale(self.blueLayer.transform, 0.8, 0.8, 0.8);
（3） 旋转
以哪个轴的哪个点进行旋转，以一个轴旋转，轴上的任何点都一样，参数填1就可以
CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
self.blueLayer.transform = CATransform3DRotate(self.blueLayer.transform, M_PI_4 * 0.5, 1, 1, 1);
注意：上面属性如果同时使用非make方式，其中一个使用了make会导致动画只执行了make那个属性，其它属性不会再继续执行，可以通过KVC模式解决
[self.myLayer setValue:@(rotate) forKeyPath:@"transform.rotation"];
二、方法
1、 创建自定义图层对象
+ (instancetype)layer;
2、 添加子图层
- (void)addSublayer:(CALayer *)layer;
3、将layer上的所有内容渲染到图形上下文中
CGContextRef ctx = UIGraphicsGetCurrentContext();
[redView.layer renderInContext:ctx];
4、添加动画、开始动画
一个layer中可以添加多个核心动画对象
- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key;
5、关闭动画、停止动画、移除动画（key值与开始动画的key对应）
- (void)removeAnimationForKey:(NSString *)key;
6、layer动画移动后回到原位置的解决办法：
- 方法一 ：layer 的真实位置还在原来的位置
// 设置layer执行完毕动画后,不要回去
anim1.removedOnCompletion = NO; // 当核心动画执行完毕后不要从layer中移除
anim1.fillMode = kCAFillModeForwards;
- 方法二：layer的真实位置就是当前的位置 （该方法可以让layer和View层一起过去）
// 为animation对象设置代理
// 这里的代理没有协议, 叫做隐式代理，里面有两种方法可以选择实现
anim1.delegate = self;
// 动画结束执行
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
self.redView.center = CGPointMake(150, 250);
}
控件有两个图层：
展示图层, 在后台移动图层中的内容
- (id)presentationLayer;
模型图层, 就是移动前原本的图层位置，移动后presentationLayer会回到该图层位置
- (id)modelLayer;
