iOS动画系列之二：带时分秒指针的时钟动画（下）-CSDN博客

好了，书接上文。上文地址：juejin.im/post/597962…

被自己的任性感动哭了，哈哈～了解了CALayer的一些基本属性之后，我们开始~~~撸管~~~撸起袖子敲代码了。

非典型技术宅又突发奇想，把这份代码用Objective-C和Swift都敲了一遍。文后面给了两个版本的源代码下载地址。

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);复制代码