iOS實現漂亮的時鐘代碼

pwmd 9年前發布 | 6K 次閱讀 Objective-C IOS

1.最終效果圖

這里寫圖片描述

2.實現思路

  1. 在ios中默認是繞著中心點旋轉的,因為錨點默認在圖層的中點,要想繞著下邊中心點轉,需要改變圖層錨點的位置。
  2. 根據錨點,設置position坐標,為時鐘的中點。
  3. 思考秒針旋轉的角度,怎么知道當前秒針旋轉到哪,當前秒針旋轉的角度 = 當前秒數 * 每秒轉多少°。
    1> 計算一秒轉多少° 360 * 60 = 6
    2> 獲取當前秒數,通過日歷對象,獲取日期組成成分 NSCalendar -> NSDateComponents -> 獲取當前秒數
  4. 每隔一秒,獲取最新秒數,更新時鐘。
    • 分鐘一樣的做法
    • 時鐘也一樣
  5. 每一分鐘,時鐘也需要旋轉,60分鐘 -> 1小時 - > 30° ==》 每分鐘 30 / 60.0 一分鐘時針轉0.5°
  6. 把時針和秒針頭尾變尖,設置圓角半徑

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

 本文由用戶 pwmd 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!