先上效果看看：

突然想到時鐘挺有意思的就弄了個

先畫個錶盤吧
///

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給大家。

文／江湖呼呼（簡書作者）

著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。