時鐘效果
阿新 • • 發佈：2017-06-18
nts 運行 back uic rpo cloc change 中間 transform
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);
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);
時鐘效果