1.初識CALayer

在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個按鈕、一個文本標(biāo)簽、一個文本輸入框、一個圖標(biāo)等等，這些都是UIView。

其實UIView之所以能顯示在屏幕上，完全是因為它內(nèi)部的一個圖層。

在創(chuàng)建UIView對象時，UIView內(nèi)部會自動創(chuàng)建一個圖層(即CALayer對象)，通過UIView的layer屬性可以訪問這個層。

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

當(dāng)UIView需要顯示到屏幕上時，會調(diào)用drawRect:方法進(jìn)行繪圖，并且會將所有內(nèi)容繪制在自己的圖層上，繪圖完畢后，系統(tǒng)會將圖層拷貝到屏幕上，于是就完成了UIView的顯示

換句話說，UIView本身不具備顯示的功能，是它內(nèi)部的層才有顯示功能

2.CALayer的基本使用

通過操作CALayer對象，可以很方便地調(diào)整UIView的一些外觀屬性，比如：
陰影
圓角大小
邊框?qū)挾群皖伾?/p>

    // 設(shè)置陰影
    // Opacity：不透明度
    _redView.layer.shadowOpacity = 1;
    //    _redView.layer.shadowOffset = CGSizeMake(10, 10);
    // 注意：圖層的顏色都是核心繪圖框架，通常。CGColor
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;
    _redView.layer.shadowRadius = 10;
    
    
    // 圓角半徑
    _redView.layer.cornerRadius = 50;
    
    // 邊框
    _redView.layer.borderWidth = 1;
    _redView.layer.borderColor = [UIColor whiteColor].CGColor;

// cornerRadiu設(shè)置控件的主層邊框
    _imageView.layer.cornerRadius = 50;
    
    NSLog(@"%@",_imageView.layer.contents)
    ;
    // 超出主層邊框的內(nèi)容全部裁剪掉
    _imageView.layer.masksToBounds = YES;
    
    // 設(shè)置邊框
    _imageView.layer.borderColor = [UIColor whiteColor].CGColor;
    _imageView.layer.borderWidth = 1;
    
    // 如何判斷以后是否需要裁剪圖片，就判斷下需要顯示圖層的控件是否是正方形。

還可以給圖層添加動畫，來實現(xiàn)一些比較炫酷的效果

 // 縮放
    [UIView animateWithDuration:1 animations:^{
        
//        _redView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
//        _redView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
        
        // 快速進(jìn)行圖層縮放,KVC
        // x,y同時縮放0.5
//        [_redView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
        
        [_redView.layer setValue:@(M_PI) forKeyPath:@"transform.rotation"];        
    }];

3.CALayer的屬性

寬度和高度
@property CGRect bounds;

位置(默認(rèn)指中點(diǎn)，具體由anchorPoint決定)
@property CGPoint position;

錨點(diǎn)(x,y的范圍都是0-1)，決定了position的含義
@property CGPoint anchorPoint;

背景顏色(CGColorRef類型)
@property CGColorRef backgroundColor;

形變屬性
@property CATransform3D transform;
邊框顏色(CGColorRef類型)
@property CGColorRef borderColor;

邊框?qū)挾?@property CGFloat borderWidth;

圓角半徑
@property CGColorRef borderColor;

內(nèi)容(比如設(shè)置為圖片CGImageRef)
@property(retain) id contents;

4.關(guān)于CALayer的疑惑

首先
CALayer是定義在QuartzCore框架中的
CGImageRef、CGColorRef兩種數(shù)據(jù)類型是定義在CoreGraphics框架中的
UIColor、UIImage是定義在UIKit框架中的

其次
QuartzCore框架和CoreGraphics框架是可以跨平臺使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用

為了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

5.UIView和CALayer的選擇

通過CALayer，就能做出跟UIImageView一樣的界面效果

