01-动画的了解之CALayer

1.CALayer

1.1 CALayer的了解

在 iOS框架中，你能看得见摸得着的东西基本上都是UIView，例如按钮、文本、输入框、图标等都是UIView。其实UIView之所以能显示在屏幕上，是因为它内部有一个图层;在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个图层：

@property(nonatomic,readonly,strong)                 CALayer  *layer; 

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是完成了UIView的显示。

1.2 CALayer的基本使用

通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：

• 阴影
• 圆角大小
• 边框宽度和颜色
• …
• 还可以给图层添加动画，来实现一些比较酷炫的效果。
  例如使用demo如下：
  

1.3 layer的transform

我们可以对layer的transform赋值，从而可以让视图进行平移、缩放、旋转的效果，如下图：

layer的transform的类型是CATransform3D的类型。 3D就是由（x,y,z）组成的3维图像，看下图吧：

transform 3D进行常用的方法如下：

• 平移：

CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz)
CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx,
    CGFloat ty, CGFloat tz)

• 旋转

CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,
    CGFloat y, CGFloat z)
CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat tx,
    CGFloat ty, CGFloat tz)

• 缩放

CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz)
CA_EXTERN CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx,
    CGFloat sy, CGFloat sz)

方法中，带make的只能进行一次变换；如果不带make的方法，需要传入一个tranform，从而根据传入的transform进行图形变换。

使用案例如下：

transform 3D除了可以用方法赋值，也可以用kvc快速赋值：

• 用kvc设置的tranform3D的key如下图：
  
• 注意点：
  

1.4 layer的position和anchorPoint

CALayer有2个非常重要的属性：position和anchorPoint。

• @property CGPoint position

这个属性用来设置CALayer在父层中所在的位置
如果不设置，就默认为父层中左上角为原点(0,0)

• @property CGPoint anchorPoint

这个属性成为"定位点"或者“锚点”
它决定了CALayer身上的哪个点会在position属性所指的位置上
以自己的左上角为原点（0,0）；以自己的右下角为终点（1，1）
anchorPoint的x、y取值范围都是0~1，默认值为（0.5， 0.5）

position和anchorPoint的显示图解：
**需要注意的一点是：position和anchorPoint无论如何，所在的位置都是重合的。**例如添加一个红色图层到绿色图层上，红色图层显示到什么位置上，有position属性决定的，假设红色图层的position是(100, 100),：
（1）红色图层的anchorPoint是(0,0)，那么显示的情况如下：

（2）红色图层的anchorPoint是(0.5, 0.5) , 那么显示如下：

（3）红色图层的anchorPoint是(1, 1), 显示如下：

（4）红色图层的anchorPoint是（0.5， 0），显示如下：

（5）如果红色图层的anchorPoint是（1，0.5），显示如下：

1.5 UIView和CALayer的选择

通过CALayer,就能做出跟UIImageView一样的页面，既然CALayer和UIView都能实现相同的显示效果，那么应该如何选择呢？

• 相比于CALayer，UIView多了一个事件处理的功能，也就是说，CALayer不能处理用户的触摸事件，而UIView可以；
• 如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要进行交互，用UIView或者CALayer都可以；
• 当然，CALayer的性能会高一点儿，因为它少了事件处理的功能，更轻量一些；但是扩展性也会稍微差一些。

2.动画

2.1 隐式动画

每一个UIView内部都有默认关联一个CALayer，我们可以称这个layer为"RootLayer"(根层)；所有的非Root Layer，即所有手动创建的CALayer对象，都存在着隐式动画。

什么是隐式动画？

当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果；
而这些属性称为Animatable Properties（可动画属性）

列举几个常见的Animatable Properties:

bounds: 用于设置CALayer的宽度和高度，修改这个属性会产生缩放动画；
backgroudColor：用于设置CALayer的背景色，修改这个属性会产生背景色的渐变；
position：用于设置CALayer的位置，修改这个属性会产生平移动画。

如何取消隐式动画？

[CATransaction setDisableActions:YES];

如何设置隐式动画的时间？

[CATransaction setAnimationDuration:3];

如何设置部分功能的隐式动画？

//开始隐式动画的设置
[CATransaction begin];
.....
//提交隐式动画的设置
[CATransaction commit];

参考代码如下：

#import "ViewController.h"


@interface ViewController ()
//手动创建的layer
@property (nonatomic, strong) CALayer *layer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //添加layer
    self.layer = [[CALayer alloc] init];
    self.layer.frame = CGRectMake(0, 0, 100, 100);
    self.layer.position = CGPointMake(0, 0 );
    self.layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:self.layer];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //设置位移动画的时间为3秒
    [CATransaction begin];
    [CATransaction setAnimationDuration:3];
    self.layer.position = self.view.center;
    [CATransaction commit];
    
    //设置修改背景色动画的时间为5秒
    [CATransaction begin];
    [CATransaction setAnimationDuration:5];
    self.layer.backgroundColor = [UIColor greenColor].CGColor;
    [CATransaction commit];
}