标签：
使用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);
最后运行工程。
标签：
原文地址：http://www.cnblogs.com/xiejw/p/5202515.html
