时钟效果

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);
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容