CALayer的隐式动画实例 - 钟表

#import <UIKit/UIKit.h>

@interface ClockPan : UIView

@property (nonatomic, strong) UIImage *image;

- (instancetype)initWithImage:(UIImage *)image; //表盘的背景贴纸, 可以让设计师给你一个精美的表盘样式

@end

#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

#import "ViewController.h"
#import "ClockPan.h" //调用表盘View

#define kClockW
4000
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