登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

模拟时钟

[复制链接]
来自: allenjzl 分类: iOS精品源码 上传时间: 2016-6-12 18:22:58
Tag:时钟 clock 动画 layer animation

项目介绍:

新人求罩,很简单的一个模拟时钟,可以显示当前日期和时分秒。

主要实现代码:
[Objective-C] 查看源文件 复制代码
#import "ViewController.h"

@interface ViewController ()
/**
 *  表盘
 */
@property (nonatomic, weak) CALayer *clockLayer;

/**
 *  秒针
 */
@property (nonatomic, weak) CALayer *secondLayer;
/**
 *  分针
 */
@property (nonatomic, weak) CALayer *minLayer;

/**
 *  时针
 */
@property (nonatomic, weak) CALayer *hourLayer;

/**
 *  日期
 */
@property (nonatomic, weak) UILabel *dateLbl;
/**
 *  星期
 */
@property (nonatomic, weak) UILabel *weekLbl;




@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //搭建表盘界面
    [self setClockUI];
    //搭建秒针指针
    [self setSecondUI];
    //搭建分针指针
    [self setMinUI];
    //搭建时针指针
    [self setHourUI];
    //添加定时器刷新
    [self addSecondTimer];
}


#pragma mark - 搭建表盘界面
- (void)setClockUI {
    //创建layer
    CALayer *clockLayer = [CALayer layer];
    //设置尺寸
    clockLayer.bounds = CGRectMake(0, 0, 300, 301);
    //设置位置
    clockLayer.position = self.view.center;
    //设置图片
    clockLayer.contents = (__bridge id)[UIImage imageNamed:@"06-clock"].CGImage;
    //显示
    [self.view.layer addSublayer:clockLayer];
    //赋值
    _clockLayer = clockLayer;
    //添加日期lbl
    UILabel *dateLbl = [[UILabel alloc] init];
    //设置尺寸和位置
    dateLbl.bounds = CGRectMake(0, 0, 75, 18);
    dateLbl.center = CGPointMake(self.view.bounds.size.width / 2 , self.view.bounds.size.height / 2 +50);
    //居中
    dateLbl.textAlignment = NSTextAlignmentCenter;
    //设置字体
    dateLbl.font = [UIFont systemFontOfSize:14.0];
    //设置边框
    dateLbl.layer.borderWidth = 1;
    dateLbl.layer.borderColor = [UIColor blackColor].CGColor;
    //显示
    [self.view addSubview:dateLbl];
    //赋值
    _dateLbl = dateLbl;
    
    
    //添加星期lbl
    UILabel *weekLbl = [[UILabel alloc] init];
    //设置尺寸和位置
    weekLbl.bounds = CGRectMake(0, 0, 45, 16);
    weekLbl.center = CGPointMake(self.view.bounds.size.width / 2 +50 , self.view.bounds.size.height / 2 );
    //居中
    weekLbl.textAlignment = NSTextAlignmentCenter;
    //设置字体
    weekLbl.font = [UIFont systemFontOfSize:14.0];
    //设置边框
    weekLbl.layer.borderWidth = 1;
    weekLbl.layer.borderColor = [UIColor blackColor].CGColor;
    //显示
    [self.view addSubview:weekLbl];
    //赋值
    _weekLbl = weekLbl;


    
   }


#pragma mark - 搭建秒针指针
- (void)setSecondUI {
    //创建秒针指针
    CALayer *secondLayer = [CALayer layer];
    //设置尺寸
    secondLayer.bounds = CGRectMake(0, 0, 1, 150);
    
    //设置位置
    //1.表盘的大小
    CGSize size = self.clockLayer.bounds.size;
    secondLayer.position = CGPointMake(size.width / 2, size.height / 2);
    //2.修改定位点,重新定位秒针的位置
    secondLayer.anchorPoint = CGPointMake(0.5, 0.75);
    
    //设置表针颜色
    secondLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //设置秒针的初始位置
    //1.获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //2.获取当前时间(秒)
    NSInteger second = [calendar component:NSCalendarUnitSecond fromDate:[NSDate date]];
    //3.计算秒针对应的角度
    CGFloat startA = (M_PI * 2) / 60 * second;
    secondLayer.transform = CATransform3DRotate(secondLayer.transform, startA, 0, 0, 1);
    
    //显示
    [self.clockLayer addSublayer:secondLayer];
    //赋值
    _secondLayer = secondLayer;
    

    
}
#pragma mark - 搭建分针指针
- (void)setMinUI {
    //创建分针指针
    CALayer *minLayer = [CALayer layer];
    //设置尺寸
    minLayer.bounds = CGRectMake(0, 0, 1, 120);
    
    //设置位置
    minLayer.position = CGPointMake(self.clockLayer.bounds.size.width / 2, self.clockLayer.bounds.size.height / 2);
    //修改定位点
    minLayer.anchorPoint = CGPointMake(0.5, 0.90);
    
    //设置颜色
    minLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //设置分针的初始位置
    //1.获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //2.获取当前时间(分)
    NSInteger min = [calendar component:NSCalendarUnitMinute fromDate:[NSDate date]];
    //3.获取当前时间(秒)
    NSInteger second = [calendar component:NSCalendarUnitSecond fromDate:[NSDate date]];
    //4.计算分针对应的角度
    CGFloat minStartA = (M_PI * 2) / 60  * (min + (float)second / 60);
    minLayer.transform = CATransform3DRotate(minLayer.transform, minStartA, 0, 0, 1);
    
    //添加
    [self.clockLayer addSublayer:minLayer];
    //赋值
    _minLayer = minLayer;
    

    
}

