快捷導(dǎo)航

iOS時(shí)鐘開(kāi)發(fā)案例分享

更新時(shí)間：2016年04月08日 09:39:33 作者：神戶牛肉

這篇文章主要為大家分享了iOS時(shí)鐘開(kāi)發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家介紹了iOS時(shí)鐘開(kāi)發(fā)過(guò)程，供大家參考，具體內(nèi)容如下

思路就是利用CALayer的隱式動(dòng)畫來(lái)實(shí)現(xiàn)。因?yàn)閁IView的非根層也就是手動(dòng)創(chuàng)建的layer在其屬性發(fā)生變化時(shí)會(huì)默認(rèn)會(huì)產(chǎn)生動(dòng)畫效果，這些屬性也叫作可動(dòng)畫屬性。比如bounds、backgroundColor、position。

時(shí)鐘里面表盤就是一個(gè)UIView，而三根針就是三個(gè)手動(dòng)創(chuàng)建的layer。

先在storyboard上弄一個(gè)UIImageView，設(shè)置表盤圖片

然后在viewDidLoad中初始化三根針，并設(shè)置定時(shí)器，獲取當(dāng)前時(shí)間，將當(dāng)前時(shí)間對(duì)應(yīng)的時(shí)針?lè)轴樏脶樂(lè)謩e指向?qū)?yīng)的角度。

//
// ViewController.m
// 時(shí)鐘效果
//
// Created by Daniel on 16/4/7.
// Copyright © 2016年 Daniel. All rights reserved.
//
 
#define kClockWH _clockView.bounds.size.width
 
//一秒鐘秒針轉(zhuǎn)多少度
#define preSecondA 6
 
//一分鐘分針轉(zhuǎn)多少度
#define preMinuteA 6
 
//一小時(shí)時(shí)針轉(zhuǎn)多少度
#define preHourA 30
 
//每分鐘時(shí)針轉(zhuǎn)多少度
#define preHourMinute 0.5
 
//每秒鐘分針轉(zhuǎn)多少度
#define preMinuteSecond 0.1
 
#define angle2raditon(a) ((a) / 180.0 * M_PI)
 
#import "ViewController.h"
 
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *clockView;
 
/** 秒針 */
@property(nonatomic, strong) CALayer *secondL;
 
/** 分針 */
@property(nonatomic, strong) CALayer *minuteL;
 
/** 時(shí)針 */
@property(nonatomic, strong) CALayer *hourL;
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
 [super viewDidLoad];
  
 //添加時(shí)針
 [self setUpHourLayer];
  
 //添加分針
 [self setUpMinuteLayer];
 
 //添加秒針
 [self setUpSecondLayer];
  
 //添加定時(shí)器
 [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
  
 //開(kāi)始運(yùn)行時(shí)就獲取時(shí)間，這樣在啟動(dòng)時(shí)就不會(huì)有停頓的感覺(jué)
 [self timeChange];
  
}
 
- (void)timeChange {
  
 //獲取當(dāng)前系統(tǒng)時(shí)間
 NSCalendar *calendar = [NSCalendar currentCalendar];
  
 NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
  
 //獲取秒
 NSInteger second = cmp.second;
  
 //獲取分
 NSInteger minute = cmp.minute;
  
 //獲取小時(shí)
 NSInteger hour = cmp.hour;
  
 //計(jì)算秒針轉(zhuǎn)多少度
 CGFloat secondA = second * preSecondA;
  
 //計(jì)算分針轉(zhuǎn)多少度
 CGFloat minuteA = minute * preMinuteA + second * preMinuteSecond;
  
 //計(jì)算時(shí)針轉(zhuǎn)多少度
 CGFloat hourA = hour * preHourA + minute * preHourMinute;
  
 //旋轉(zhuǎn)秒針
 _secondL.transform = CATransform3DMakeRotation(angle2raditon(secondA), 0, 0, 1);
  
 //旋轉(zhuǎn)分針
 _minuteL.transform = CATransform3DMakeRotation(angle2raditon(minuteA), 0, 0, 1);
  
 //旋轉(zhuǎn)時(shí)針
 _hourL.transform = CATransform3DMakeRotation(angle2raditon(hourA), 0, 0, 1);
  
}
 
#pragma mark - 初始化時(shí)針
- (void)setUpHourLayer {
  
 CALayer *hourL = [CALayer layer];
  
 //設(shè)置秒針背景色
 hourL.backgroundColor = [UIColor blackColor].CGColor;
  
 //設(shè)置秒針錨點(diǎn)
 hourL.anchorPoint = CGPointMake(0.5, 1);
  
 //設(shè)置秒針錨點(diǎn)在父控件的位置
 hourL.position = CGPointMake(kClockWH * 0.5, kClockWH * 0.5);
  
 hourL.cornerRadius = 4;
  
 //設(shè)置秒針bounds
 hourL.bounds = CGRectMake(0, 0, 4, kClockWH * 0.5 - 40);
  
 //把秒針添加到clockView圖層上
 [_clockView.layer addSublayer:hourL];
  
 _hourL = hourL;
  
}
 
 
#pragma mark - 初始化分針
- (void)setUpMinuteLayer {
  
 CALayer *minuteL = [CALayer layer];
  
 //設(shè)置秒針背景色
 minuteL.backgroundColor = [UIColor blackColor].CGColor;
  
 //設(shè)置秒針錨點(diǎn)
 minuteL.anchorPoint = CGPointMake(0.5, 1);
  
 //設(shè)置秒針錨點(diǎn)在父控件的位置
 minuteL.position = CGPointMake(kClockWH * 0.5, kClockWH * 0.5);
  
 minuteL.cornerRadius = 4;
  
 //設(shè)置秒針bounds
 minuteL.bounds = CGRectMake(0, 0, 4, kClockWH * 0.5 - 20);
  
 //把秒針添加到clockView圖層上
 [_clockView.layer addSublayer:minuteL];
  
 _minuteL = minuteL;
  
}
 
#pragma mark - 初始化秒針
- (void)setUpSecondLayer {
  
 CALayer *secondL = [CALayer layer];
  
 //設(shè)置秒針背景色
 secondL.backgroundColor = [UIColor redColor].CGColor;
  
 //設(shè)置秒針錨點(diǎn)
 secondL.anchorPoint = CGPointMake(0.5, 1);
  
 //設(shè)置秒針錨點(diǎn)在父控件的位置
 secondL.position = CGPointMake(kClockWH * 0.5, kClockWH * 0.5);
  
  
 //設(shè)置秒針bounds
 secondL.bounds = CGRectMake(0, 0, 1.5, kClockWH * 0.5 - 20);
  
 //把秒針添加到clockView圖層上
 [_clockView.layer addSublayer:secondL];
  
 _secondL = secondL;
  
}
 
 
@end

效果圖：