html 绘制ios时钟,iOS实现漂亮的时钟代码详解

1.最终效果图

2.实现思路

在ios中默认是绕着中心点旋转的，因为锚点默认在图层的中点，要想绕着下边中心点转，需要改变图层锚点的位置。

根据锚点，设置position坐标，为时钟的中点。

思考秒针旋转的角度，怎么知道当前秒针旋转到哪，当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。

1> 计算一秒转多少° 360 * 60 = 6

2> 获取当前秒数，通过日历对象，获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数

每隔一秒，获取最新秒数，更新时钟。

分钟一样的做法

时钟也一样

每一分钟，时钟也需要旋转，60分钟 -> 1小时 - > 30° ==》 每分钟 30 / 60.0 一分钟时针转0.5°

把时针和秒针头尾变尖，设置圆角半径

2.完整代码

#import "ViewController.h"

//获得当前的年月日 时分秒

#define CURRENTSEC [[NSCalendar currentCalendar] component:NSCalendarUnitSecond fromDate:[NSDate date]]

#define CURRENTMIN [[NSCalendar currentCalendar] component:NSCalendarUnitMinute fromDate:[NSDate date]]

#define CURRENTHOUR [[NSCalendar currentCalendar] component:NSCalendarUnitHour fromDate:[NSDate date]]

#define CURRENTDAY [[NSCalendar currentCalendar] component:NSCalendarUnitDay fromDate:[NSDate date]]

#define CURRENTMONTH [[NSCalendar currentCalendar] component:NSCalendarUnitMonth fromDate:[NSDate date]]

#define CURRENTYEAR [[NSCalendar currentCalendar] component:NSCalendarUnitYear fromDate:[NSDate date]]

//角度转换成弧度

#define ANGEL(x) x/180.0 * M_PI

#define kPerSecondA ANGEL(6)

#define kPerMinuteA ANGEL(6)

#define kPerHourA ANGEL(30)

#define kPerHourMinuteA ANGEL(0.5)

@interface ViewController ()

@property (nonatomic,strong) UIImageView *imageClock;

@property (nonatomic,strong) CALayer *layerSec;

@property (nonatomic,strong) CALayer *layerMin;

@property (nonatomic,strong) CALayer *layerHour;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

[self.view addSubview:self.imageClock];

[self.imageClock.layer addSublayer:self.layerSec];

[self.imageClock.layer addSublayer:self.layerMin];

[self.imageClock.layer addSublayer:self.layerHour];

[self timeChange];

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

// Do any additional setup after loading the view, typically from a nib.

}

- (void)timeChange

{

self.layerSec.transform = CATransform3DMakeRotation(CURRENTSEC * kPerSecondA, 0, 0, 1);

self.layerMin.transform = CATransform3DMakeRotation(CURRENTMIN * kPerMinuteA, 0, 0, 1);

self.layerHour.transform = CATransform3DMakeRotation(CURRENTHOUR * kPerHourA, 0, 0, 1);

self.layerHour.transform = CATransform3DMakeRotation(CURRENTMIN * kPerHourMinuteA + CURRENTHOUR*kPerHourA, 0, 0, 1);

}

- (UIImageView *)imageClock

{

if (_imageClock == nil) {

_imageClock = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"钟表"]];

_imageClock.frame = CGRectMake(100, 100, 200, 200);

}

return _imageClock;

}

- (CALayer *)layerSec

{

if (_layerSec == nil) {

_layerSec = [CALayer layer];

_layerSec.bounds = CGRectMake(0, 0, 2, 80);

_layerSec.backgroundColor = [UIColor redColor].CGColor;

_layerSec.cornerRadius = 5;

_layerSec.anchorPoint = CGPointMake(0.5, 1);

_layerSec.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);

}

return _layerSec;

}

- (CALayer *)layerMin

{

if (_layerMin == nil) {

_layerMin = [CALayer layer];

_layerMin.bounds = CGRectMake(0, 0, 4, 60);

_layerMin.backgroundColor = [UIColor blackColor].CGColor;

_layerMin.cornerRadius = 5;

_layerMin.anchorPoint = CGPointMake(0.5, 1);

_layerMin.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);

}

return _layerMin;

}

- (CALayer *)layerHour

{

if (_layerHour == nil) {

_layerHour = [CALayer layer];

_layerHour.bounds = CGRectMake(0, 0, 6, 40);

_layerHour.backgroundColor = [UIColor blackColor].CGColor;

_layerHour.cornerRadius = 5;

_layerHour.anchorPoint = CGPointMake(0.5, 1);

_layerHour.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);

}

return _layerHour;

}

3.Demo程序