实现的效果图如下 :

实现代码如下:

#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. mui真机调试时无法查找到手机

    在做mui的真机调试时手机查找不到手机,有可能是你的  adb interface 驱动  版本过低,先下载 或自行百度 http://www.onlinedown.net/soft/1164054. ...

  2. UVA 11019 Matrix Matcher ( 二维字符串匹配, AC自动机 || 二维Hash )

    题目: 传送门 题意: 给你一个 n * m 的文本串 T, 再给你一个 r * c 的模式串 S: 问模式串 S 在文本串 T 中出现了多少次. 解: 法一: AC自动机 (正解) 670ms 把模 ...

  3. 【JQuery】操作前端控件知识笔记

    一.jQuery操作复选框checkbox 1.设置选中.取消选中.获取被选中的值.判断是否选中等 注意:操作checked.disabled.selected属性,强制建议只用prop()方法!!, ...

  4. Video Reviews

    题目链接:http://codeforces.com/gym/101755/problem/K 题目理解: 一家公司想让n个人给他们的产品评论,所以依次去找这n个人,第i个人会评论当且仅当已经有ai个 ...

  5. git 导出远程特定分之

    很多时候,git clone 只是 clone 下来了 master 分支,如果想 clone 特定分支.有的时候不知如何是好. 找到了如下的命令,记录一下.以便有需要的同学可以使用. git co ...

  6. Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值

    1.页面代码: 页面引入: bootstrap-select.min.css和 bootstrap-select.min.js. defaults-zh_CN.min.js文件,并初始化下拉选项框. ...

  7. UMD、CommonJS、ES Module、AMD、CMD模块的写法

    AMD异步模块规范 RequireJS就是AMD的一个典型的实现. 以下是一个只依赖与jQuery的模块代码: // foo.js define(['jquery'], function($){ // ...

  8. JavaWeb之基础(1) —— 文件、目录结构和创建项目

    1. JavaWeb应用 JavaWeb应用从大类上分为静态和动态两种. 静态应用就是传统的HTML文件+素材资源构造的静态网页,不需要特殊的配置.JavaWeb也不是专门用来做静态网站的. 动态应用 ...

  9. PLSQL命令行创建用户 以及 JDBC简单操作

    目录 PLSQL Developer命令行创建用户以及表 课堂要点 ​ JDBC 主外键约束 踩坑之路 设置ORACLE_HOME环境变量 PLSQL Developer命令行创建用户以及表 打开Co ...

  10. Perl深度优先迷宫算法

    迷宫求解,可以用穷举法,将每个点的方向都穷举完:由于在求解过程中会遇到某一方向不可通过,此时就必须按原路返回. 想到用Perl数组来保存路径,记录每次所探索的方向,方便原路返回时得到上一步的方向,再退 ...