天天看点

时钟效果

    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);