關於動畫CALayer

關於CALayer

• 在iOS中，UIView之所以能顯示在屏幕上，完全是因爲它內部的一個圖層
• 在創建UIView對象時，UIView內部會自動創建一個圖層（即CALayer對象），通過UIView的layer屬性可以訪問到這個層
• 當UIView需要顯示到屏幕上時，會調用drawRect:方法進行繪圖，並且會將所有內容繪製在自己的圖層上，繪圖完畢後，系統會將圖層拷貝到屏幕上，於是就完成了UIView的顯示
• UIView本事是不具有顯示功能的，是因爲內部的層纔有了顯示功能

關於CALayer的疑惑

• CALayer是定義在QuartzCore框架中
• CGImageRef、CGColorRef倆種數據類型是定義在CoreCraphics框架中

• UIImage、UIColor是定義在UIKit中

• QuartzCore框架和CoreGraphics框架是可以跨平臺使用的，在iOS和Mac OS X上都能使用

• 但是UIKit只能在iOS中使用
• 爲了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

//創建
CALayer *layer = [CALayer layer];
//尺寸（默認和控件一樣大）
layer.frame = CGRectMake(50, 50, 200, 200);
//顏色（默認是透明的）
layer.backgroundColor = [UIColor redColor].CGColor;
//設置圖層圖片
layer.contents = (id)([UIImage imageNamed:@"s.jpg"].CGImage);
//layer只能添加在layer上面
[self.view.layer addSublayer:layer];

UIView和CALayer的選擇

• 通過CALayer，就能做出和UIView一樣的界面效果
• 對比CALayer，UIView多了一個事件處理的功能，CALayer不能處理用戶的觸摸事件，而UIView可以
• 所有，如果顯示出來的東西需要和用戶進行交互的話，用UIView；如果不需要和用戶交互，UIView和CALayer都可以
• CALayer的性能會高一些，因爲它少了事件處理功能，更加輕量級

CALayer基本使用

• 通過操作CALayer對象，可以調整UIView的一些外觀

  • 陰影
  • 圓角大小
  • 邊框寬度和顏色
    

    //陰影（不透明度）
    self.testView.layer.shadowOpacity = 1;
    //偏移量
    self.testView.layer.shadowOffset = CGSizeMake(10, -10);
    //陰影顏色
    self.testView.layer.shadowColor = [UIColor yellowColor].CGColor;
    //陰影半徑
    self.testView.layer.shadowRadius = 10;
    // 圓角半徑
    self.testView.layer.cornerRadius = 50;
    
    //關於UIImageView
    //cornerRadius：設置控件的主層邊框
    self.testImageView.layer.cornerRadius = 50;
    //超出主層邊框的內容全部裁剪掉
    self.testImageView.layer.masksToBounds = YES;
    
    //設置邊框
    self.testImageView.layer.borderColor = [UIColor orangeColor].CGColor;
    self.testImageView.layer.borderWidth = 2;

• 給圖層添加動畫，實現一些效果

//x軸是上下翻轉
//y軸是左右翻轉
//z軸是中心轉
self.testImageView.layer.transform = CATransform3DMakeRotation(M_PI, 1,1, 0);
//縮放
self.testImageView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);

//利用KVC做縮放
//注：給對象的哪個屬性賦值，就寫到keyPath裏面
//注：value的值一定是屬性的類型才行
//KVC的好處：利用KVC可以快速的進行二維旋轉和，寬,高同時縮放
[self.testImageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
//利用KVC做旋轉
[self.testImageView.layer setValue:@0.5 forKeyPath:@"transform.rotation"];

position 和anchorPoint

• position
  
  • 用來設置CALayer在父層中的位置
  • 以父層的左上角爲原點（0，0）
• anchorPoint(定位點、錨點)
  
  • 決定CALayer身上的哪個點會在position屬性所指的位置
  • 以自己的左上角爲原點（0，0）
  • 它的x，y取值範圍都是0~1，默認值（0.5，0.5）
  • 一般旋轉等動畫都是按錨點來旋轉的

關於anchorPoint的示意圖

關於position 和anchorPoint的示意圖
藍色圖層在紅色圖層上面，藍色圖層的position是（100，100）

1、當藍色圖層的anchorPoint是（0，0）時

2、當藍色圖層的anchorPoint是（0.5，0.5）時

3、當藍色圖層的anchorPoint是（1，1）時

4、當藍色圖層的anchorPoint是（0.5，0）時

隱式動畫

• 每一個UIView內部都默認關聯着一個CALayer,這個Layer層爲Root Layer（根層）
• 所有的非Root Layer，也就是手動創建的CALayer對象，都存在隱式動畫
• 什麼是隱式動畫
  
  • 當對非Root Layer的部分屬性進行修改時，不用添加動畫，默認會產生一些動畫效果
  • 而這些屬性稱爲animatable Properties(可動畫屬性)

- (void)setUp{
    CALayer *layer = [CALayer layer];
    layer.position = CGPointMake(200, 200);
    layer.anchorPoint = CGPointZero;
    layer.bounds = CGRectMake(0, 0, 150, 150);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
    _layer = layer;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    _layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
}