既然CALayer和UIView都能實現(xiàn)相同的顯示效果，那究竟該選擇誰好呢？
其實，對比CALayer，UIView多了一個事件處理的功能。也就是說，CALayer不能處理用戶的觸摸事件，而UIView可以
所以，如果顯示出來的東西需要跟用戶進(jìn)行交互的話，用UIView；如果不需要跟用戶進(jìn)行交互，用UIView或者CALayer都可以
當(dāng)然，CALayer的性能會高一些，因為它少了事件處理的功能，更加輕量級

// 創(chuàng)建圖層
    CALayer *layer = [CALayer layer];
    
    layer.frame = CGRectMake(50, 50, 200, 200);
    
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    // 設(shè)置圖層內(nèi)容
    layer.contents = (id)[UIImage imageNamed:@"阿貍頭像"].CGImage;
    
    
    [self.view.layer addSublayer:layer];

6.position和anchorPoint

CALayer有2個非常重要的屬性：position和anchorPoint

@property CGPoint position;
用來設(shè)置CALayer在父層中的位置
以父層的左上角為原點(diǎn)(0, 0)

@property CGPoint anchorPoint;
稱為“定位點(diǎn)”、“錨點(diǎn)”
決定著CALayer身上的哪個點(diǎn)會在position屬性所指的位置
以自己的左上角為原點(diǎn)(0, 0)
它的x、y取值范圍都是0~1，默認(rèn)值為（0.5, 0.5）
添加一個紅色圖層到綠色圖層上，紅色圖層顯示到什么位置，由position屬性決定

假設(shè)紅色圖層的position是（100，100）
到底把紅色圖層的哪個點(diǎn)移動到（100，100）的坐標(biāo)位置，錨點(diǎn)。
紅色圖層的錨點(diǎn)是（0，0）

1.png

紅色圖層的錨點(diǎn)是（0.5，0.5）

2.png

紅色圖層的錨點(diǎn)是（1，1）

3.png

紅色圖層的錨點(diǎn)是（0.5，0）

4.png

7.隱式動畫

每一個UIView內(nèi)部都默認(rèn)關(guān)聯(lián)著一個CALayer，我們可用稱這個Layer為Root Layer（根層）

所有的非Root Layer，也就是手動創(chuàng)建的CALayer對象，都存在著隱式動畫

什么是隱式動畫？
當(dāng)對非Root Layer的部分屬性進(jìn)行修改時，默認(rèn)會自動產(chǎn)生一些動畫效果
而這些屬性稱為Animatable Properties(可動畫屬性)

列舉幾個常見的Animatable Properties：
bounds：用于設(shè)置CALayer的寬度和高度。修改這個屬性會產(chǎn)生縮放動畫
backgroundColor：用于設(shè)置CALayer的背景色。修改這個屬性會產(chǎn)生背景色的漸變動畫
position：用于設(shè)置CALayer的位置。修改這個屬性會產(chǎn)生平移動畫

#define angle2radion(angle) ((angle) / 180.0 * M_PI)
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    CALayer *layer = [CALayer layer];
    
    layer.position = CGPointMake(200, 150);
    
//    layer.anchorPoint = CGPointZero;
    
    layer.bounds = CGRectMake(0, 0, 80, 80);
    
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    [self.view.layer addSublayer:layer];
    
    _layer = layer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 旋轉(zhuǎn)
        // 1 ~ 360
        
     self.layer.transform = CATransform3DMakeRotation(angle2radion(arc4random_uniform(360) + 1), 0, 0, 1);
    
    self.layer.position = CGPointMake(arc4random_uniform(200) + 20, arc4random_uniform(400) + 50);
    
    self.layer.cornerRadius = arc4random_uniform(50);
    
    self.layer.backgroundColor = [self randomColor].CGColor;
    
    self.layer.borderWidth = arc4random_uniform(10);
    self.layer.borderColor = [self randomColor].CGColor;
    
}

- (UIColor *)randomColor
{
    
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    

    return [UIColor colorWithRed:r green:g blue:b alpha:1];
}

可以通過動畫事務(wù)(CATransaction)關(guān)閉默認(rèn)的隱式動畫效果

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