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

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

本文中，我们用另一种方法实现时钟动画。

1.将表盘定义为私有属性

  //定义表盘
@property (weak, nonatomic) IBOutlet UIImageView *clockView;

2.在.m文件中定义三个成员变量

 CALayer * _second;//秒针图层
    CALayer * _minute;//分针图层
    CALayer *_hour;    //时针图层

3.定义方法，实现指针图层的绘制

3.1、实现时针图层方法

  //时针图层
-(void)addHour{
    CGFloat imageW=_clockView.bounds.size.width;
    CGFloat imageH=_clockView.bounds.size.height;
    //    添加秒针
    CALayer *hour =[CALayer layer];
    //    设置锚点
    hour.anchorPoint=CGPointMake(0.5, 1);
    //    设置位置
    hour.position=CGPointMake(imageW*0.5, imageH*0.5);
    //    设置尺寸
   hour.bounds=CGRectMake(0, 0, 10, imageH*0.5-50);
    //    设置颜色
    hour.backgroundColor=[UIColor blackColor].CGColor;
    hour.cornerRadius=6;
    [_clockView.layer addSublayer: hour];
    _hour= hour;
}

3.2、实现分针图层方法。

 //  分针图层
-(void)addMinute{
    CGFloat imageW=_clockView.bounds.size.width;
    CGFloat imageH=_clockView.bounds.size.height;
    //    添加秒针
    CALayer *minute =[CALayer layer];
    //    设置锚点
    minute.anchorPoint=CGPointMake(0.5, 1);
    //    设置位置
    minute.position=CGPointMake(imageW*0.5, imageH*0.5);
    //    设置尺寸
   minute.bounds=CGRectMake(0, 0, 6, imageH*0.5-40);
    //    设置颜色
     minute.backgroundColor=[UIColor greenColor].CGColor;
    minute.cornerRadius=4;
    [_clockView.layer addSublayer: minute];
    _minute= minute;
}

3.3、实现秒针图层方法。

//   秒针图层
-(void)addSecond
{
    CGFloat imageW=_clockView.bounds.size.width;
    CGFloat imageH=_clockView.bounds.size.height;
//    添加秒针
    CALayer *second =[CALayer layer];
//    设置锚点
    second.anchorPoint=CGPointMake(0.5, 1);
//    设置位置
    second.position=CGPointMake(imageW*0.5, imageH*0.5);
//    设置尺寸
    second.bounds=CGRectMake(0, 0, 4, imageH*0.5-30);
//    设置颜色
    second.backgroundColor=[UIColor redColor].CGColor;
    [_clockView.layer addSublayer:second];
    _second=second;
}

4.在viewDidload方法中添加三个图层

    [self addSecond];
    [self addMinute];
    [self addHour];

5.创建定义器，监控刷新数据。

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

6.实现定时器方法，刷新数据（方法和使用Quartz2D实现时钟动画（一）中相同，此处不再过多解释，直接插入代码。

-(void)update
{
//    获取日历对象
    NSCalendar *calendar=[NSCalendar currentCalendar];
//    获取日期组件
    NSDateComponents *compoents=[calendar components:NSCalendarUnitSecond|NSCalendarUnitHour|NSCalendarUnitMinute fromDate:[NSDate date]];
//    获取秒数
    CGFloat sec=compoents.second;
//    获取分钟数
    CGFloat minute=compoents.minute;
//    获取小时
    CGFloat hour=compoents.hour;
//    算出秒针旋转了多少度
    CGFloat secondA=sec *perSecondA;
//    算出分针旋转了多少度
    CGFloat minuteA=minute*perMinuteA;
//   算出时针旋转了多少度
    CGFloat hourA=hour*perHourA;
    hourA +=minute*perMinuteHourA;
//    旋转秒针
    _second.transform= CATransform3DMakeRotation(angle2randian(secondA), 0, 0, 1);
    _minute.transform=CATransform3DMakeRotation(angle2randian(minuteA), 0, 0, 1);
    _hour.transform=CATransform3DMakeRotation(angle2randian(hourA), 0, 0, 1);
}

最后运行工程，完成功能。