IT虾米网

iOS实现漂亮的时钟代码详解

itxm 2018年06月23日 手机开发 475 0

1.最终效果图

这里写图片描述

2.实现思路

  1. 在ios中默认是绕着中心点旋转的,因为锚点默认在图层的中点,要想绕着下边中心点转,需要改变图层锚点的位置。
  2. 根据锚点,设置position坐标,为时钟的中点。
  3. 思考秒针旋转的角度,怎么知道当前秒针旋转到哪,当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。
    1> 计算一秒转多少° 360 * 60 = 6
    2> 获取当前秒数,通过日历对象,获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数
  4. 每隔一秒,获取最新秒数,更新时钟。
    • 分钟一样的做法
    • 时钟也一样
  5. 每一分钟,时钟也需要旋转,60分钟 -> 1小时 - > 30° ==》 每分钟 30 / 60.0 一分钟时针转0.5°
  6. 把时针和秒针头尾变尖,设置圆角半径

2.完整代码

#import "ViewController.h" 
//获得当前的年月日 时分秒 
#define  CURRENTSEC [[NSCalendar currentCalendar] component:NSCalendarUnitSecond fromDate:[NSDate date]] 
#define  CURRENTMIN [[NSCalendar currentCalendar] component:NSCalendarUnitMinute fromDate:[NSDate date]] 
#define  CURRENTHOUR [[NSCalendar currentCalendar] component:NSCalendarUnitHour fromDate:[NSDate date]] 
#define  CURRENTDAY  [[NSCalendar currentCalendar] component:NSCalendarUnitDay fromDate:[NSDate date]] 
#define  CURRENTMONTH [[NSCalendar currentCalendar] component:NSCalendarUnitMonth fromDate:[NSDate date]] 
#define  CURRENTYEAR [[NSCalendar currentCalendar] component:NSCalendarUnitYear fromDate:[NSDate date]] 
 
//角度转换成弧度 
#define  ANGEL(x) x/180.0 * M_PI 
 
#define kPerSecondA     ANGEL(6) 
#define kPerMinuteA     ANGEL(6) 
#define kPerHourA       ANGEL(30) 
#define kPerHourMinuteA ANGEL(0.5) 
@interface ViewController () 
 
 
@property (nonatomic,strong) UIImageView *imageClock; 
 
@property (nonatomic,strong) CALayer *layerSec; 
@property (nonatomic,strong) CALayer *layerMin; 
@property (nonatomic,strong) CALayer *layerHour; 
 
@end 
 
@implementation ViewController 
 
- (void)viewDidLoad { 
    [super viewDidLoad]; 
 
 
    [self.view addSubview:self.imageClock]; 
    [self.imageClock.layer addSublayer:self.layerSec]; 
    [self.imageClock.layer addSublayer:self.layerMin]; 
    [self.imageClock.layer addSublayer:self.layerHour]; 
 
    [self timeChange]; 
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES]; 
    // Do any additional setup after loading the view, typically from a nib. 
} 
 
- (void)timeChange 
{ 
    self.layerSec.transform = CATransform3DMakeRotation(CURRENTSEC * kPerSecondA, 0, 0, 1); 
    self.layerMin.transform = CATransform3DMakeRotation(CURRENTMIN * kPerMinuteA, 0, 0, 1); 
 
    self.layerHour.transform = CATransform3DMakeRotation(CURRENTHOUR * kPerHourA, 0, 0, 1); 
    self.layerHour.transform = CATransform3DMakeRotation(CURRENTMIN * kPerHourMinuteA + CURRENTHOUR*kPerHourA, 0, 0, 1); 
} 
 
- (UIImageView *)imageClock 
{ 
    if (_imageClock == nil) { 
        _imageClock = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"钟表"]]; 
        _imageClock.frame = CGRectMake(100, 100, 200, 200); 
    } 
 
    return _imageClock; 
} 
 
- (CALayer *)layerSec 
{ 
    if (_layerSec == nil) { 
        _layerSec = [CALayer layer]; 
        _layerSec.bounds = CGRectMake(0, 0, 2, 80); 
        _layerSec.backgroundColor = [UIColor redColor].CGColor; 
        _layerSec.cornerRadius = 5; 
        _layerSec.anchorPoint = CGPointMake(0.5, 1); 
        _layerSec.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2); 
    } 
    return _layerSec; 
} 
 
- (CALayer *)layerMin 
{ 
    if (_layerMin == nil) { 
        _layerMin = [CALayer layer]; 
        _layerMin.bounds = CGRectMake(0, 0, 4, 60); 
        _layerMin.backgroundColor = [UIColor blackColor].CGColor; 
        _layerMin.cornerRadius = 5; 
        _layerMin.anchorPoint = CGPointMake(0.5, 1); 
        _layerMin.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2); 
    } 
    return _layerMin; 
} 
 
- (CALayer *)layerHour 
{ 
    if (_layerHour == nil) { 
        _layerHour = [CALayer layer]; 
        _layerHour.bounds = CGRectMake(0, 0, 6, 40); 
        _layerHour.backgroundColor = [UIColor blackColor].CGColor; 
        _layerHour.cornerRadius = 5; 
        _layerHour.anchorPoint = CGPointMake(0.5, 1); 
        _layerHour.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2); 
    } 
    return _layerHour; 
}

3.Demo程序

https://github.com/Esdeath/clock

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

ios开发之公交卡系统的设计与实现详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。