司机王教你用CALayer写一个iOS时钟效果

纯属原创,转载请标明出处,谢谢

首先我们先看一下需求

按照MAC的系统时钟仿照写一个类似的时钟效果


然后我们着手分析一个这个如何实现

首先这个不需要和用户有任何交互,所以我们推荐使用CALayer隐式动画去完成

然后我们让设计人员先画出一个表盘给我们,设置他的长宽都为200

其次,我们就要通过需求来描述CALayer的anchorPoint与position点在哪里

至于这两个点是什么(也就是“锚点”),彻底理解position与anchorPoint - yongyinmg的专栏 - 博客频道 - CSDN.NET,这篇文章说的很清楚了,这里就不跟大家解释

我们可以看到,所有的layer都是基于锚点去旋转的,也就是表盘的中心点,那么position属性也就是表盘的长宽的一半,由于anchorPoint的X,Y属性取值范围是0-1之间,以秒针举例,如果我们想让秒针站立在表盘中上,那么秒针的X即为0.5,Y为1

在设置下秒针的bound,宽度为1,长度为表盘的半径-20

这样我们可以轻松的将秒针针添加到表盘上

    CALayer * secondL = [CALayer layer];
    
    secondL.backgroundColor = [UIColor redColor].CGColor ;

    // 设置锚点
    
    secondL.anchorPoint = CGPointMake(0.5, 1);
    
    secondL.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
    
    secondL.bounds = CGRectMake(0, 0, 1, kClockW * 0.5 - 20);
    

    [_clockView.layer addSublayer:secondL];

    _secondLayer = secondL;

同理,时针和分针也是一样,只不过长度和颜色,圆角不一样

   CALayer * layer = [CALayer layer];
    
    layer.backgroundColor = [UIColor blackColor].CGColor ;
    
    // 设置锚点
    
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
    
    layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 - 20);
    
    layer.cornerRadius = 4;
    
    [_clockView.layer addSublayer:layer];
    
    _mintueLayer = layer;

     CALayer * layer = [CALayer layer];
    
    layer.backgroundColor = [UIColor blackColor].CGColor ;
    
    // 设置锚点
    
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);
    
    layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 - 40);
    
    layer.cornerRadius = 4;
    
    [_clockView.layer addSublayer:layer];
    
    _hourLayer = layer;

这里一定要注意的是添加顺序,一般来讲秒针在最上层,所以秒针的layer是最后添加的

现在UI层我们已经添加好了,接下来就该考虑如何让时钟动起来了

让时钟动起来,我们先要知道时分秒他们在表盘上所谓转动的角度

通过小学运算可以得知,秒针在一秒钟内在表盘里转动的度数是6度(一个圆形是360度,360除以60),拿现在的系统的秒数*6就是现在秒针的具体度数

分针在一分钟内在表盘转动的度数也是6度

而时针呢,一小时时针变化为360除以12等于30度,但是有个问题,常理知,时钟并不是只有在分针转到12点的时候才变化,它表盘里也会随着分针的变化而变化(比如说1:30,时针不可能只还停留在1这个位置,等到2:00的时候才突然变化)所以这个角度还需要加上分针对它的变化。这个怎么算呢,拿30度除以60现在的系统分钟数就可以得到了,也就是0.5现在的分钟数就是时钟在以分钟作单位时转动的度数

30*系统小时+0.5*系统分钟

由于这些都是不可变化的,我们来抽成宏

// 1秒6度(秒针)

#define perSecondA 6

// 1分钟6度(分针)

#define perMintueA 6

// 1小时30度(时针)

#define perHourA 30

// 每分钟时针转(30 / 60 °)

#define perMinHourA 0.5

有了这些角度之后,剩下的就很好做了,我们在viewDidLoad的里添加一个定时器

 [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];

然后在这个timeChange方法里,设置时分秒的旋转形变就可以了,这里注意,CATransform3DMakeRotation这个接受的弧度而不是角度,我们再抽出一个宏来将角度转化为弧度

#define angle2radion(angle) ((angle) / 180.0 * M_PI)
- (void)timeChange{
    
    // 获取当前系统时间
    
    NSCalendar * calender = [NSCalendar currentCalendar];
    
    NSDateComponents * cmp = [calender components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour  fromDate:[NSDate date]];
    
    CGFloat second = cmp.second;
    
    CGFloat secondA = (second * perSecondA) ;
    
    NSInteger minute = cmp.minute;
    
    CGFloat mintuteA = minute * perMintueA ;
    
    NSInteger hour = cmp.hour;
    
    CGFloat hourA = hour * perHourA  + minute * perMinHourA;
    
    _secondLayer.transform = CATransform3DMakeRotation(angle2radion(secondA), 0, 0, 1);

    _mintueLayer.transform = CATransform3DMakeRotation(angle2radion(mintuteA), 0, 0, 1);
    
    _hourLayer.transform = CATransform3DMakeRotation(angle2radion(hourA), 0, 0, 1);
}

做到这里,基本上已经大功告成,让我们运行一下

时钟已经随着系统时间转了起来,还可以在修改一些别的样式,到时候就看开发者如何发挥了

本Dome的Github地址
https://github.com/DriverWang/YCClock

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 下面教大家用CALayer做时钟,不啰嗦了,上图上代码。 #import"ViewController.h" #d...
    aven_kang阅读 876评论 0 0
  • 声明:原创作品,转载请注明出处http://www.jianshu.com/p/c2abd6226897 在上篇文...
    蛇发女妖阅读 4,667评论 6 56
  • CALayer 概念 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文...
    iOS_Cqlee阅读 994评论 8 2
  • 参考:iOS动画系列之一:通过实战学习CALayer和透视的原理。做一个带时分秒指针的时钟动画(上)iOS动画系列...
    Andy_Ron阅读 2,872评论 4 4
  • 这双鞋是我的指画老师虞小风送的,我拜师那年,师父师娘特意在武汉差人手工订制,寄了两双。一双太小,这双也小,...
    卢果_ea05阅读 865评论 4 3