【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


效果展示