iOS邊練邊學--CALayer，非根層隱式動畫，鐘錶練習

標籤：

一、CALayer

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

二、CALayer的基本使用

　　　

三、關於CALayer的疑惑---用CGImage、CGColor 而不用UIImage、UIColor

• 首先CGImageRef、CGColorRef兩種資料類型是定義在CoreGraphics架構中的
• UIColor、UIImage是定義在UIKit架構中
• 其次QuartzCore架構和CoreGraphics架構是可以跨平台使用的，在iOS和Mac OS X上都能使用，但是UIKit只能在iOS中使用
• 為了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

四、UIView和CALayer的選擇

• 既然CALayer和UIView都能實現相同的顯示效果，那究竟該選擇誰好呢？

• • 其實，對比CALayer，UIView多了一個事件處理的功能。也就是說，CALayer不能處理使用者的觸摸事件，而UIView可以

• • 所以，如果顯示出來的東西需要跟使用者進行互動的話，用UIView；如果不需要跟使用者進行互動，用UIView或者CALayer都可以

• • 當然，CALayer的效能會高一些，因為它少了事件處理的功能，更加輕量級
• 下面是建立新CALayer的代碼，來展示圖片

五、CALayer的兩個重要屬性 position 和 anchorPoint

• @property CGPoint position;
  • 用來設定CALayer在父層中的位置
  • 以父層的左上方為原點（0，0）
• @property CGPoint anchorPoint;
  • 稱為“錨點”、“錨點”
  • 決定著CALayer身上的那個點會在position屬性所指的位置
  • 以自己的左上方為原點（0，0）
  • 他的x、y取值範圍都是0~1，預設值為（0.5，0.5）

六、非根層的隱式動畫

• 每一個UIView內部都預設關聯著一個CALayer，我們可以稱這個Layer為Root Layer（根層）
• 所有的非Root Layer，也就是手動建立的CALayer對象，都存在著隱式動畫

　　什麼是隱式動畫？

　　當對非Root Layer的部分屬性進行修改時，預設會自動產生一些動畫效果

　　而這些屬性稱為Animatable Properties（可動畫屬性）

• 代碼中實現的是點擊螢幕，CALayer的圓角，顏色，position，邊框等隨機改變並做動畫

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        CALayer *layer = [CALayer layer];    layer.bounds = CGRectMake(0, 0, 80, 80);    layer.backgroundColor = [UIColor redColor].CGColor;    layer.anchorPoint = CGPointMake(0, 0);    layer.position = CGPointMake(150, 300);        [self.view.layer addSublayer:layer];    _layer = layer;}- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    _layer.transform = CATransform3DMakeRotation(angle2rotation(arc4random_uniform(360)), 0, 0, 1);            _layer.backgroundColor = [self randomColor].CGColor;        _layer.position = CGPointMake(arc4random_uniform(300) + 100, arc4random_uniform(500) + 100);    _layer.borderWidth = arc4random_uniform(20);    _layer.borderColor = [self randomColor].CGColor;    _layer.cornerRadius = arc4random_uniform(50);}- (UIColor *)randomColor{    CGFloat r = arc4random_uniform(256) / 255.0;    CGFloat g = arc4random_uniform(256) / 255.0;    CGFloat b = arc4random_uniform(256) / 255.0;    return [UIColor colorWithRed:r green:g blue:b alpha:1];}

