05-时钟效果

05-时钟效果

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
　　60秒钟一分钟,一分钟转6度.
　　6 除以 60,就是每一秒钟,分针转多少度.0.1


    时针旋转多少度
    CGFloat hourAngel = angle2Rad(hour * perHourA + minute * perMinuteHourA);
    旋转时针
    self.hourL.transform = CATransform3DMakeRotation(hourAngel, 0, 0, 1);
　　
　　分针旋转多少度
　　 CGFloat minueteAngel = angle2Rad(minute * perMinuteA + second * perSecondMinuteA)); 
　　旋转分钟
　　self.minueL.transform = CATransform3DMakeRotation(minueteAngel, 0, 0, 1);