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