七、鐘錶的練習--痛點是通過NSCalendar擷取目前時間

  1 #import "ViewController.h"  2 // 通過秒數計算秒針轉過的角度  3 #define secondRotation(second) ((second * 6) / 180.0 * M_PI)  4 // 通過分數計算分針轉過的角度  5 #define minuteRotation(minute) ((minute * 6) / 180.0 * M_PI)  6 // 通過時數計算時針轉過的角度  7 #define hourRotation(hour) ((hour * 30) / 180.0 * M_PI)  8   9 @interface ViewController () 10 @property (weak, nonatomic) IBOutlet UIImageView *clockView; 11 /** second */ 12 @property(nonatomic,strong) CALayer *secondL; 13 /** minute */ 14 @property(nonatomic,strong) CALayer *minuteL; 15 /** hour */ 16 @property(nonatomic,strong) CALayer *hourL; 17 @end 18  19 @implementation ViewController 20  21 - (void)viewDidLoad { 22     [super viewDidLoad]; 23      24     // 添加秒針 25     [self setUpSecondLayer]; 26      27     // 添加時針 28     [self setUpHourLayer]; 29      30     // 添加分針 31     [self setUpMinuteLayer]; 32     [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES]; 33     [self timeChange]; 34 } 35  36 - (void)timeChange 37 { 38     // 擷取目前時間，通過秒數計算秒針的旋轉弧度 39     // 當前的日曆對象，從日曆對象中擷取時間組件 40     NSCalendar *calendar = [NSCalendar currentCalendar]; 41      42     // 行事曆群組件包含了：年月日時分秒等 43     // 經驗：以後枚舉中有移位元運算符，通常可以使用並運算（|） 44     NSDateComponents *compontent = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]]; 45      46     NSInteger second = compontent.second; 47     NSInteger minute = compontent.minute; 48     NSInteger hour = compontent.hour; 49      50     _hourL.transform = CATransform3DMakeRotation(hourRotation(hour) + minuteRotation(minute) / 12, 0, 0, 1); 51     _minuteL.transform = CATransform3DMakeRotation(minuteRotation(minute) + secondRotation(second) / 60, 0, 0, 1); 52     _secondL.transform = CATransform3DMakeRotation(secondRotation(second), 0, 0, 1); 53  54 } 55  56 - (void)setUpHourLayer 57 { 58     // 擷取鐘錶的寬高 59     CGFloat clockWH = _clockView.frame.size.height * 0.5; 60     // 建立時針的圖層 61     CALayer *hourL = [CALayer layer]; 62     hourL.bounds = CGRectMake(0, 0, 6, clockWH - 40); 63     hourL.backgroundColor = [UIColor blackColor].CGColor; 64     hourL.position = CGPointMake(clockWH, clockWH); 65     hourL.anchorPoint = CGPointMake(0.5, 1); 66     hourL.cornerRadius = 3; 67      68     [_clockView.layer addSublayer:hourL]; 69     _hourL = hourL; 70 } 71  72 - (void)setUpMinuteLayer 73 { 74     // 擷取鐘錶的寬高 75     CGFloat clockWH = _clockView.frame.size.height * 0.5; 76     // 建立分針的圖層 77     CALayer *minuteL = [CALayer layer]; 78     minuteL.bounds = CGRectMake(0, 0, 6, clockWH - 30); 79     minuteL.backgroundColor = [UIColor blackColor].CGColor; 80     minuteL.position = CGPointMake(clockWH, clockWH); 81     minuteL.anchorPoint = CGPointMake(0.5, 1); 82     minuteL.cornerRadius = 3; 83      84     [_clockView.layer addSublayer:minuteL]; 85     _minuteL = minuteL; 86 } 87  88 - (void)setUpSecondLayer 89 { 90     // 擷取鐘錶的寬高 91     CGFloat clockWH = _clockView.frame.size.height * 0.5; 92     // 建立秒針的圖層 93     CALayer *secondL = [CALayer layer]; 94     secondL.bounds = CGRectMake(0, 0, 2, clockWH - 20); 95     secondL.backgroundColor = [UIColor redColor].CGColor; 96     secondL.position = CGPointMake(clockWH, clockWH); 97     secondL.anchorPoint = CGPointMake(0.5, 1); 98      99     [_clockView.layer addSublayer:secondL];100     _secondL = secondL;101 }102 103 - (void)didReceiveMemoryWarning {104     [super didReceiveMemoryWarning];105     // Dispose of any resources that can be recreated.106 }107 108 @end

View Code

 

 

iOS邊練邊學--CALayer，非根層隱式動畫，鐘錶練習