效果图


实现思路


  • 该示例通过隐式动画实现
  • 表盘通过显示在imageView中的一张图片来实现
  • 在表盘上绘制(时分秒)三条直线,分别位于不同的图层,且时针位于最下层,秒针位于最上层

    • 设置直线为圆角
    • 直线的一段位于表盘的圆心
    • 通过NSTimer定时器,使不同的图层定时执行对应的动画

实现步骤


  • 通过storyboard创建表盘,并拥有它

    @property (weak, nonatomic) IBOutlet UIImageView *clockView;
  • 使用三个成员变量来保存时分秒三根表针位于的不同图层

    @property (nonatomic, weak) CALayer *secondLayer;
    @property (nonatomic, weak) CALayer *minuteLayer;
    @property (nonatomic, weak) CALayer *hourLayer;
  • 初始化所用到的常量

    //将旋转角度转换为弧度制
    #define angleToRadion(angle) ((angle) / 180.0 * M_PI) //秒针每秒钟转过的角度
    #define perSecondAngle 6
    //分针每分钟转过的角度
    #define perMinuteAngle 6
    //时针每小时转过的角度
    #define perHourAngle 30
    //时针每分钟转过的角度
    #define perMuniteHourAngle 0.5
  • 设置时分秒三根表针

    • 设置时针

      - (void)setUpHourLayer
      {
      //创建图层
      CALayer *layer = [CALayer layer];
      layer.backgroundColor = [UIColor blackColor].CGColor;
      layer.cornerRadius = 8; 设置图层的锚点
      layer.anchorPoint = CGPointMake(0.5, 1);
      //设置图层的位置和尺寸
      layer.position = CGPointMake(kClockWith * 0.5, kClockWith * 0.5);
      layer.bounds = CGRectMake(0, 0, 5, kClockWith * 0.5 - 44); //将图层添加到父图层中
      [self.clockView.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(kClockWith * 0.5, kClockWith * 0.5);
      layer.bounds = CGRectMake(0, 0, 3, kClockWith * 0.5 - 34); //将图层添加到父图层中
      [self.clockView.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(kClockWith * 0.5, kClockWith * 0.5);
      layer.bounds = CGRectMake(0, 0, 1, kClockWith * 0.5 - 24); //将图层添加到父图层中
      [self.clockView.layer addSublayer:layer];
      self.secondLayer = layer;
      }
  • 设置定时器,定时执行动画

    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
  • 设置定时器触发时调用的方式,添加动画代码

    - (void)timeChange
    {
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar]; //获取日期组件
    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);
    }
 
 

OC - 28.模拟时钟的更多相关文章

  1. 模拟时钟(AnalogClock)和数字时钟(DigitalClock)

    Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...

  2. 一个模拟时钟的时间选择器 ClockPicker

    最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...

  3. android脚步---数字时钟和模拟时钟

    时钟UI组件是两个非常简单的组件,分为Digitalclock  和Analogclock, main.xml文件,书中程序有问题,加了两个组件,一个Button和一个<Chronometer ...

  4. Java多线程之sleep方法阻塞线程-模拟时钟

    package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...

  5. css模拟时钟

    css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...

  6. 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  7. 模拟时钟(AnalogClock)

    模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...

  8. Windows下编程--模拟时钟的实现

    windows下编程--模拟时钟的实现: 主要可以分为几个步骤: (1)   编写按键事件处理(启动和停止时钟) (2)   编写时钟事件处理,调用显示时钟函数 (3)   编写显示时钟函数,要调用显 ...

  9. 变换CALayer锚点实现模拟时钟的动画

    变换CALayer锚点实现模拟时钟的动画 变换锚点得需要一点理论知识,看下图就能明白:). https://developer.apple.com/library/ios/documentation/ ...

随机推荐

  1. 关于android布局的两个属性dither和tileMode

    首先,两个单词的中文意思分别是dither(抖动)和tileMode(平铺) 1,先来介绍tileMode(平铺) 它的效果类似于 让背景小图不是拉伸而是多个重复(类似于将一张小图设置电脑桌面时的效果 ...

  2. 进程创建函数fork()、vfork() ,以及excel()函数

    一.进程的创建步骤以及创建函数的介绍 1.使用fork()或者vfork()函数创建新的进程 2.条用exec函数族修改创建的进程.使用fork()创建出来的进程是当前进程的完全复制,然而我们创建进程 ...

  3. screen space directional occlusion(SSDO) in Unity5

    也许是哪里出了问题..效果一般 16采样点 Gird . Random 博主近期渲染:最近用unity5弄的一些渲染 ---- by wolf96  http://blog.csdn.net/wolf ...

  4. Unity 的“Vertex Lit Rendering path“中 shader Pass 的注意事项

    "MADFINGER/Environment/Unlit (Supports Lightmap)"是 ShadowGun 示例中最简单的 shader 了,如下: // Unlit ...

  5. 折腾iPhone的生活——越狱

    这次我也加入了越狱大军,也不是为的什么免费软件,只是遵从我玩机的本质,既然想要玩透这个机子,当然要所有都试过来,就果断越狱了,关于越狱的好处和坏处,我会在另外一篇博客里阐述,这篇博客主要就说怎么样进行 ...

  6. [Java] Java IO 概况

    Java IO 是 Java 的一套 API, 用于读入和写出数据(输入和输出).Java IO API 位于 java.io package.实际上 java.io package 没有解决所有的输 ...

  7. Apache服务器部署多个进程

    本文以xampp安装的apache服务为例进行介绍 1.复制配置文件目录,复制一个新的配置文件目录conf2,区别于原来的配置文件目录conf

  8. 【转】eclipse插件:OpenExplorer快速打开文件目录

    在MyEclipse开发中常用到其中一个"Open In Explorer"的小插件,可以直接进入Windows资源管理器中打开选中文件所在的目录,在使用eclipse开发时也很需 ...

  9. Windows Live Writer的Markdown插件

    我新写了一个Windows Live Writer的Markdown插件,代码放在了github上. 介绍 这个项目是一个Windows Live Writer的Markdown插件.有了这个插件,你 ...

  10. 源文件名和public 类名

    问题: 源文件名和类名不一样 解决方法:将源文件的文件名test修改成Test