实现的效果图如下 :

实现代码如下:

#import "ViewController.h"

//将旋转角度转换为弧度制
#define angleToRadion(angle) ((angle) / 180.0 * M_PI)

//秒针每秒钟转过的角度
#define perSecondAngle 6
//分针每分钟转过的角度
#define perMinuteAngle 6
//时针每小时转过的角度
#define perHourAngle 30
//时针每分钟转过的角度
#define perMuniteHourAngle 0.5

#define kClockWidth 300
#define kClockHeight 250

@interface ViewController ()

//底盘
@property (weak, nonatomic) IBOutlet UIImageView *imgView;

@property (nonatomic, weak) CALayer *secondLayer;//秒
@property (nonatomic, weak) CALayer *minuteLayer;//分
@property (nonatomic, weak) CALayer *hourLayer;//时

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //时钟
    [self setUpHourLayer];
    
    //分钟
    [self setUpMinuteLayer];
    
    //秒钟
    [self setUpSecondLayer];
    
    //创建定时器
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
    
}

- (void)setUpHourLayer
{
    //创建图层
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor blackColor].CGColor;
    layer.cornerRadius = 8;
    
    //设置图层的锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    //设置图层的位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 5, kClockWidth * 0.5 - 44);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.hourLayer = layer;
}

- (void)setUpMinuteLayer
{
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor blackColor].CGColor;
    layer.cornerRadius = 4;
    
    //设置锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    //设置位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 3, kClockWidth * 0.5 - 34);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.minuteLayer = layer;
}

- (void)setUpSecondLayer
{
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    //设置锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    //设置位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 1, kClockWidth * 0.5 - 24);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.secondLayer = layer;
}

- (void)timeChange
{
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //NSLog(@"calendar = %",calendar);
    
    //获取日期组件
    NSDateComponents *components = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
    
    //获取当前的时分秒值
    NSInteger second = components.second;
    NSInteger munite = components.minute;
    NSInteger hour = components.hour;
    
    //计算当前时分秒表针转过的角度(弧度制)
    CGFloat secondAngle = angleToRadion(second * perSecondAngle);
    CGFloat muniteAngle = angleToRadion(munite * perMinuteAngle);
    CGFloat hourAngle = angleToRadion(hour *perHourAngle + munite * perMuniteHourAngle);
    
    //修改时分秒表针位于的图层的transform属性,执行隐式动画
    self.secondLayer.transform = CATransform3DMakeRotation(secondAngle, 0, 0, 1);
    self.minuteLayer.transform = CATransform3DMakeRotation(muniteAngle, 0, 0, 1);
    self.hourLayer.transform = CATransform3DMakeRotation(hourAngle, 0, 0, 1);

}
@end

在实现的过程中,有些小瑕疵...希望可以和大家一起学习!!!

iOS实现简单时钟效果的更多相关文章

  1. JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. iOS开发——实用技术OC篇&简单抽屉效果的实现

    简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...

  4. ios开发核心动画三:隐式动画与时钟效果

    一:隐式动画 #import "ViewController.h" @interface ViewController () /** <#注释#> */ @proper ...

  5. iOS酷炫动画效果合集

    iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...

  6. Flash AS实现时钟效果(全脚本实现)

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  7. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  8. GDI绘制时钟效果,与系统时间保持同步,基于Winform

    2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...

  9. iOS 烟花撒花效果,图层渐变,图层倒影特效。CAEmitterLayer粒子发射器

    iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...

随机推荐

  1. web 字体 font-family

    body { font-family: -apple-system, //针对 Web 页面 BlinkMacSystemFont, //针对 Mac Chrome 页面 SFProDisplay, ...

  2. NISP二级笔记(一) 信息安全管理

    ISO27001 信息安全管理体系要求 ISO27002 信息安全控制措施(实用规则) ISO27003 信息安全管理体系实施指南 ISO27004 信息安全管理测量 ISO27005 信息安全风险管 ...

  3. OSS先后上传相同地址的图片

    如果上传先后两张图片那么后面的图片会替换前面的图片

  4. Intel 80386 CPU

    一.80386 概述 80386处理器被广泛应用在1980年代中期到1990年代中期的IBM PC相容机中.这些PC机称为「80386电脑」或「386电脑」,有时也简称「80386」或「386」.80 ...

  5. python 之 字典常用操作

  6. 描述yeild作用

    保存当前运行状态(断点),然后暂停执行,即将函数挂起 将yeild关键字后面表达式的值作为返回值返回,此时可以理解为起到了return的作用,当使用next().send()函数让函数从断点处继续执行 ...

  7. 模板 - 数学 - 同余 - 扩展Euclid算法

    普通的扩展欧几里得算法,通过了洛谷的扩展欧几里得算法找乘法逆元.修复了容易溢出的bug,虽然新版本仍有可能会溢出longlong,假如参与运算的数字都是longlong,假如可以的话直接使用__int ...

  8. return关键字

    注意:如果一个函数的返回值类型是具体的数据类型,那么该函数就必须要保证在任意情况下都保证有返回值(除了返回值类型是void)     return  关键字的作用: 1   返回数据给函数的调用者. ...

  9. Azure存储简介

    注:此篇文档主要讲述微软azure全球版,并不完全试用azure中国区   azure存储是Microsoft一项托管服务,提供的云存储的可用性.安全性.持久性.可伸缩性和冗余都很高,azure存储包 ...

  10. 请在mysql配置文件修sql-mode或sql_mode为NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

    错误信息:请在mysql配置文件修sql-mode或sql_mode为NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 解决办法(最有效,以MySQL5.7为例): ...