OC - 28.模拟时钟
效果图
实现思路
- 该示例通过隐式动画实现
- 表盘通过显示在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.模拟时钟的更多相关文章
- 模拟时钟(AnalogClock)和数字时钟(DigitalClock)
Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...
- 一个模拟时钟的时间选择器 ClockPicker
最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...
- android脚步---数字时钟和模拟时钟
时钟UI组件是两个非常简单的组件,分为Digitalclock 和Analogclock, main.xml文件,书中程序有问题,加了两个组件,一个Button和一个<Chronometer ...
- Java多线程之sleep方法阻塞线程-模拟时钟
package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...
- css模拟时钟
css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- 模拟时钟(AnalogClock)
模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...
- Windows下编程--模拟时钟的实现
windows下编程--模拟时钟的实现: 主要可以分为几个步骤: (1) 编写按键事件处理(启动和停止时钟) (2) 编写时钟事件处理,调用显示时钟函数 (3) 编写显示时钟函数,要调用显 ...
- 变换CALayer锚点实现模拟时钟的动画
变换CALayer锚点实现模拟时钟的动画 变换锚点得需要一点理论知识,看下图就能明白:). https://developer.apple.com/library/ios/documentation/ ...
随机推荐
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
第一种:CSS实现 <style><!-- .fileInputContainer{ height:256px; background:url(upfil ...
- SQL Server 阻塞分析
一.加锁(locking).阻塞(blocking).死锁(deadlock)定义 加锁:用于管理多个连接的进程.当连接需要访问一块数据时,在这些数据上放置某种类型的锁. 阻塞 ...
- XP与Win2003下网站配置
一. 安装.net 4.0 1. 双击打开文件dotNetFx40_Full_x86_x64.exe.如图4.1 所示 (图4.1) 2. 勾选[我已阅读并结束许可条款],点击[安装]按钮.如图4.2 ...
- leetcode排列,求第k个排列
stl 中的下一个排列在写一遍忘了 写个1个多小时,使用递归写的,错误就在我使用一个list保存当前剩下的数,然后利用k/(n-1)!的阶乘就是删除的数字,但进过观察, 比如 list={1,2,3} ...
- octopress 如何添加youku视频和本地视频(octopress how to add a youku video or a local video)
用octopress 官方的video tag 可以添加视频,但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程. 首先添加youku.rb文件到路径:oc ...
- SonarQube4.4+Jenkins进行代码检查实例之二
SonarQube4.4+Jenkins进行代码检查实例之二 SonarQube4.4+Jenkins进行代码检查实例之二
- Telecasting station - SGU 114(带劝中位数)
题目大意:在一个数轴上有N个点,每个点都有一个权值,在这个数轴上找一个点,是的每个点到这个点的距离之和乘上权值的总和最小. 分析:以前也遇到过类似的问题,不过并不知道这是带权值的中位数问题,百度百科有 ...
- An Easy Problem?! - POJ 2826(求面积)
题目大意:有两块木板交叉起来接雨水,问最多能接多少. 分析:题目描述很简单,不过有些细节还是需要注意到,如下图几种情况: #include<stdio.h> #include< ...
- 每天一道算法_6_I Think I Need a Houseboat
今天的题目是I Think I Need a Houseboat 如下: Description Fred Mapper is considering purchasing some land in ...
- linux驱动开发之GCC问题
最近正在学习驱动开发,进展到字符设备驱动开发阶段. 先不多说,首先把刚看的一篇学习驱动步骤的帖子记录如下: 1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. ...