实现的效果图如下 :

实现代码如下:

#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. Java - 框架之 Hibernate

    一:hibernate.cfg.xml 配置 <!-- 1.配置数据库连接的4个参数 --> <property name="hibernate.connection.dr ...

  2. 简述 OSI 七层协议?

    OSI七层协议是一个用于计算机或通信系统间互联的标准体系. 物理层功能:主要是基于电器特性发送高低电压(电信号),高电压对应数字1,低电压对应数字0. 数据链路层的功能:定义了电信号的分组方式按照以太 ...

  3. java集合Map

    参考文章:https://blog.csdn.net/yjn1995/article/details/89784891 1.map接口 1.map接口实现类,HashMap.LinkListMap.H ...

  4. java大文件分块上传断点续传demo

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  5. CF1185F Two Pizzas 状压

    你发现 pizza 种类数不会很多,状压一下就可以了 code: #include <bits/stdc++.h> #define M 11 #define N 100005 #defin ...

  6. DEV C++的使用

    1.点击dev图标: 2.左上角点击:文件——新建——源代码(快捷键ctrl+N): 3. 然后开始写代码: 4.点击运行: 右边的那个编译加运行(点这个),左边编译,中间运行. 5.保存(可以修改保 ...

  7. 猴猴吃香蕉 背包DP

    猴猴吃香蕉 背包DP \(D\)次询问,第\(i\)次询问,每次有\(n_i\)个带权香蕉,问有多少方案使香蕉之积为\(k_i\),对结果取模\(1000000007\) \(n\le 10^3,k\ ...

  8. IntelliJ IDEA 2017 MySQL5 绿色版 Spring 4 Mybatis 3 配置步骤详解(二)

    前言    继续上一篇安装教程 首先是MySQL绿色版安装之后其他组件安装,如果篇幅较长会分为多篇深入讲解,随笔属于学习笔记诸多错误还望指出 共同学习. MySQL 5.7 绿色版   我本地安装的是 ...

  9. 【一起来烧脑】读懂WebApp知识体系

    背景 很多小白知道什么是app,但是却不知道什么是webapp呢,webapp是指用HTML5编写的移动web应用 一个webapp可以在pc端,Android端,ios端进行运行 webapp开发的 ...

  10. 安装pdo_dblib扩展连接SQLserver

    1.先得安装freetdswget ftp://ftp.freetds.org/pub/freetds/stable/freetds-1.1.5.tar.gztar zxvf freetds-1.1. ...