iOS核心动画 一一 钟表

本文源代码请参考: https://github.com/coderZYGui/ZYClocks

效果如下图:

实现思路:

 1. (秒针) 根据CALayer创建一个secLayer,让secLayer旋转,默认是绕着锚点(0.5,0.5)旋转(中心),      显然要修改锚点的位置为secLayer的底部,因此设置锚点为(0.5,1).

 2. 创建NSTimer对象,每1s做旋转操作.

 2. 当secLayer旋转,要计算当前旋转度是多少 = 当前的时间 * 每秒旋转的度数.

 3. 当前的时间, 要根据日历类(NSCalendar)来创建,然后获得当前的 时,分,秒等.

 4. 角度转为弧度. #define angle2Rad(angle) ((angle) / 180.0 * M_PI).

 注意: 

     1. 当计算时针角度时,应加上 当每一分钟时针应该走多少度.

     2. 另外所有的旋转,缩放都是绕着锚点形变.

代码不多,想要源码的可去我Github中下载.

ViewController文件.

#import "ViewController.h"
// 时钟宽的一半
#define COLOCKW self.clockV.bounds.size.width * 0.5
// 时钟高的一半
#define COLOCKH self.clockV.bounds.size.height * 0.5
// 每一秒走多少度
#define everySecondAngle 6
// 每一分走多少度
#define everyMinuteAngle 6
// 每时走多少度
#define everyHourAngle 30
// 每一分钟时针走多少度
#define everMinHourAngle 0.5
// 角度转弧度
#define angle2Rad(angle) ((angle) / 180.0 * M_PI)

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *clockV;

@property (weak, nonatomic) IBOutlet UIView *blackV;

@property (nonatomic, weak) CALayer *secLayer;

@property (nonatomic, weak) CALayer *minLayer;

@property (nonatomic, weak) CALayer *hourLayer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //    [self setHour];
    //    [self setMinute];
    //    [self setSecond];
    
    // 添加时针
    self.hourLayer = [self createTimeLayer:CGRectMake(0, 0, 4, 50) color:[UIColor blackColor]];
    
    // 添加分针
    self.minLayer = [self createTimeLayer:CGRectMake(0, 0, 4, 70) color:[UIColor blackColor]];
    
    // 添加秒针
    self.secLayer = [self createTimeLayer:CGRectMake(0, 0, 2, 80) color:[UIColor redColor]];
    
    // 添加定时器
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
    // 因为上面的定时器方法隔一秒才会调用,所以先调用一次
    [self timeChange];
    
    self.blackV.layer.cornerRadius = self.blackV.bounds.size.width * 0.5;
    
}

- (void)timeChange
{
    // 获取当前日历
    NSCalendar *calendar = [NSCalendar currentCalendar];
    NSDateComponents * cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
    // 获取当前多少秒
    NSInteger curSec = cmp.second;
    // 获取当前分
    NSInteger curMin = cmp.minute;
    // 获取当前时
    NSInteger curHour = cmp.hour;
    
    // 秒针开始旋转
    // 计算秒针的角度 = 当前秒 * 每秒转的角度
    self.secLayer.transform = [self setTimeAngle:(curSec * everySecondAngle)];
    
    // 分针开始旋转
    // 计算分针角度 = 当前分 * 每分钟转的角度
    self.minLayer.transform = [self setTimeAngle:(curMin * everyMinuteAngle)];
    
    // 时针针开始旋转
    // 计算时针的角度 = 当前时 * 每小时转的角度 + 当前分 * 每一分时针转的角度
    self.hourLayer.transform = [self setTimeAngle:(curHour * everyHourAngle + curMin * everMinHourAngle)];
    
}

/**
 设置针角度
 
 @param angle 角度
 @return CATransform3D
 */
- (CATransform3D)setTimeAngle:(CGFloat)angle
{
    return CATransform3DMakeRotation(angle2Rad(angle), 0, 0, 1);
}

/**
 创建三个针
 
 @param frame 大小
 @param backgroundColor 背景颜色
 @return CALayer
 */
- (CALayer *)createTimeLayer:(CGRect)frame color:(UIColor *)backgroundColor
{
    CALayer *timpLayer = [CALayer layer];
    timpLayer.frame = frame;
    timpLayer.backgroundColor = backgroundColor.CGColor;
    timpLayer.anchorPoint = CGPointMake(0.5, 1);
    timpLayer.position = CGPointMake(COLOCKW, COLOCKH);
    [self.clockV.layer addSublayer:timpLayer];
    
    return timpLayer;
}

@end