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这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...
随机推荐
- Flume源码更改
1.源码更改场景:如果使用 0.8 版本 Kafka 并配套 1.6 版本 Flume,由于 Flume 1.6 版本没有Taildir Source 组件,因此,需要将 Flume 1.7 中的 T ...
- Java编译器的优化
public class Notice { public static void main(String[] args) { // 右侧20是一个int类型,但没有超过左侧数值范围,就是正确的 // ...
- LOJ P10131 暗的连锁 题解
每日一题 day27 打卡 Analysis 对于每条非树边 , 覆盖 x 到 LCA 和 y到 LCA 的边 , 即差分算出每个点和父亲的连边被覆盖了多少次 .被覆盖 0 次的边可以和 m 条非树边 ...
- CF446C DZY Loves Fibonacci Numbers 线段树 + 数学
有两个性质需要知道: $1.$ 对于任意的 $f[i]=f[i-1]+f[i-2]$ 的数列,都有 $f[i]=fib[i-2]\times f[1]+fib[i-1]\times f[2]$ 其中 ...
- RookeyFrame 还原 软删除的数据 怎么硬删除 或者 怎么还原
列表搜索栏上有个删除图标,可以进入回收站 如图:
- python 之 字符串的常用方法
split()函数: 返回以指定的字符将字符串分割成多个元素的列表 my_str = 'name is wangxiaoming' print(my_str.split()) #默认不写参数表示按空格 ...
- 33、shuffle性能优化
一.shuffle性能优化 1.没有开启consolidation机制的性能低下的原理剖析 2.开启consolidation机制之后对磁盘io性能的提升的原理 spark.shuffle.conso ...
- Angular发送广播和接收广播
home.module.ts import {BroadcastService} from "../broadcast.service"; @NgModule({ imports: ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- GoCN每日新闻(2019-09-28)
GoCN每日新闻(2019-09-28) 1. 可视化Go程序的调用图 https://truefurby.github.io/go-callvis/2. Go modules编写和发布官方教程 h ...