天天看點

時鐘效果

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