纯属原创,转载请标明出处,谢谢
首先我们先看一下需求
按照MAC的系统时钟仿照写一个类似的时钟效果
然后我们着手分析一个这个如何实现
首先这个不需要和用户有任何交互,所以我们推荐使用CALayer隐式动画去完成
然后我们让设计人员先画出一个表盘给我们,设置他的长宽都为200
其次,我们就要通过需求来描述CALayer的anchorPoint与position点在哪里
至于这两个点是什么(也就是“锚点”),彻底理解position与anchorPoint - yongyinmg的专栏 - 博客频道 - CSDN.NET,这篇文章说的很清楚了,这里就不跟大家解释
我们可以看到,所有的layer都是基于锚点去旋转的,也就是表盘的中心点,那么position属性也就是表盘的长宽的一半,由于anchorPoint的X,Y属性取值范围是0-1之间,以秒针举例,如果我们想让秒针站立在表盘中上,那么秒针的X即为0.5,Y为1
在设置下秒针的bound,宽度为1,长度为表盘的半径-20
这样我们可以轻松的将秒针针添加到表盘上
CALayer * secondL = [CALayer layer];
secondL.backgroundColor = [UIColor redColor].CGColor ;
// 设置锚点
secondL.anchorPoint = CGPointMake(0.5, 1);
secondL.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
secondL.bounds = CGRectMake(0, 0, 1, kClockW * 0.5 - 20);
[_clockView.layer addSublayer:secondL];
_secondLayer = secondL;
同理,时针和分针也是一样,只不过长度和颜色,圆角不一样
CALayer * layer = [CALayer layer];
layer.backgroundColor = [UIColor blackColor].CGColor ;
// 设置锚点
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 - 20);
layer.cornerRadius = 4;
[_clockView.layer addSublayer:layer];
_mintueLayer = layer;
CALayer * layer = [CALayer layer];
layer.backgroundColor = [UIColor blackColor].CGColor ;
// 设置锚点
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 - 40);
layer.cornerRadius = 4;
[_clockView.layer addSublayer:layer];
_hourLayer = layer;
这里一定要注意的是添加顺序,一般来讲秒针在最上层,所以秒针的layer是最后添加的
现在UI层我们已经添加好了,接下来就该考虑如何让时钟动起来了
让时钟动起来,我们先要知道时分秒他们在表盘上所谓转动的角度
通过小学运算可以得知,秒针在一秒钟内在表盘里转动的度数是6度(一个圆形是360度,360除以60),拿现在的系统的秒数*6就是现在秒针的具体度数
分针在一分钟内在表盘转动的度数也是6度
而时针呢,一小时时针变化为360除以12等于30度,但是有个问题,常理知,时钟并不是只有在分针转到12点的时候才变化,它表盘里也会随着分针的变化而变化(比如说1:30,时针不可能只还停留在1这个位置,等到2:00的时候才突然变化)所以这个角度还需要加上分针对它的变化。这个怎么算呢,拿30度除以60现在的系统分钟数就可以得到了,也就是0.5现在的分钟数就是时钟在以分钟作单位时转动的度数
30*系统小时+0.5*系统分钟
由于这些都是不可变化的,我们来抽成宏
// 1秒6度(秒针)
#define perSecondA 6
// 1分钟6度(分针)
#define perMintueA 6
// 1小时30度(时针)
#define perHourA 30
// 每分钟时针转(30 / 60 °)
#define perMinHourA 0.5
有了这些角度之后,剩下的就很好做了,我们在viewDidLoad的里添加一个定时器
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
然后在这个timeChange方法里,设置时分秒的旋转形变就可以了,这里注意,CATransform3DMakeRotation这个接受的弧度而不是角度,我们再抽出一个宏来将角度转化为弧度
#define angle2radion(angle) ((angle) / 180.0 * M_PI)
- (void)timeChange{
// 获取当前系统时间
NSCalendar * calender = [NSCalendar currentCalendar];
NSDateComponents * cmp = [calender components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
CGFloat second = cmp.second;
CGFloat secondA = (second * perSecondA) ;
NSInteger minute = cmp.minute;
CGFloat mintuteA = minute * perMintueA ;
NSInteger hour = cmp.hour;
CGFloat hourA = hour * perHourA + minute * perMinHourA;
_secondLayer.transform = CATransform3DMakeRotation(angle2radion(secondA), 0, 0, 1);
_mintueLayer.transform = CATransform3DMakeRotation(angle2radion(mintuteA), 0, 0, 1);
_hourLayer.transform = CATransform3DMakeRotation(angle2radion(hourA), 0, 0, 1);
}
做到这里,基本上已经大功告成,让我们运行一下
时钟已经随着系统时间转了起来,还可以在修改一些别的样式,到时候就看开发者如何发挥了
本Dome的Github地址
https://github.com/DriverWang/YCClock