CALayer實例一(時鐘)

UIView和CALayer是相互依賴的關係。UIView依賴與calayer提供的內容，CALayer依賴uivew提供的容器來顯示繪製的內容。歸根到底CALayer是這一切的基礎，如果沒有CALayer，UIView自身也不會存在，UIView是一個特殊的CALayer實現，添加了響應事件的能力。下面使用 CALayer 實現了時鐘的功能。

界面效果如下：

代碼如下：

//
//  ViewController.m
//  時鐘
//  Created by pkxing on 14/12/8.
//  Copyright (c) 2014年 夢醒. All rights reserved.
//

#define angle2radian(x) ((x)/ 180.0 * M_PI)

#define CZSecondAngle (2 * M_PI / 60) // 秒針每一秒走6度
#define CZMinusAngle  (2 * M_PI / 3600) // 分針每一秒走的度數
#define CZHourAngle (2 * M_PI / (3600 * 120)) // 時針每一秒走的度數
// 每小時時鐘轉多少度
#define  CZPerHourA  30

#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,weak) CALayer *secondLayer;
@property(nonatomic,weak) CALayer *minusLayer;
@property(nonatomic,weak) CALayer *hourLayer;
@property(nonatomic,weak) CALayer *clockLayer;
@end

@implementation ViewController

/**
 *  懶加載時鐘圖層
 */
- (CALayer *)clockLayer {
    if (_clockLayer == nil) {
        CGFloat width = 200.0f;
        CALayer *clockLayer = [CALayer layer];
        clockLayer.position = self.view.center;
        clockLayer.backgroundColor = [UIColor whiteColor].CGColor;
        clockLayer.bounds = CGRectMake(0, 0, width, width);
        clockLayer.contents = (id)([UIImage imageNamed:@"鐘錶"].CGImage);
        [self.view.layer addSublayer:clockLayer];
        _clockLayer = clockLayer;
    }
    return _clockLayer;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    NSDate *date = [NSDate date];
    NSCalendar *calendar = [NSCalendar currentCalendar];
    NSDateComponents *components = [calendar components:NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond fromDate:date];
    
    NSInteger second = components.second;
    NSInteger hour = components.hour;
    NSInteger minus = components.minute;
    
    CGFloat width = self.clockLayer.bounds.size.width;
    // 秒針
    self.secondLayer = [self layerWithPosition:CGPointMake(width * 0.5, width * 0.5) bounds:CGRectMake(0, 0, 3, 80) backgroundColor:[UIColor redColor]];
    //分針
    self.minusLayer = [self layerWithPosition:CGPointMake(width * 0.5, width * 0.5) bounds:CGRectMake(0, 0, 3, 70) backgroundColor:[UIColor blueColor]];
    //時針
    self.hourLayer = [self layerWithPosition:CGPointMake(width * 0.5, width * 0.5) bounds:CGRectMake(0, 0, 3, 50) backgroundColor:[UIColor blackColor]];
    
    // 根據當前時間旋轉圖層的角度
    self.secondLayer.transform = CATransform3DMakeRotation(CZSecondAngle * second, 0, 0, 1);
    self.minusLayer.transform = CATransform3DMakeRotation(CZSecondAngle * minus, 0, 0, 1);
    self.hourLayer.transform  = CATransform3DMakeRotation(angle2radian(CZPerHourA * (minus / 60.0 + hour)), 0, 0, 1);
    
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateTime) userInfo:nil repeats:YES];
}

/**
 *  創建一個圖層對象
 *
 *  @param position        圖層位置
 *  @param bounds          圖層大小
 *  @param backgroundColor 圖層演示
 *
 *  @return 創建好的圖層
 */
- (CALayer *)layerWithPosition:(CGPoint)position bounds:(CGRect)bounds backgroundColor:(UIColor *)backgroundColor{
    CALayer *layer = [CALayer layer];
    layer.position = position;
    layer.anchorPoint = CGPointMake(0.5, 1);
    layer.bounds = bounds;
    layer.backgroundColor = backgroundColor.CGColor;
    [self.clockLayer addSublayer:layer];
    return layer;
}

/**
 *  每一秒更新一次時間
 */
- (void)updateTime{
    self.secondLayer.transform = CATransform3DRotate(self.secondLayer.transform, CZSecondAngle, 0, 0, 1);
    self.minusLayer.transform = CATransform3DRotate(self.minusLayer.transform, CZMinusAngle, 0, 0, 1);
    self.hourLayer.transform = CATransform3DRotate(self.hourLayer.transform, CZHourAngle, 0, 0, 1);
}
@end