首页 > 代码库 > 时钟效果

时钟效果


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

时钟效果