1.搭建界面.
分析界面.
界面上时针,分针,秒针不需要与用户进行交互.所以都可以使用layer方式来做.
做之前要观察时针在做什么效果.
是根据当前的时间,绕着表盘的中心点进行旋转.
要了解一个非常重要的知识点.无论是旋转,缩放它都是绕着锚点.进行的.
要想让时针,分针,称针显示的中间,还要绕着中心点进行旋转.
那就要设置它的position和anchorPoint两个属性.
创建秒针
CALayer *layer = [CALayer layer];
_secLayer = layer;
layer.bounds = CGRectMake(0, 0, 1, 80);
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(_clockView.bounds.size.width * 0.5, _clockView.bounds.size.height * 0.5);
layer.backgroundColor = [UIColor redColor].CGColor;
[_clockView.layer addSublayer:layer];
2.让秒针开始旋转.
让秒针旋转.所以要计算当前的旋转度是多少?
当前的旋转角度为:当前的时间 * 每秒旋转多少度.
计算每一秒旋转多少度.
60秒转一圈360度
360 除以60就是每一秒转多少度.每秒转6度.
获取当前的时间
创建日历类
NSCalendar *calendar = [NSCalendar currentCalendar];
把日历类转换成一个日期组件
日期组件(年,月,日,时,分,秒)
component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒
fromDate:当前的日期
NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond
fromDate:[NSDate date]];
我们的秒就是保存在日期组件里面,它里面提供了很多get方法.
NSInteger second = cmp.second;
那么当前秒针旋转的角度就是
当前的秒数乘以每秒转多少度.
second * perSecA
还得要把角度转换成弧度.
因为下面分针,时针也得要用到, 就把它抽出一个速参数的宏.
#define angle2Rad(angle) ((angle) / 180.0 * M_PI)
让它每隔一秒旋转一次.所以添加一个定时器.
每个一秒就调用,旋转秒针
- (void)timeChange{
获取当前的秒数
创建日历类
NSCalendar *calendar = [NSCalendar currentCalendar];
把日历类转换成一个日期组件
日期组件(年,月,日,时,分,秒)
component:日期组件有哪些东西组成,他是一个枚举,里面有年月日时分秒
fromDate:当前的日期
NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond
fromDate:[NSDate date]];
我们的秒就是保存在日期组件里面,它里面提供了很多get方法.
NSInteger second = cmp.second;
秒针旋转多少度.
CGFloat angel = angle2Rad(second * perSecA);
旋转秒针
self.secondL.transform = CATransform3DMakeRotation(angel, 0, 0, 1);
}
运行发现他会一下只就调到某一个时间才开始旋转
一开始的时候就要来到这个方法,获取当前的秒数把它定位好.
要在添加定时器之后就调用一次timeChange方法.
3.添加分针
快速拷贝一下,然后添加一个分针成员属性.
修改宽度,修改颜色
也得要让它旋转,
要算出每分钟转多少度
转60分钟刚好是一圈
所以每一分钟也是转6度.
获取当前多少分?
同样是在日期组件里面获得
里面有左移符号,右移符号.他就可以用一个并运算
现在同时让他支持秒数和分 后面直接加上一个 |
NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond |
NSCalendarUnitMinute
fromDate:[NSDate date]];
CGFloat minueteAngel = angle2Rad(minute * perMinuteA);
self.minueL.transform = CATransform3DMakeRotation(minueteAngel, 0, 0, 1);
4.添加时针
同样复制之前的,添加一个小时属性
小时转多少度
当前是多少小时,再计算先每一小时转多少度.
12个小时转一圈. 360除以12,每小时转30度
时针旋转多少度
CGFloat hourAngel = angle2Rad(hour * perHourA);
旋转时针
self.hourL.transform = CATransform3DMakeRotation(hourAngel, 0, 0, 1);
直接这样写会有问题
就是没转一分钟,小时也会移动一点点
接下来要算出,每一分钟,小时要转多少度
60分钟一小时.一小时转30度.
30 除以60,就是每一分钟,时针转多少度.0.5
时针旋转多少度
CGFloat hourAngel = angle2Rad(hour * perHourA + minute * perMinuteHourA);
旋转时针
self.hourL.transform = CATransform3DMakeRotation(hourAngel, 0, 0, 1);