iOS动画之美丽的时钟
1.终于效果图
2.实现思路
- 在ios中默认是绕着中心点旋转的,由于锚点默认在图层的中点,要想绕着下边中心点转,须要改变图层锚点的位置。
- 依据锚点。设置position坐标。为时钟的中点。
- 思考秒针旋转的角度,怎么知道当前秒针旋转到哪,当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。
1> 计算一秒转多少° 360 * 60 = 6
2> 获取当前秒数。通过日历对象,获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数 - 每隔一秒,获取最新秒数,更新时钟。
- 分钟一样的做法
- 时钟也一样
- 每一分钟。时钟也须要旋转,60分钟 -> 1小时 - > 30° ==》 每分钟 30 / 60.0 一分钟时针转0.5°
- 把时针和秒针头尾变尖,设置圆角半径
2.完整代码
#import "ViewController.h"
//获得当前的年月日 时分秒
#define CURRENTSEC [[NSCalendar currentCalendar] component:NSCalendarUnitSecond fromDate:[NSDate date]]
#define CURRENTMIN [[NSCalendar currentCalendar] component:NSCalendarUnitMinute fromDate:[NSDate date]]
#define CURRENTHOUR [[NSCalendar currentCalendar] component:NSCalendarUnitHour fromDate:[NSDate date]]
#define CURRENTDAY [[NSCalendar currentCalendar] component:NSCalendarUnitDay fromDate:[NSDate date]]
#define CURRENTMONTH [[NSCalendar currentCalendar] component:NSCalendarUnitMonth fromDate:[NSDate date]]
#define CURRENTYEAR [[NSCalendar currentCalendar] component:NSCalendarUnitYear fromDate:[NSDate date]]
//角度转换成弧度
#define ANGEL(x) x/180.0 * M_PI
#define kPerSecondA ANGEL(6)
#define kPerMinuteA ANGEL(6)
#define kPerHourA ANGEL(30)
#define kPerHourMinuteA ANGEL(0.5)
@interface ViewController ()
@property (nonatomic,strong) UIImageView *imageClock;
@property (nonatomic,strong) CALayer *layerSec;
@property (nonatomic,strong) CALayer *layerMin;
@property (nonatomic,strong) CALayer *layerHour;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.imageClock];
[self.imageClock.layer addSublayer:self.layerSec];
[self.imageClock.layer addSublayer:self.layerMin];
[self.imageClock.layer addSublayer:self.layerHour];
[self timeChange];
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)timeChange
{
self.layerSec.transform = CATransform3DMakeRotation(CURRENTSEC * kPerSecondA, 0, 0, 1);
self.layerMin.transform = CATransform3DMakeRotation(CURRENTMIN * kPerMinuteA, 0, 0, 1);
self.layerHour.transform = CATransform3DMakeRotation(CURRENTHOUR * kPerHourA, 0, 0, 1);
self.layerHour.transform = CATransform3DMakeRotation(CURRENTMIN * kPerHourMinuteA + CURRENTHOUR*kPerHourA, 0, 0, 1);
}
- (UIImageView *)imageClock
{
if (_imageClock == nil) {
_imageClock = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"钟表"]];
_imageClock.frame = CGRectMake(100, 100, 200, 200);
}
return _imageClock;
}
- (CALayer *)layerSec
{
if (_layerSec == nil) {
_layerSec = [CALayer layer];
_layerSec.bounds = CGRectMake(0, 0, 2, 80);
_layerSec.backgroundColor = [UIColor redColor].CGColor;
_layerSec.cornerRadius = 5;
_layerSec.anchorPoint = CGPointMake(0.5, 1);
_layerSec.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerSec;
}
- (CALayer *)layerMin
{
if (_layerMin == nil) {
_layerMin = [CALayer layer];
_layerMin.bounds = CGRectMake(0, 0, 4, 60);
_layerMin.backgroundColor = [UIColor blackColor].CGColor;
_layerMin.cornerRadius = 5;
_layerMin.anchorPoint = CGPointMake(0.5, 1);
_layerMin.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerMin;
}
- (CALayer *)layerHour
{
if (_layerHour == nil) {
_layerHour = [CALayer layer];
_layerHour.bounds = CGRectMake(0, 0, 6, 40);
_layerHour.backgroundColor = [UIColor blackColor].CGColor;
_layerHour.cornerRadius = 5;
_layerHour.anchorPoint = CGPointMake(0.5, 1);
_layerHour.position = CGPointMake(self.imageClock.bounds.size.width/2, self.imageClock.bounds.size.height/2);
}
return _layerHour;
}
3.Demo程序
iOS动画之美丽的时钟的更多相关文章
- IOS动画(Core Animation)总结 (参考多方文章)
一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的 ...
- iOS动画学习
学习一下动画,感谢以下大神的文章: UIView:基础动画.关键帧动画.转场动画 Core Animation :基础动画,关键帧动画,动画组,转场动画,逐帧动画 CALayer :CALaye ...
- iOS动画浅汇
转自:http://www.cocoachina.com/ios/20160311/15660.html 在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳 ...
- (转)iOS动画Core Animation
文章转载:http://blog.sina.com.cn/s/blog_7b9d64af0101b8nh.html 在iOS中动画实现技术主要是:Core Animation. Core Animat ...
- 解析 iOS 动画原理与实现
这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...
- IOS动画隐式,显式,翻页
// ViewController.m // IOS动画0817 // // Created by 张艳锋 on 15/8/17. // Copyright (c) 2015年 张艳锋. Al ...
- iOS动画原理
1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...
- iOS 动画基础
原文:http://www.cnblogs.com/lujianwenance/p/5733846.html 今天说一下有关动画的基础,希望能帮助到一些刚接触iOS动画或者刚开始学习iOS的同学, ...
- ios 动画效果CATransition笔记
初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...
随机推荐
- ubuntu修改capslock键,单独使用为esc,组合使用时为ctrl+
一.下面这部分可以将capslock与ctrl互换 将下面的代码放入-/.Xmodmap中, remove Lock = Caps_Lock remove Control = Control_L ke ...
- Working with macro signatures
https://docs.kentico.com/k11/macro-expressions/troubleshooting-macros/working-with-macro-signatures ...
- Linux - 进程与内存查看
top NI表示进程的优先级. -20的优先级,非常的高. top -p xxx 可以查看具体的进程情况. renice -n -6 进程ID 可以改变一个正在运行的pid的优先级. [root@lo ...
- tflearn anaconda 安装过程记录
准备工作:gcc升级为4.8.2glibc升级为2.18 /opt/xxx/xxx/components/ficlient/bigdata_env 里加入:export LD_LIBRARY_PATH ...
- [ZJOI 2010] 数字计数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1833 [算法] 数位DP [代码] #include <algorithm&g ...
- Python3爬虫--两种方法(requests(urllib)和BeautifulSoup)爬取网站pdf
1.任务简介 本次任务是爬取IJCAI(国际人工智能联合会议)最新2018年的pdf论文文件. 本次编码用到了正则表达式从html里面提取信息,如下对正则表达式匹配规则作简要的介绍. 2.正则表达式规 ...
- ubuntu-设置分辨率
xrandr -s 1440x900 -r 60 前提是,分辨率选项中有对应的设置选项.
- B - Expression
Problem description Petya studies in a school and he adores Maths. His class has been studying arith ...
- WinForm——操作word文档
解决方案资源管理器——引用——(右击)添加引用——COM 1. 安装Office,添加引用COM里面的 Microsoft Word 14.0 Object. Library 2. 导命名空间 usi ...
- 用 JS + LeanCloud 给网页添加数据库(留言功能)
记录给自己网页添加留言功能的过程. 使用工具:LeanCloud,一个自带数据库和增删改查(CRUD)功能的后台系统. 1 在JS中引入LeanCloud官方库 在LeanCloud注册并添加应用的步 ...