前言：學(xué)無止境，打算深入了解下動(dòng)畫，哎都怪自己太菜捞稿！使用 CALayer畫時(shí)鐘橘原。做的精確一點(diǎn)哩掺，要每秒鐘秒、分、時(shí)針都要?jiǎng)印?/p>
背景圖
clockBG.png
頁面搭建時(shí)鐘背景圖
這里就不多說了，純代碼/xib 隨意
創(chuàng)建秒針
秒針長一點(diǎn)80pt蛾坯，顏色為紅色，寬度為1pt
- (void)createSecond{
CALayer *layer = [CALayer 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;
_secLayer = layer;
[_clockView.layer addSublayer:_secLayer];
}
創(chuàng)建分針
分針短一點(diǎn)70pt疏遏，顏色為黑色脉课，寬度為3pt
- (void)createMinutes{
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 3, 70);
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(_clockView.bounds.size.width*0.5, _clockView.bounds.size.height*0.5);
layer.backgroundColor = [UIColor blackColor].CGColor;
_minLayer = layer;
[_clockView.layer addSublayer:_minLayer];
}
創(chuàng)建時(shí)針
分針短點(diǎn)50pt，顏色為黑色财异，寬度為3pt
- (void)createHour{
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 3, 50);
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(_clockView.bounds.size.width*0.5, _clockView.bounds.size.height*0.5);
layer.backgroundColor = [UIColor blackColor].CGColor;
_hourLayer = layer;
[_clockView.layer addSublayer:_hourLayer];
}
宏定義
#define angleSec 6.0
//秒針1秒轉(zhuǎn) 360/60=6°
#define angleMin 0.1
//分鐘1分鐘轉(zhuǎn)360/60=6° 那么1秒鐘就轉(zhuǎn) 6/60=0.1°
#define angleHour 1.0/120.0
//時(shí)鐘1分鐘轉(zhuǎn) 360/12=30° 那么1分鐘就轉(zhuǎn) 30/60=1/2° 那么1秒鐘鐘就轉(zhuǎn) 1/2/60=1.0/120.0°
// 時(shí)分秒針要每秒都移動(dòng)倘零，分針不能1分鐘跳轉(zhuǎn)6°，時(shí)針不能1小時(shí)跳轉(zhuǎn)30°
#define angleValue(angle) ((angle) * M_PI / 180.0)
//這個(gè)數(shù)值轉(zhuǎn)角度的計(jì)算方法
//程序需要的是角度值而不是數(shù)值戳寸，比如45°=1/4π视事。傳入數(shù)值得到轉(zhuǎn)化的角度
定時(shí)器方法
定時(shí)器方法主要是計(jì)算當(dāng)前時(shí)間，然后計(jì)算各部件應(yīng)該旋轉(zhuǎn)的角度庆揩。
- (void)changeTime{
NSCalendar *calendar = [NSCalendar currentCalendar];
NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
//每秒旋轉(zhuǎn)的角度
NSInteger sec = angleSec * cmp.second;
NSInteger min = angleMin * (cmp.minute*60+cmp.second);
NSInteger hour = angleHour * (cmp.hour*60*60+cmp.minute*60+cmp.second);
//水平旋轉(zhuǎn)45°傳入角度值不是數(shù)值 45°=1/4π
//如何計(jì)算 x/2π = 45°/360° 等價(jià)于 x=45°*π/180°
_secLayer.transform = CATransform3DMakeRotation(angleValue(sec), 0, 0, 1.0);
_minLayer.transform = CATransform3DMakeRotation(angleValue(min), 0, 0, 1.0);
_hourLayer.transform = CATransform3DMakeRotation(angleValue(hour), 0, 0, 1.0);
}
系統(tǒng)調(diào)用
上述方法寫完后，開始進(jìn)行系統(tǒng)的調(diào)用跌穗。
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *clockView;
@property (nonatomic, strong) CALayer *secLayer;
@property (nonatomic, strong) CALayer *minLayer;
@property (nonatomic, strong) CALayer *hourLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self createSecond];
[self createMinutes];
[self createHour];
[self changeTime]; //一定要先調(diào)用一次订晌，不然初始化位置不對(duì)
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeTime) userInfo:nil repeats:YES];
}
效果圖
效果圖.gif
效果圖.png
注意點(diǎn)
1.時(shí)、分蚌吸、秒針必須是全局的锈拨，因?yàn)橐龆〞r(shí)器修改旋轉(zhuǎn)角度
2.時(shí)針和分鐘每秒也需要計(jì)算旋轉(zhuǎn)角度
3.layer.transform的CATransform3DMakeRotation方法用于計(jì)算旋轉(zhuǎn)角度但是要傳入角度值而不是數(shù)字，需要轉(zhuǎn)換羹唠。
4.定時(shí)器方法在創(chuàng)建定時(shí)器之前要調(diào)用一次奕枢，目的是初始化位置。
5.我是菜鳥佩微。
