CALayer的隐式動畫執行個體 - 鐘表

表盤的設定

ClockPan.h

#import <UIKit/UIKit.h>

@interface ClockPan : UIView

@property (nonatomic, strong) UIImage *image;

- (instancetype)initWithImage:(UIImage *)image; //表盤的背景貼紙, 可以讓設計師給你一個精美的表盤樣式

@end
           

ClockPan.m

#import "ClockPan.h"

@implementation ClockPan

- (instancetype)initWithImage:(UIImage *)image
{
    if (self = [super initWithFrame:CGRectMake(, , image.size.width, image.size.height)]) {
        _image = image;
    }

    return self;
}

- (void)setImage:(UIImage *)image
{
    _image = image;

    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {

    [_image drawInRect:rect];
}

@end
           

Clock的視圖控制器

#import "ViewController.h"
#import "ClockPan.h" //調用表盤View

#define kClockW self.clockPan.bounds.size.width

//角度制轉化為弧度制
#define angle2Radian(angle) ((angle) / 180.0 * M_PI)

#define perSecondA 6 //每秒6度
#define perMinuteA 6 //每分6度
#define perHourA 30 //每小時30度
#define perMinuteHourA 0.5 //每分鐘時針掃過0.5度
#define perSecondMinuteA 0.1 //每秒分針掃過0.1度

@interface ViewController ()
@property (weak, nonatomic) IBOutlet ClockPan *clockPan; //表盤
@property (weak, nonatomic) IBOutlet UILabel *timeLabel; //時間Label
@property (weak, nonatomic) IBOutlet UIImageView *heartImgView; //心跳圖形

@property (nonatomic, strong) CALayer *sencondLayer; //秒針Layer
@property (nonatomic, strong) CALayer *minuteLayer; //分針Layer
@property (nonatomic, strong) CALayer *hourLayer; //時針Layer

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.clockPan.layer.cornerRadius = kClockW * ;
    self.clockPan.layer.masksToBounds = YES;
    self.clockPan.image = [UIImage imageNamed:@"鐘表"];

    [self setupHourLayer];
    [self setupMinuteLayer];
    [self setupSecondLayer];

    [NSTimer scheduledTimerWithTimeInterval: target:self selector:@selector(timeChange) userInfo:nil repeats:YES];

    //啟動時間檢測
    [self timeChange];
}

- (void)timeChange
{
    NSCalendar *calendar = [NSCalendar currentCalendar];

    NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];

    NSInteger second = cmp.second;
    NSInteger minute = cmp.minute;
    NSInteger hour = cmp.hour;

    //設定電子表格式
    self.timeLabel.text = [NSString stringWithFormat:@"%02ld : %02ld : %02ld", hour, minute, second];

    //角度設定
    CGFloat secondA = second * perSecondA;
    CGFloat minuteA = minute *perMinuteA + second * perSecondMinuteA;
    CGFloat hourA = hour * perHourA + minute * perMinuteHourA;

    self.sencondLayer.transform = CATransform3DMakeRotation(angle2Radian(secondA), , , );
    self.minuteLayer.transform = CATransform3DMakeRotation(angle2Radian(minuteA), , , );
    self.hourLayer.transform = CATransform3DMakeRotation(angle2Radian(hourA), , , );

    //心跳模式設定
    if (second %  != ) {
        self.heartImgView.layer.transform = CATransform3DMakeScale(, , );
    }else{
        self.heartImgView.layer.transform = CATransform3DMakeScale(, , );
    }
}

- (void)setupSecondLayer
{
    CALayer *secondL = [[CALayer alloc] init];

    //設定背景顔色
    secondL.backgroundColor = [UIColor redColor].CGColor;

    //設定錨點位置
    secondL.anchorPoint = CGPointMake(, );

    //The position in the superlayer that the anchor point of the layer's (該點就是錨點的圖層的父圖層其對應的位置, 即表盤的中點位置)
    secondL.position = CGPointMake(kClockW * , kClockW * );

    //設定指針的大小
    secondL.bounds = CGRectMake(, , , kClockW *  - );

    [self.clockPan.layer addSublayer:secondL];
    self.sencondLayer = secondL;
}

- (void)setupMinuteLayer
{
    CALayer *minuteL = [[CALayer alloc] init];
    minuteL.backgroundColor = [UIColor blackColor].CGColor;
    minuteL.anchorPoint = CGPointMake(, );
    minuteL.position = CGPointMake(kClockW * , kClockW * );
    minuteL.bounds = CGRectMake(, , , kClockW *  - );
    minuteL.cornerRadius = ;

    [self.clockPan.layer addSublayer:minuteL];
    self.minuteLayer = minuteL;
}

- (void)setupHourLayer
{
    CALayer *hourL = [[CALayer alloc] init];
    hourL.backgroundColor = [UIColor blackColor].CGColor;
    hourL.anchorPoint = CGPointMake(, );
    hourL.position = CGPointMake(kClockW * , kClockW * );
    hourL.bounds = CGRectMake(, , , kClockW *  - );
    hourL.cornerRadius = ;

    [self.clockPan.layer addSublayer:hourL];
    self.hourLayer = hourL;
}

@end