#pragma mark - 搭建时针指针
- (void)setHourUI {
    //设置时针指针
    CALayer *hourLayer = [CALayer layer];
    //设置尺寸
    hourLayer.bounds = CGRectMake(0, 0, 1, 80);
    
    //设置位置
    hourLayer.position = CGPointMake(self.clockLayer.bounds.size.width / 2, self.clockLayer.bounds.size.height / 2);
    //修改定位点
    hourLayer.anchorPoint = CGPointMake(0.5, 0.90);
    
    //设置颜色
    hourLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //设置时针初始位置
    //1.获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //2.获取当前时间(时)
    NSInteger hour = [calendar component:NSCalendarUnitHour fromDate:[NSDate date]];
    //3.获取当前时间(分)
    NSInteger min = [calendar component:NSCalendarUnitMinute fromDate:[NSDate date]];
    //4.计算时针对应的角度
    CGFloat hourStartA = (M_PI * 2) / 12 * (hour + (float)min / 60 );
    hourLayer.transform = CATransform3DRotate(hourLayer.transform, hourStartA, 0, 0, 1);
    
    //添加
    [self.clockLayer addSublayer:hourLayer];
    //赋值
    _hourLayer = hourLayer;

}

#pragma mark - 添加定时器刷新
- (void)addSecondTimer {
    //创建定时器(默认刷新频率60Hz/sec)
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(refresh)];
    
    //定时器添加到循环中
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    
}
//定时器刷新方法实现
- (void)refresh {
    //获取日历对象
     NSCalendar *calendar = [NSCalendar currentCalendar];
    //获取时间
     NSInteger second = [calendar component:NSCalendarUnitSecond fromDate:[NSDate date]];
    //月份
    NSInteger month = [calendar component:NSCalendarUnitMonth fromDate:[NSDate date]];
    //日期
    NSInteger day = [calendar component:NSCalendarUnitDay fromDate:[NSDate date]];
    //星期
    NSInteger week = [calendar component:NSCalendarUnitWeekday fromDate:[NSDate date]];
    
    
    //计算秒针对应的角度,每秒角度改变一次,屏幕刷新秒针就会改变
    CGFloat startA = (M_PI * 2) / 60 * second ;
    self.secondLayer.transform = CATransform3DMakeRotation(startA, 0, 0, 1);

    //计算每次刷新分针应转的角度
    CGFloat minStartA = (M_PI * 2) / 60 / 60 / 60 ;//一分钟60秒,转动角度是秒针的1/60
    self.minLayer.transform = CATransform3DRotate(self.minLayer.transform, minStartA, 0, 0, 1);
    
    //计算每次刷新时针应转的角度
    CGFloat hourStartA = (M_PI * 2) / 60 / 60 / 60 / 60;//一小时3600秒,转动角度是秒针的1/3600
    self.hourLayer.transform = CATransform3DRotate(self.hourLayer.transform, hourStartA, 0, 0, 1);
    
    
    
  //设置日期
    self.dateLbl.text = [NSString stringWithFormat:@"%02zd月%02zd日",month,day];
    //设置星期
    NSString *weekday =  [self returnWeek:week];
    self.weekLbl.text = [NSString stringWithFormat:@"星期%@",weekday];
    
}
//返回中文的星期几
- (NSString *)returnWeek: (NSInteger)week{
    switch (week) {
        case 1:
            return @"日";
            break;
        case 2:
            return @"一";
            break;
        case 3:
            return @"二";
            break;
        case 4:
            return @"三";
            break;
        case 5:
            return @"四";
            break;
        case 6:
            return @"五";
            break;
        default:
            return @"六";
    }
}
@end


DEMO下载:
运行demo可以查看效果,而且在demo中,针对各种文本和图文的实现都有详细的用例
模拟时钟.zip (61.75 KB, 下载次数: 49, 售价: 5 金钱)
我来说两句
*滑动验证:
所有评论(4)
王颖博 2016-6-14 09:33:27
感谢分享,Code4App有你更精彩
回复
半吱湮 2016-6-14 11:59:39
感谢分享,Code4App有你更精彩
回复
0123456789ooooo 2016-6-15 16:19:22
感谢分享,Code4App有你更精彩
回复
Brew 2016-8-1 15:44:30
学习学习!
回复
1221 1 0
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542


代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表