简单的时钟动画

时钟.gif

时钟动画:

注意:

• 1.分针不是一次性转动的,时针随着分针的转动也在转动:minute * perMinuteHour:每分钟转动0.1度 ;
• 2.时针不是一次性转动的,时针随着分针的转动也在转动:minute * perMinuteHour:每分钟转动0.5度 ;
• 3.KVC键值编码在本案例中会有问题,当秒针30秒到31秒的时候会逆时针转一次~总之KVC会有一些小瑕疵之于本例 ;
• 4.关于锚点anchorPoint的介绍
• 5.关于位置position的介绍

viewController.m文件:

#import "ViewController.h"

#define kClockW _clockView.bounds.size.width / 2
#define perSecond 6 //一秒钟转6度 ;
#define angle2Radius(a) ((a) / 180.0 *M_PI)
#define perMinute 6 //一分钟转6度 ;
#define perHour 30  //一小时分针转30度 ;
#define perSecondMinute 0.1 //分针每秒钟转动0.1度
#define perMinuteHour 0.5   //时针每分钟转0.5度 ;

@interface ViewController ()
//时钟的图片视图:
@property (weak, nonatomic) IBOutlet UIImageView *clockView;
//秒针:
@property (nonatomic , strong) CALayer *secondLayer ;
//分针:
@property (nonatomic , strong) CALayer *minuteLayer ;
//时针:
@property (nonatomic , strong) CALayer *hourLayer ;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupHourLayer] ;
    //添加分针:
    [self setupMinuteLayer] ;
    //添加秒针:
    [self setupSecondLayer] ;
    //添加定时器:
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES] ;
    
    //控制器也调用该方法,让屏幕一进来就是当前时间,不至于发生跳转现象:
    [self timeChange] ;
    
}

#pragma mark - 通过定时器让表针转动
- (void)timeChange {
    //获取当前日历对象:
    NSCalendar *calendar = [NSCalendar currentCalendar] ;
    //获取日期组件:
    // | :并运算
    //枚举值当中有移位符: << 就可以并运算 ;
    NSDateComponents *component = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]] ;
    
    //获取当前日期的秒数:
    CGFloat second = component.second ;
    //计算一秒钟转多少度:(角度转弧度 π/180×角度)
    //perSecond == 6 秒 ;
    CGFloat secondAngle = second * perSecond ;
    //    旋转:
        _secondLayer.transform = CATransform3DMakeRotation(angle2Radius(secondAngle), 0, 0, 1) ;
//        用KVC就是会出问题!!!当秒针从30秒走到31秒的时候不会顺时针,会逆时针一次!!!
//        旋转KVC实现:
//        [_secondLayer setValue:@(angle2Radius(secondAngle)) forKeyPath:@"transform.rotation"] ;
    NSLog(@"秒针值 = %ld" , component.second) ;
    
    
    CGFloat minute = component.minute ;
    NSLog(@"分针值 = %ld" , component.minute) ;
    //分针不是一次性转动的,时针随着分针的转动也在转动:minute * perMinuteHour:每分钟转动0.1度 ;
    CGFloat minuteAngle = minute * perMinute + second * perSecondMinute ;
    _minuteLayer.transform = CATransform3DMakeRotation(angle2Radius(minuteAngle), 0, 0, 1) ;
//    KVC:
//    [_minuteLayer setValue:@(angle2Radius(minuteAngle)) forKeyPath:@"transform.rotation"] ;
    
    
    CGFloat hour = component.hour ;
    NSLog(@"时针值 = %ld", component.hour) ;
    //时针不是一次性转动的,时针随着分针的转动也在转动:minute * perMinuteHour:每分钟转动0.5度 ;
    CGFloat hourAngle = hour * perHour + minute * perMinuteHour ;
    _hourLayer.transform = CATransform3DMakeRotation(angle2Radius(hourAngle), 0, 0, 1) ;
    //    KVC:
    //    [_hourLayer setValue:@(angle2Radius(hourAngle)) forKeyPath:@"transform.rotation"] ;
    
}

#pragma mark - 添加秒针
- (void)setupSecondLayer {
    
    CALayer *secondLayer = [CALayer layer] ;
    
    secondLayer.backgroundColor = [[UIColor redColor] CGColor] ;
    
    //设置锚点的位置:
    //绕着0.5 , 1 的位置旋转:
    secondLayer.anchorPoint = CGPointMake(0.5, 1) ;
    
    secondLayer.position = CGPointMake(kClockW, kClockW) ;
    
    secondLayer.bounds = CGRectMake(0, 0, 2, kClockW - 20) ;
    
    secondLayer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1) ;
    
    [_clockView.layer addSublayer:secondLayer] ;
    
    _secondLayer = secondLayer ;
    
}

#pragma mark - 添加分针
- (void)setupMinuteLayer {
    
    CALayer *minuteLayer = [CALayer layer] ;
    
    minuteLayer.backgroundColor = [[UIColor blackColor] CGColor] ;
    
    //设置锚点的位置:
    //绕着0.5 , 1 的位置旋转:
    minuteLayer.anchorPoint = CGPointMake(0.5, 1) ;
    
    minuteLayer.position = CGPointMake(kClockW, kClockW) ;
    
    minuteLayer.bounds = CGRectMake(0, 0, 4, kClockW - 30) ;
    
    minuteLayer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1) ;
    
    //箭头效果:
    minuteLayer.cornerRadius = 1 ;

    [_clockView.layer addSublayer:minuteLayer] ;
    
    _minuteLayer = minuteLayer ;
    
}


#pragma mark - 添加时针
- (void)setupHourLayer {
    
    CALayer *hourLayer = [CALayer layer] ;
    
    hourLayer.backgroundColor = [[UIColor blackColor] CGColor] ;
    
    //设置锚点的位置:
    //绕着0.5 , 1 的位置旋转:
    hourLayer.anchorPoint = CGPointMake(0.5, 1) ;
    
    hourLayer.position = CGPointMake(kClockW, kClockW) ;
    
    hourLayer.bounds = CGRectMake(0, 0, 4, kClockW - 50) ;
    
    hourLayer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1) ;
    //箭头效果:
    hourLayer.cornerRadius = 3 ;
    
    [_clockView.layer addSublayer:hourLayer] ;
    
    _hourLayer = hourLayer ;
    
}

@end

愿编程让这个世界更美好