实现的效果图如下 :

实现代码如下:

#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. Hbase节点及原理

    1.Hbase架构:Clinet.Zookeeper.Master.RegionServer.Region.Store.MemStore.HLog 1.读过程 2.写过程 https://www.cn ...

  2. Fzu-html1

    Fzu-趣考网-前端1 html 题目: 使用html写出h1~h6六种格式的hello world 使用html的table标签制作一个表格,存储本学期专业课程(参考教务处课表) 使用html的sc ...

  3. usa单位换算

    1.温度换算 摄氏度    C = 5/9(F-32) ≍ (F-32)/1.8 (F为华氏温度值) 华氏度   F = 1.8C + 32 (C为摄氏温度值) 3.重量换算 1品脱(pint) ≍ ...

  4. 计数器的原理,设计及verilog实现

    若计数器由n个触发器组成,则计数器的位数为n,所能计数的最大模数为2的n次幂.以下为同步二进制加法计数器电路; 驱动方程:状态图 状态方程(此时的Q0,Q1为上一次状态值): 下例是同步4位2进制计数 ...

  5. codevs 1683 车厢重组

    1683 车厢重组  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 白银 Silver   题目描述 Description 在一个旧式的火车站旁边有一座桥,其桥面可以绕河中心的桥 ...

  6. Spoj PRIME1 - Prime Generator

    题意翻译 求给定的两个数之间的素数 Translated by @kaiming 题目描述 Peter wants to generate some prime numbers for his cry ...

  7. 36、将RDD转换为DataFrame

    一.概述 为什么要将RDD转换为DataFrame? 因为这样的话,我们就可以直接针对HDFS等任何可以构建为RDD的数据,使用Spark SQL进行SQL查询了.这个功能是无比强大的. 想象一下,针 ...

  8. Large-Scale Oil Palm Tree Detection from High-Resolution Satellite Images Using Two-Stage Convolutional Neural Networks(worldview油棕树检测)

    不是目标检测也不是语义分割,两步CNN指的是,采集的数据是一堆点,以点为中心的65*65和17*17图像范围大小来判断这个点是否是油棕树.第一步就是判断65*65的范围是否为(油棕树植被群,其他植被/ ...

  9. Pytest权威教程08-使用tmp目录和文件

    目录 使用tmp目录和文件 tmp_path Fixture方法 tmp_path_factory Fixture方法 tmpdir Fixture方法 tmpdir_factory Fixture方 ...

  10. python3之线程(一)

    线程的概念 现在的操作系统几乎都支持运行多个任务,而在操作系统内部,一个任务往往代表的执行的某一个程序,也就是运行中的程序,运行的程序是一个动态的概念,也就是所说的进程,而在进程内部,往往有许多顺序执 ...