先上效果看看：

clock.gif
clock.gif

突然想到时钟挺有意思的就弄了个

先画个表盘吧
///

CGPoint center = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
CAShapeLayer *smillLayer = [CAShapeLayer layer];
UIBezierPath *smillpath = [UIBezierPath bezierPath];
for (int i = 0 ; i<60; i++) {
    CGPoint pos = [self getRoundPointR:ViewR angle:-90+6*I];
    CGPoint pos1 = [self getRoundPointR:ViewR-5 angle:-90+6*I];
    [smillpath moveToPoint:CGPointMake(pos.x, pos.y)];
    [smillpath addLineToPoint:CGPointMake(pos1.x, pos1.y)];
}
smillLayer.path = smillpath.CGPath;
smillLayer.lineWidth = 1;
smillLayer.strokeColor = self.theDialColor.CGColor;
smillLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:smillLayer];
CAShapeLayer *momentLayer = [CAShapeLayer layer];
UIBezierPath *momentpath = [UIBezierPath bezierPath];
NSArray *arr = @[@"12",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11"];
for (int i = 0 ; i<arr.count; i++) {
    CGPoint pos = [self getRoundPointR:ViewR angle:-90+30*I];
    CGPoint pos1 = [self getRoundPointR:ViewR-8 angle:-90+30*I]; 
    [momentpath moveToPoint:CGPointMake(pos.x, pos.y)];
    [momentpath addLineToPoint:CGPointMake(pos1.x, pos1.y)];
    CGPoint pos2 = [self getRoundPointR:ViewR-16 angle:-90+30*I];
    NSString *str = arr[i];
    NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithObject:[UIFont systemFontOfSize:14] forKey:NSFontAttributeName];
    CGSize size = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, 0.0) options:NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil].size;    
    NSDictionary *dict = @{NSFontAttributeName:[UIFont systemFontOfSize:12],NSForegroundColorAttributeName:[UIColor blackColor]};
    [str drawAtPoint:CGPointMake(pos2.x-size.width/2, pos2.y-7) withAttributes:dict];
}
momentLayer.path = momentpath.CGPath;
momentLayer.lineWidth = 2;
momentLayer.strokeColor = self.theDialColor.CGColor;
momentLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:momentLayer];
CAShapeLayer *backGroundLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:ViewR startAngle:-M_PI_2 endAngle:-M_PI_2+M_PI_2*4 clockwise:YES];
backGroundLayer.path = path.CGPath;
backGroundLayer.lineWidth = 1;
backGroundLayer.strokeColor = self.theDialColor.CGColor;
backGroundLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:backGroundLayer];

画时针
///

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(5, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/2))];
[path addLineToPoint:CGPointMake(10, ViewR-(ViewR/2))];
[path closePath];
CAShapeLayer *hoursLayer = [CAShapeLayer layer];
hoursLayer.lineJoin = kCALineJoinRound;
hoursLayer.anchorPoint = CGPointMake(0.5, 1);
hoursLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
hoursLayer.bounds = CGRectMake(0, 0, 10, ViewR-(ViewR/2));
hoursLayer.path = path.CGPath;
hoursLayer.strokeColor = self.hourColor.CGColor;
hoursLayer.fillColor = self.hourColor.CGColor;
[self.layer addSublayer:hoursLayer];
self.hoursLayer = hoursLayer;

画分针

///

CGFloat weight = 8;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(weight/2, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/10))];
[path addLineToPoint:CGPointMake(weight, ViewR-(ViewR/10))];
[path closePath];
CAShapeLayer *minuteLayer = [CAShapeLayer layer];
minuteLayer.anchorPoint = CGPointMake(0.5, 1);
minuteLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
minuteLayer.bounds = CGRectMake(0, 0, weight, ViewR-(ViewR/10));
minuteLayer.path = path.CGPath;
minuteLayer.strokeColor = self.minuteColor.CGColor;
minuteLayer.fillColor = self.minuteColor.CGColor;
[self.layer addSublayer:minuteLayer];
self.minuteLayer = minuteLayer;

画秒针
///

CATextLayer *textLayer = [CATextLayer layer];
textLayer.alignmentMode = @"center";
textLayer.anchorPoint = CGPointMake(0.5, 0.5);
textLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5+40);
textLayer.bounds = CGRectMake(0, 0, 100, 20);
textLayer.string = @"00:00:00";    
textLayer.fontSize = 12;
textLayer.foregroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:textLayer];
self.textLayer = textLayer;
CGFloat weight = 6;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(weight/2, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/40))];
[path addLineToPoint:CGPointMake(weight, ViewR-(ViewR/40))];
[path closePath];
CAShapeLayer *secondLayer = [CAShapeLayer layer];
secondLayer.anchorPoint = CGPointMake(0.5, 1);
secondLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
secondLayer.bounds = CGRectMake(0, 0, weight, ViewR-(ViewR/40));
secondLayer.path = path.CGPath;
secondLayer.strokeColor =self.secondColor.CGColor;
secondLayer.fillColor = self.secondColor.CGColor;
[self.layer addSublayer:secondLayer];
self.secondLayer = secondLayer;

设置每秒刷新时间

///

NSCalendar *calendar = [NSCalendar currentCalendar];

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

CGFloat sec = compoents.second;
CGFloat minute = compoents.minute;
CGFloat hour = compoents.hour;
NSLog(@"%f:%f:%f",hour,minute,sec);
CGFloat secondA = sec * 6;
CGFloat minuteA = minute * 6;
CGFloat hourA = hour *30;
hourA += minute * 0.5;
self.secondLayer.transform = CATransform3DMakeRotation(angle2RADIAN(secondA), 0, 0, 1);
self.minuteLayer.transform = CATransform3DMakeRotation(angle2RADIAN(minuteA), 0, 0, 1);
self.hoursLayer.transform = CATransform3DMakeRotation(angle2RADIAN(hourA), 0, 0, 1);
self.textLayer.string = [NSString stringWithFormat:@"%02.f:%02.f:%02.f",hour,minute,sec];

如对您有帮助请具体可参考本文dome

备注：

如果有不足或者错误的地方还望各位读者批评指正，可以评论留言，笔者收到后第一时间回复。

QQ/微信：976971956/ljh976971956。

简书号：江湖呼呼：[简书]

www.jianghu.com

感谢各位观众老爷的阅读，如果觉得笔者写的还凑合，可以关注或收藏一下，不定期分享一些好玩的实用的demo给大家。

文／江湖呼呼（简书作者）

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。