使用Quartz2D实现时钟动画

Posted 2020-06-14

使用Quartz2D实现时钟动画（一）

要实现时钟效果，首先将素材表盘拖入工程

 

1.定义时针、分针、秒针三个图层类成员属性

@property(nonatomic,strong)CALayer *secondLayer;
@property(nonatomic,strong)CALayer *minuteLayer;
@property(nonatomic,strong)CALayer *hourLayer;

2.建立表盘图层，设置属性，并添加到父view上

//    创建时钟layer  设置属性
    CALayer *clockLayer=[CALayer layer];
    clockLayer.contents=(__bridge id _Nullable)([UIImage imageNamed:@"05-clock"].CGImage);
    clockLayer.position=self.view.center;
    clockLayer.bounds=CGRectMake(0, 0, 150, 150);
    [self.view.layer addSublayer:clockLayer];

3.接着我们创建指针图层

3.1 创建时针图层添加到时钟图层上

 // 创建时针layer，设置图层属性
    CALayer *hourLayer=[CALayer layer];
    hourLayer.backgroundColor=[UIColor  blackColor].CGColor;
    hourLayer.bounds=CGRectMake(0, 0,4, 45);
    hourLayer.position=CGPointMake(clockLayer.bounds.size.width*0.5, clockLayer.bounds.size.height*0.5);
    hourLayer.anchorPoint=CGPointMake(0.5, 0.75);
    //  修改时针的锚点
    [clockLayer addSublayer:hourLayer];
    _hourLayer=hourLayer;

3.2 创建分针图层添加到时钟图层上

//    创建分针layer，设置图层属性
    CALayer *minuteLayer=[CALayer layer];
    minuteLayer.backgroundColor=[UIColor  redColor].CGColor;
    minuteLayer.bounds=CGRectMake(0, 0, 4, 55);
    minuteLayer.position=CGPointMake(clockLayer.bounds.size.width*0.5, clockLayer.bounds.size.height*0.5);
    minuteLayer.anchorPoint=CGPointMake(0.5, 0.75);
    //  修改分针的锚点
    [clockLayer addSublayer:minuteLayer];
    _minuteLayer=minuteLayer;

3.3 创建秒针图层添加到时钟图层上

//    创建分针layer，设置图层属性
    CALayer *minuteLayer=[CALayer layer];
    minuteLayer.backgroundColor=[UIColor  redColor].CGColor;
    minuteLayer.bounds=CGRectMake(0, 0, 4, 55);
    minuteLayer.position=CGPointMake(clockLayer.bounds.size.width*0.5, clockLayer.bounds.size.height*0.5);
    minuteLayer.anchorPoint=CGPointMake(0.5, 0.75);
    //  修改分针的锚点
    [clockLayer addSublayer:minuteLayer];
    _minuteLayer=minuteLayer; 

4.使用CADisplayLink开启定时功能，实现实时刷新数据（也可以使用NSTimer方法）。

//  开启定时器，监控时间
    CADisplayLink *link=[CADisplayLink displayLinkWithTarget:self selector:@selector(startRotate)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

此时我们的工程界面已经搭载完毕，现在要做的时建立他们之间的关系，实现startRotate方法，让指针随着时间转动。

5.引入 NSCalendar获取现时时间

 NSCalendar *calendar=[NSCalendar currentCalendar];
   NSDateComponents *components= [calendar components:NSCalendarUnitSecond |NSCalendarUnitMinute |NSCalendarUnitHour fromDate:[NSDate date]];

  获取时间属性

   //    获取秒数
    CGFloat sec=components.second;
    //    获取分钟数
    CGFloat minute=components.minute;
    //    获取小时
    CGFloat hour=components.hour;

6.接下来，我们需要理清时针，分针，秒针之间的关系。

#define perSecondA 6  //每秒钟秒针旋转6°
#define perMinuteA 6  //每分钟分针旋转6°
#define perHourA  30  //每小时时针旋转6°
#define perMinuteHourA 0.5   //每分钟时针旋转0.5°
#define  angle2randian(x)  ((x)/180.0*M_PI)    //角度转弧度

7.算出时针，分针，秒针需要旋转的度数。

   //    算出秒针旋转了多少度
    CGFloat secondA=sec *perSecondA;
    //    算出分针旋转了多少度
    CGFloat minuteA=minute*perMinuteA;
    //   算出时针旋转了多少度
    CGFloat hourA=hour*perHourA;
   //    时针与分针建立关系
    hourA +=minute*perMinuteHourA;

 8.调用CATransform3DMakeRotation方法，实现指针跳转

self.secondLayer.transform= CATransform3DMakeRotation(angle2randian(secondA), 0, 0, 1);
  self.minuteLayer.transform=CATransform3DMakeRotation(angle2randian(minuteA), 0, 0, 1);
    self.hourLayer.transform=CATransform3DMakeRotation(angle2randian(hourA), 0, 0, 1);

最后运行工程。