iOS 之UI进阶-CALayer创建时钟

时钟.gif

`CALayer`和`UIView`的区别

举个🌰
在一个白色的view上添加一个红色的layer和一个红色的view的区别是什么？
在一个白色的view上添加一个红色的layer就是一张白色的纸上有一块区域被涂成了红色
在一个白色的view上添加一个红色的view就是一张白色的纸上又放了一张红色的纸
事实上，view之所以能够显示在屏幕上完全是因为它内部的一个图层。换句话说view不具备显示功能，它只是为了处理和响应事件，layer才具备显示功能

首先创建表盘

  //创建一个表盘
    CALayer* clock = [[CALayer alloc]init];
    clock.bounds = CGRectMake(0, 0, 200, 200);
    clock.position = CGPointMake(200, 200);
    clock.contents = (__bridge id)[UIImage imageNamed:@"clock"].CGImage;
    clock.cornerRadius = 100;
    clock.masksToBounds = YES;

创建秒针之前先来说一说`CALayer`的锚点问题

锚点的类型是CGPoint类型，默认值是(0.5～0.5)即中心点，取值范围都是(0～1),也就是说通过(0～1)的取值我们可以定位到layer上的任意一个点上。
而你所设置的锚点的位置就是position所设置的位置，通过调整锚点的位置我们可以对layer进行微调。

具体可以看下图

WechatIMG251.png

创建秒针

  //创建秒针
    CALayer* second = [[CALayer alloc]init];
    second.bounds = CGRectMake(0, 0, 2, 100);
    second.position = clock.position;
    second.backgroundColor = UIColor.redColor.CGColor;
    //锚点（定位点）取值范围是（0～1）
    second.anchorPoint = CGPointMake(0.5, 0.7);

时钟刷新

CADisplayLink是一种以屏幕刷新频率为触发的时钟机制，每秒大概刷新60次，一般的动画效果都会采用CADisplayLink作为定时器，这样动画看上去才更加流畅。

创建计时器

CADisplayLink* link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeChanged)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

刷新方法

-(void)timeChanged{
    //计算一秒钟旋转的角度
    CGFloat angle = 2 * M_PI / 60;
    
    NSDate* date = [NSDate date];
    NSCalendar* calendar = [NSCalendar currentCalendar];
    CGFloat time = [calendar component:NSCalendarUnitSecond fromDate:date];
    self.second.affineTransform = CGAffineTransformMakeRotation(time*angle);
}

`CGAffineTransformMake` 和 `CGAffineTransform` 的区别

用旋转举例说明

CGAffineTransformMakeRotation(angle) //在最开始的位置上进行旋转
CGAffineTransformRotate(self.second.affineTransform, angle);//在原来的基础上旋转

最后编辑于：2019.06.20 18:01:49