iOS实现简单时钟效果
实现的效果图如下 :
实现代码如下:
#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实现简单时钟效果的更多相关文章
- JS实现简单时钟效果
老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- iOS开发——实用技术OC篇&简单抽屉效果的实现
简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...
- ios开发核心动画三:隐式动画与时钟效果
一:隐式动画 #import "ViewController.h" @interface ViewController () /** <#注释#> */ @proper ...
- iOS酷炫动画效果合集
iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...
- Flash AS实现时钟效果(全脚本实现)
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- GDI绘制时钟效果,与系统时间保持同步,基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
- iOS 烟花撒花效果,图层渐变,图层倒影特效。CAEmitterLayer粒子发射器
iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...
随机推荐
- Backpack IV
Description Given an integer array nums[] which contains n unique positive numbers, num[i] indicate ...
- WSAStartup() - 使用方法
当一个应用程序调用WSAStartup函数时, 操作系统根据请求的Socket版本来搜索相应的Socket库,然后绑定找到的Socket库到该应用程序中. 以后应用程序就可以调用所请求的Socket库 ...
- D. Vasya and Triangle(思维, 三角形)
传送门 题意: 给你 n, m, k, 问你是否存在一个三角形, 满足三角形的面积等于 n * m / k: 若存在, 输出YES, 且输出满足条件的三角形的三个坐标(答案有多种,则输出任意一种) ...
- 一步HTML5教程学会体系
HTML5是HTML最新的版本,万维网联盟. HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体. 新特性: 绘画的canvas元素,用于媒介回放的video和audio元素,对 ...
- 一步一步跟我学ImGui.第一讲.配置OpenGl2+ImGui环境
目录 搭建ImGui例子中的第一个OpenGl2环境 一丶搭建OpenGL2环境 1.下载GLFW库 2.解压GLFW库. 3.将GLFW库拷贝到你的工程文件下. 4.配置到Vs2013中. 5.测试 ...
- vue中如何动态添加readonly属性
动态绑定input的readonly属性 1 <inpu :readonly="status ? false : 'readonly'"> status 为 false ...
- Gated CNN 阅读笔记
之前看过TCN,稍微了解了一下语言模型,这篇论文也是对语言模型建模,但是由于对语言模型了解不深,一些常用数据处理方法,训练损失的计算包括残差都没有系统的看过,只是参考网上代码对论文做了粗浅的复现.开学 ...
- 深度学习面试题27:非对称卷积(Asymmetric Convolutions)
目录 产生背景 举例 参考资料 产生背景 之前在深度学习面试题16:小卷积核级联卷积VS大卷积核卷积中介绍过小卷积核的三个优势: ①整合了三个非线性激活层,代替单一非线性激活层,增加了判别能力. ②减 ...
- tomcat启动startup.bat一闪而过(分析与解答)
tomcat启动startup.bat一闪而过(分析与解答) 方法/步骤 在正确配置Tomcat环境变量后,遇到很多次运行startup.bat后,一个窗口一闪而过的.为了分析导致tomcat ...
- python window窗口
from Tkinter import * root=Tk() root.title('我是root窗口!') L=Label(root,text='我属于root') L.pack() f=Topl ...