使用 CALayer 画时钟

前言：学无止境，打算深入了解下动画，哎都怪自己太菜！使用 CALayer画时钟。做的精确一点，要每秒钟秒、分、时针都要动。

背景图

clockBG.png

页面搭建时钟背景图

这里就不多说了，纯代码/xib 随意

创建秒针

秒针长一点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];
}

创建分针

分针短一点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];
}

创建时针

分针短点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秒转 360/60=6°
#define angleMin 0.1
//分钟1分钟转360/60=6° 那么1秒钟就转 6/60=0.1°
#define angleHour 1.0/120.0
//时钟1分钟转 360/12=30° 那么1分钟就转 30/60=1/2° 那么1秒钟钟就转 1/2/60=1.0/120.0° 
// 时分秒针要每秒都移动，分针不能1分钟跳转6°，时针不能1小时跳转30°

#define angleValue(angle) ((angle) * M_PI / 180.0)
//这个数值转角度的计算方法
//程序需要的是角度值而不是数值，比如45°=1/4π。传入数值得到转化的角度

定时器方法

定时器方法主要是计算当前时间，然后计算各部件应该旋转的角度。

- (void)changeTime{
    NSCalendar *calendar = [NSCalendar currentCalendar];
    NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
    
    //每秒旋转的角度
    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);
    
    //水平旋转45°传入角度值不是数值 45°=1/4π
    //如何计算 x/2π = 45°/360°  等价于 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);
}

系统调用

上述方法写完后，开始进行系统的调用。

#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]; //一定要先调用一次，不然初始化位置不对
   
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeTime) userInfo:nil repeats:YES];
}

效果图

效果图.gif

效果图.png

注意点

1.时、分、秒针必须是全局的，因为要做定时器修改旋转角度
2.时针和分钟每秒也需要计算旋转角度
3.layer.transform的CATransform3DMakeRotation方法用于计算旋转角度但是要传入角度值而不是数字，需要转换。
4.定时器方法在创建定时器之前要调用一次，目的是初始化位置。
5.我是菜鸟。

最后编辑于：2018.04.24 16:19:53