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(0, 0, 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 * 0.5;
    self.clockPan.layer.masksToBounds = YES;
    self.clockPan.image = [UIImage imageNamed:@"钟表"];

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

    [NSTimer scheduledTimerWithTimeInterval:1 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), 0, 0, 1);
    self.minuteLayer.transform = CATransform3DMakeRotation(angle2Radian(minuteA), 0, 0, 1);
    self.hourLayer.transform = CATransform3DMakeRotation(angle2Radian(hourA), 0, 0, 1);

    //心跳模式设置
    if (second % 2 != 0) {
        self.heartImgView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
    }else{
        self.heartImgView.layer.transform = CATransform3DMakeScale(1, 1, 1);
    }
}

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

    //设置背景颜色
    secondL.backgroundColor = [UIColor redColor].CGColor;

    //设置锚点位置
    secondL.anchorPoint = CGPointMake(0.5, 1);

    //The position in the superlayer that the anchor point of the layer's (该点就是锚点的图层的父图层其对应的位置, 即表盘的中点位置)
    secondL.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);

    //设置指针的大小
    secondL.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 - 20);

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

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

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

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

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

@end