变换CALayer锚点实现模拟时钟的动画
变换CALayer锚点实现模拟时钟的动画
变换锚点得需要一点理论知识,看下图就能明白:).
开始实现模拟时钟效果:
//
// RootViewController.m
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end // 将角度转换为弧度
#define DEGREES__TO__RADIANS(d) ((d) * M_PI / 180.f) @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad]; // 显示参考用的view
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.layer.borderWidth = .f;
showView.layer.cornerRadius = .f;
showView.layer.borderColor = [UIColor redColor].CGColor;
showView.center = self.view.center;
[self.view addSubview:showView]; // 新建layer
CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor blackColor].CGColor; // 重置锚点
layer.anchorPoint = CGPointMake(.f, .f); // 设置layer的frame值(在showView正中间摆放)
layer.frame = CGRectMake(showView.middleX, showView.middleY, , ); // 添加进showView中
[showView.layer addSublayer:layer]; // 定时器
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
static int i = ; // 每秒增加的角度
layer.transform = \
CATransform3DMakeRotation(DEGREES__TO__RADIANS((/.f) * i++), 0.0, 0.0, 1.0);
} timeInterval:NSEC_PER_SEC];
[_timer start];
} @end
重要的代码:
以下是最终效果:
完整代码:
//
// RootViewController.m
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "YXGCD.h" static NSDateFormatter* _DMLogDateFormatter = nil; @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer;
@property (nonatomic, strong) UILabel *timeLabel; @end // 将角度转换为弧度
#define DEGREES__TO__RADIANS(d) ((d) * M_PI / 180.f) @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor]; // 日期格式
_DMLogDateFormatter = [[NSDateFormatter alloc] init];
[_DMLogDateFormatter setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"en_US_POSIX"]];
[_DMLogDateFormatter setDateFormat:@"HH:mm:ss"]; // 显示label
_timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
_timeLabel.textAlignment = NSTextAlignmentCenter;
_timeLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin" size:.f];
_timeLabel.textColor = [UIColor cyanColor];
_timeLabel.center = self.view.center;
_timeLabel.y += ;
[self.view addSubview:_timeLabel]; // 显示参考用的view
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.layer.borderWidth = .f;
showView.layer.cornerRadius = .f;
showView.layer.borderColor = [UIColor redColor].CGColor;
showView.center = self.view.center;
[self.view addSubview:showView]; // 新建秒钟Layer
// ----------------------------------------------------- //
CALayer *secondLayer = [CALayer layer];
secondLayer.backgroundColor = [UIColor whiteColor].CGColor; // 重置锚点
secondLayer.anchorPoint = CGPointMake(.f, .f); // 设置layer的frame值(在showView正中间摆放)
secondLayer.frame = CGRectMake(showView.middleX, showView.middleY, , ); // 添加进showView中
[showView.layer addSublayer:secondLayer]; // 新建分钟Layer
// ----------------------------------------------------- //
CALayer *minuteLayer = [CALayer layer];
minuteLayer.backgroundColor = [UIColor greenColor].CGColor; // 重置锚点
minuteLayer.anchorPoint = CGPointMake(.f, .f); // 设置layer的frame值(在showView正中间摆放)
minuteLayer.frame = CGRectMake(showView.middleX, showView.middleY, , ); // 添加进showView中
[showView.layer addSublayer:minuteLayer]; // 新建时钟Layer
// ----------------------------------------------------- //
CALayer *hourLayer = [CALayer layer];
hourLayer.backgroundColor = [UIColor blueColor].CGColor; // 重置锚点
hourLayer.anchorPoint = CGPointMake(.f, .f); // 设置layer的frame值(在showView正中间摆放)
hourLayer.frame = CGRectMake(showView.middleX, showView.middleY, , ); // 添加进showView中
[showView.layer addSublayer:hourLayer]; // 定时器
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{ NSString *timerNow = [_DMLogDateFormatter stringFromDate:[NSDate date]];
NSArray *timeArray = [timerNow componentsSeparatedByString:@":"]; // 获取到时间
float sec = [timeArray[] intValue];
float min = [timeArray[] intValue] + sec / .f;
float hour = [timeArray[] intValue] + min / .f; secondLayer.transform = \
CATransform3DMakeRotation(DEGREES__TO__RADIANS(/.f)*sec + \
DEGREES__TO__RADIANS(), \
0.0, 0.0, 1.0); minuteLayer.transform = \
CATransform3DMakeRotation(DEGREES__TO__RADIANS(/.f)*min + \
DEGREES__TO__RADIANS(), \
0.0, 0.0, 1.0); hourLayer.transform = \
CATransform3DMakeRotation(DEGREES__TO__RADIANS(/.f)*hour + \
DEGREES__TO__RADIANS(), \
0.0, 0.0, 1.0); _timeLabel.text = [NSString stringWithFormat:@"%02d:%02d:%02d",
[timeArray[] intValue],
[timeArray[] intValue],
[timeArray[] intValue]]; } timeInterval:NSEC_PER_SEC];
[_timer start];
} @end
RootViewController.m
变换CALayer锚点实现模拟时钟的动画的更多相关文章
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- 模拟时钟(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 ...
- 模拟时钟(AnalogClock)
模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...
- Windows下编程--模拟时钟的实现
windows下编程--模拟时钟的实现: 主要可以分为几个步骤: (1) 编写按键事件处理(启动和停止时钟) (2) 编写时钟事件处理,调用显示时钟函数 (3) 编写显示时钟函数,要调用显 ...
- VC++SDK编程——模拟时钟
#include <Windows.h> #include <tchar.h> #include <math.h> typedef struct Time { in ...
随机推荐
- SSM的XML和WEB.XML的配置
显示层(handler/controller): request请求到springmvc的前端控制器,从处理器映射器找相应的handler(用@RequestMapping(" " ...
- media(适配)
媒体类型 1.all 所有媒体 2.braille 盲文触觉设备 3.embossed 盲文打印机 4.print 手持设备 5.projection 打印预览 ...
- kd树 C++实现
参考:百科kd-tree /* * kdtree.h * * Created on: Mar 3, 2017 * Author: wxquare */ #ifndef KDTREE_H_ #defin ...
- Group by、having、order by、Distinct 使用注意事项
直奔主题,如下SQL语句 SELECT COUNT(*) AS COUNT,REQUEST,METHOD FROM REQUESTMETH GROUP BY REQUEST,METHOD HAVING ...
- 令狐冲和TCP/IP协议的第三层协议的关系(经典)
今天突然想起来去看了看我以前在csdn的博客,发现一篇以前一直被奉为经典的文章,哈哈,再转过来和大家看看: 令狐冲十四岁那年进入华山,那年岳琳珊八岁,岳不群白天给两人指点剑法 ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- XMPP之openfire无法启动
之前半个月自学ios的时候自己也配置过xmpp框架,也从github上下载了demo试了下,也是很完美运行的,最近想着再回头把XMPP框架系统的学习一下 ,毕竟当时学的时候还是在虚拟机中,卡死了.我这 ...
- 使用javascript获取wx.config内部字段解决微信分享
背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppI ...
- C# DateTime类型和sqlserver DateTime精度不同
在最近的项目中, 有个关于时间的功能.一个请假的时间.前端选择的时候只有日期.所以比如请一天假就是选2017-8-15和2017-8-15,这样算请这一天的假.但是后台存入数据库时我不能就存2017- ...
- Win7系统下网站发布IIS配置
*本帖为个人收集贴,所有版权归:西门的后花园 http://ons.me* Technorati 标记: IIS,网站,发布,配置 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二. ...