iOS动画系列之二:带时分秒指针的时钟动画(下)1. 创建CALayer2. 设置时分秒针3. 创建CADisplayLink4. 成稿

1. 创建CALayer

  • position:默认情况下相当于UIView的center
  • contents:CALayer的内容。可以设置为图片,但是需要桥接。桥接不需要自己额外设置,编译后编译器会自动提示,让Xcode自动帮我们桥接就可以啦。
  • 就像添加子视图一样,别忘了把自己创建的Layer添加到view.layer上面。
- (void)viewDidLoad {
    [super viewDidLoad];
    
    CALayer *dialLayer= [[CALayer alloc] init];
    dialLayer.bounds = CGRectMake(0, 0, 150, 150);
    
    dialLayer.position = self.view.center;
    
    dialLayer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"clock"].CGImage);
    
    [self.view.layer addSublayer:dialLayer];
}

2. 设置时分秒针

以秒针为例。时针、分针都是一样的。

//    设置秒针
    UIView *secondHandView = [[UIView alloc]init];
    secondHandView.backgroundColor = [UIColor redColor];
    secondHandView.bounds = CGRectMake(0, 0, 1, 60);
    secondHandView.center = self.view.center;
    
    
//    修改锚点
    secondHandView.layer.anchorPoint = CGPointMake(0.5, 1);
    [self.view addSubview:secondHandView];
    self.secondHandView = secondHandView;

锚点是个神马东东?

锚点是神马吶?打个比方,我们耍双截棍的时候,双截棍其实都是围绕咱们握拳的地方转来转去的,?其实就是双截棍的锚点。

再打个比方,我们在一张A4纸上面钉一个?。然后旋转A4纸,那颗图钉的位置就是A4纸的锚点。

所以锚点肯定是个坐标点喽~有X、Y组成。锚点的数值范围就是0~1。0表示在最左边或者最上边,1表示在最右边或者最下边。有点模糊是不?再来张图就更清楚了:

锚点示意图1.png

锚点示意图2.png

咱们刚才绘制的秒针实际就是一个宽1,长60的一个View。咱们要让它旋转起来的时候围绕着一个点转,就要把那个点用图钉钉上。这个图钉的位置就是锚点,就是我们在代码中设置的(0.5,1).

3. 创建CADisplayLink

我们一开始想到的办法就是用定时器,每一秒钟刷新一次秒针。但是使用了定时器之后,有一个问题。发现秒针比电脑上的稍微慢一点。是因为刷新频率和电脑不一样。

  • 解决方法就是使用CADisplayLink来刷新时钟。
//    创建CADisplayLink
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(clockRunning)];
//    将创建的CADisplayLink加入到主线程中
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

3.1 CADisplayLink和NSTimer的区别

  • NSTimer占用系统资源较多
  • NSTimer使用完后,一定要销毁,把它设置成nil。
  • CADisplayLink本来就在进程中,每秒进行60次。
  • 核心动画的时候,最好使用CADisplayLink

3.2 获取时间及时区

  • clockRunning这个方法中,我们要设置时区,获取日历、当前时间。

在和时间打交道的时候,请千万别忘记了时区。全球有那么多国家,不要只想着自己哈。

//获取本地时区
    NSTimeZone *tZone = [NSTimeZone localTimeZone];

//    获取日历
    NSCalendar *calendar = [NSCalendar currentCalendar];
    
//获取系统当前时间    
    NSDate *currentDate = [NSDate date];
 //设置日历的时区   
    [calendar setTimeZone:tZone];
//取出当前的时分秒
    NSDateComponents *currentTime = [calendar components:NSCalendarUnitSecond|NSCalendarUnitMinute|NSCalendarUnitHour|NSCalendarUnitTimeZone fromDate:currentDate];

3.3 根据当前时间计算时分秒针弧度

根据当前时间计算时分秒针弧度,然后让自己设置的View进行形变。

因为咱们这个方法是通过CADisplayLink来调用的,也就是说一分钟会被调用60次。因此每秒咱们的秒针都会旋转一次。

    CGFloat angle = (M_PI * 2 / 60) * currentTime.second;
    
    self.secondHandView.transform = CGAffineTransformMakeRotation(angle);
    
    CGFloat minuteAngle = (M_PI * 2 / 60) * currentTime.minute;
    self.minuteHandView.transform = CGAffineTransformMakeRotation(minuteAngle);
    
    CGFloat hourAngle = (M_PI * 2 / 12) * currentTime.hour;
    self.hourHandView.transform = CGAffineTransformMakeRotation(hourAngle);

4. 成稿

完成效果:

Paste_Image.png

OC和Swift的下载地址如下: https://git.oschina.net/atypical/clock.git

iOS实践:带时分秒指针的时钟动画(OC和Swift两版)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1453
来自专栏向治洪

Android仿网易云音乐播放界面

概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。这里抛砖引玉,原文地址:http://www.jianshu.co...

94310
来自专栏進无尽的文章

实践 -实现一款中间凸起的TabBar

这是看到一篇文章后感觉很有意思于是就把自己的效果改了改实现了一下,文末有原文链接。

1302
来自专栏陈满iOS

iOS开发·适配iPhone X相关的宏和方法

适配iPhone X和Xcode 9的过程中,除了与导航栏相关的问题,还有一个问题经常出现,就是UITableView相关的问题。下面两个办法可以解决多数错位的...

1174
来自专栏菩提树下的杨过

Flash/Flex学习笔记(37):不用系统组件(纯AS3)的视频播放器--只有8.82K

以前为了赶项目,利用系统组件制作过一款视频播放器(见Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器),但是系统组件实在是太大了,最终...

21010
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1291
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

5298
来自专栏林德熙的博客

Xamarin Forms 进度条控件

本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-c...

1381
来自专栏AndroidTv

【Android】属性动画的使用理解

属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

2753
来自专栏Golang语言社区

转--Golang语言版 ssh口令破解工具

使用说明: ? iplist的格式为ip:port,如111.111.111.111:22 user.txt为用户名字典 password.txt为密码字典 g...

3027

扫码关注云+社区