首页 > 代码库 > iOS动画之美丽的时钟
iOS动画之美丽的时钟
1.终于效果图
2.实现思路
- 在ios中默认是绕着中心点旋转的,由于锚点默认在图层的中点,要想绕着下边中心点转,须要改变图层锚点的位置。
- 依据锚点。设置position坐标。为时钟的中点。
- 思考秒针旋转的角度,怎么知道当前秒针旋转到哪,当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。
1> 计算一秒转多少° 360 * 60 = 6
2> 获取当前秒数。通过日历对象,获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数 - 每隔一秒,获取最新秒数,更新时钟。
- 分钟一样的做法
- 时钟也一样
- 每一分钟。时钟也须要旋转,60分钟 -> 1小时 - > 30° ==》 每分钟 30 / 60.0 一分钟时针转0.5°
- 把时针和秒针头尾变尖,设置圆角半径
2.完整代码
#import "ViewController.h"
//获得当前的年月日 时分秒
#define CURRENTSEC [[NSCalendar currentCalendar] component:NSCalendarUnitSecond fromDate:[NSDate date]]
#define CURRENTMIN [[NSCalendar currentCalendar] component:NSCalendarUnitMinute fromDate:[NSDate date]]
#define CURRENTHOUR [[NSCalendar currentCalendar] component:NSCalendarUnitHour fromDate:[NSDate date]]
#define CURRENTDAY [[NSCalendar currentCalendar] component:NSCalendarUnitDay fromDate:[NSDate date]]
#define CURRENTMONTH [[NSCalendar currentCalendar] component:NSCalendarUnitMonth fromDate:[NSDate date]]
#define CURRENTYEAR [[NSCalendar currentCalendar] component:NSCalendarUnitYear fromDate:[NSDate date]]
//角度转换成弧度
#define ANGEL(x) x/180.0 * M_PI
#define kPerSecondA ANGEL(6)
#define kPerMinuteA ANGEL(6)
#define kPerHourA ANGEL(30)
#define kPerHourMinuteA ANGEL(0.5)
@interface ViewController ()
@property (nonatomic,strong) UIImageView *imageClock;
@property (nonatomic,strong) CALayer *layerSec;
@property (nonatomic,strong) CALayer *layerMin;
@property (nonatomic,strong) CALayer *layerHour;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.imageClock];
[self.imageClock.layer addSublayer:self.layerSec];
[self.imageClock.layer addSublayer:self.layerMin];
[self.imageClock.layer addSublayer:self.layerHour];
[self timeChange];
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)timeChange
{
self.layerSec.transform = CATransform3DMakeRotation(CURRENTSEC * kPerSecondA, 0, 0, 1);
self.layerMin.transform = CATransform3DMakeRotation(CURRENTMIN * kPerMinuteA, 0, 0, 1);
self.layerHour.transform = CATransform3DMakeRotation(CURRENTHOUR * kPerHourA, 0, 0, 1);
self.layerHour.transform = CATransform3DMakeRotation(CURRENTMIN * kPerHourMinuteA + CURRENTHOUR*kPerHourA, 0, 0, 1);
}
- (UIImageView *)imageClock
{
if (_imageClock == nil) {
_imageClock = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"钟表"]];
_imageClock.frame = CGRectMake(100, 100, 200, 200);
}
return _imageClock;
}
- (CALayer *)layerSec
{
if (_layerSec == nil) {
_layerSec = [CALayer layer];
_layerSec.bounds = CGRectMake(0, 0, 2, 80);
_layerSec.backgroundColor = [UIColor redColor].CGColor;
_layerSec.cornerRadius = 5;
_layerSec.anchorPoint = CGPointMake(0.5, 1);
_layerSec.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerSec;
}
- (CALayer *)layerMin
{
if (_layerMin == nil) {
_layerMin = [CALayer layer];
_layerMin.bounds = CGRectMake(0, 0, 4, 60);
_layerMin.backgroundColor = [UIColor blackColor].CGColor;
_layerMin.cornerRadius = 5;
_layerMin.anchorPoint = CGPointMake(0.5, 1);
_layerMin.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerMin;
}
- (CALayer *)layerHour
{
if (_layerHour == nil) {
_layerHour = [CALayer layer];
_layerHour.bounds = CGRectMake(0, 0, 6, 40);
_layerHour.backgroundColor = [UIColor blackColor].CGColor;
_layerHour.cornerRadius = 5;
_layerHour.anchorPoint = CGPointMake(0.5, 1);
_layerHour.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerHour;
}
3.Demo程序
https://github.com/Esdeath/clock
iOS动画之美丽的时钟
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。