【UI基础】时钟效果的简单实现

时钟效果很多手机上都有这个应用，不过不需要我们再去实现了。因为大部分的手机系统都带有这个功能。不过在对我们训练一些视图的layer还是挺有帮助的。

描述的内容就不多说了，直接上代码：

//
//  ViewController.m
//  04-时钟
//
//  Created by styshy on 15/11/6.
//  Copyright (c) 2015年 sz. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *timeClock;
@property (weak, nonatomic) CALayer *secondLayer;
@property (weak, nonatomic) CALayer *minuteLayer;
@property (weak, nonatomic) CALayer *hourLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 添加秒针
    [self addSecond];
    // 添加分钟
    [self addMinute];
    // 添加时钟
    [self addHour];
    
    // 添加时间动画，每秒钟1次
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(updateTime) userInfo:nil repeats:YES];
    [self updateTime];
}

- (void)addSecond{
    // 设置秒针图层
    CALayer *secondLayer = [CALayer layer];
    // 设置bounds大小
    secondLayer.bounds = CGRectMake(0, 0, 1, 85);
    secondLayer.cornerRadius = secondLayer.bounds.size.width * 0.5;
    // 设置锚点
    secondLayer.anchorPoint = CGPointMake(0.5, 1);
    // 设置secondLayer的锚点在position中的位置
    secondLayer.position = CGPointMake(100, 100);
    secondLayer.backgroundColor = [UIColor redColor].CGColor;
    
    // 将秒针layer添加到timeClock中
    [self.timeClock.layer addSublayer:secondLayer];
    self.secondLayer = secondLayer;
}

- (void)addMinute{
    // 设置秒针图层
    CALayer *minuteLayer = [CALayer layer];
    // 设置bounds大小
    minuteLayer.bounds = CGRectMake(0, 0, 2, 78);
    minuteLayer.cornerRadius = minuteLayer.bounds.size.width * 0.5;
    // 设置锚点
    minuteLayer.anchorPoint = CGPointMake(0.5, 1);
    // 设置secondLayer的锚点在position中的位置
    minuteLayer.position = CGPointMake(100, 100);
    minuteLayer.backgroundColor = [UIColor blackColor].CGColor;
    
    // 将秒针layer添加到timeClock中
    [self.timeClock.layer addSublayer:minuteLayer];
    self.minuteLayer = minuteLayer;
}


- (void)addHour{
    // 设置秒针图层
    CALayer *hourLayer = [CALayer layer];
    // 设置bounds大小
    hourLayer.bounds = CGRectMake(0, 0, 4, 70);
    hourLayer.cornerRadius = hourLayer.bounds.size.width * 0.5;
    // 设置锚点
    hourLayer.anchorPoint = CGPointMake(0.5, 1);
    // 设置secondLayer的锚点在position中的位置
    hourLayer.position = CGPointMake(100, 100);
    hourLayer.backgroundColor = [UIColor blueColor].CGColor;
    
    // 将秒针layer添加到timeClock中
    [self.timeClock.layer addSublayer:hourLayer];
    self.hourLayer = hourLayer;
}

// 每秒钟旋转多少度
#define perSecond  (2*M_PI/60.0)
// 每分钟旋转多少度
#define perMinute  (2*M_PI/60.0)
// 每小时旋转多少度
#define perHour (2*M_PI/12.0)

- (void)updateTime{
    // 获取日历
    NSCalendar *calendar = [NSCalendar currentCalendar];
    NSDate *date = [NSDate date];
    // 获取时间组件
    NSDateComponents *comps = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:date];
    // 获取当前时分秒
    NSInteger second = comps.second;
    NSInteger minute = comps.minute;
    NSInteger hour = comps.hour;
    
    
    // 获取需要旋转的角度
    CGFloat secondAngle =second * perSecond;
    CGFloat minuteAngle = minute *perMinute;
    CGFloat hourAngle = hour *perHour;
    
    // 时钟旋转，layer旋转
    self.secondLayer.transform = CATransform3DMakeRotation(secondAngle, 0, 0, 1);
    self.minuteLayer.transform = CATransform3DMakeRotation( minuteAngle, 0, 0,1);
    self.hourLayer.transform = CATransform3DMakeRotation( hourAngle, 0, 0, 1);

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

效果展示