iOS動畫之漂亮的時鐘

來源:互聯網
上載者:User

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;}
 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.