自制圆形时钟⏰

如果想着做一个类似的家里的圆形时钟的样式的钟表,可以使用这样的方法:

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic ,weak)CALayer *second;

@property (nonatomic ,weak)CALayer *minute;

@property (nonatomic ,weak)CALayer *hour;

@end

@implementation ViewController

  • (void)viewDidLoad {

**super** viewDidLoad\]; **self**.view.backgroundColor = \[UIColor cyanColor\]; //创建表盘 CALayer \*clock = \[\[CALayer alloc\]init\]; //大小 clock.bounds = CGRectMake(0, 0, 200, 200); //位置 clock.position = CGPointMake(200, 200); //内容 clock.contents = (**__bridge** **id** **_Nullable**)(\[UIImage imageNamed:@"clock"\].CGImage); \[**self**.view.layer addSublayer:clock\]; //圆角 clock.cornerRadius = 100; //裁剪 clock.masksToBounds = **YES**; //创建秒针 CALayer \*second = \[\[CALayer alloc\]init\]; **self**.second = second; //大小 second.bounds = CGRectMake(0, 0, 2, 100); //位置 second.position = clock.position; //颜色 second.backgroundColor = \[UIColor redColor\].CGColor; //锚点 second.anchorPoint = CGPointMake(0.5, 0.8); \[**self**.view.layer addSublayer:second\]; //创建分针 CALayer \*minute = \[\[CALayer alloc\]init\]; **self**.minute = minute; //大小 minute.bounds = CGRectMake(0, 0, 3, 80); //位置 minute.position = clock.position; //颜色 minute.backgroundColor = \[UIColor blueColor\].CGColor; //锚点 minute.anchorPoint = CGPointMake(0.5, 0.8); \[**self**.view.layer addSublayer:minute\]; //创建时针 CALayer \*hour = \[\[CALayer alloc\]init\]; **self**.hour = hour; //大小 hour.bounds = CGRectMake(0, 0, 4, 60); //位置 hour.position = clock.position; //颜色 hour.backgroundColor = \[UIColor purpleColor\].CGColor; //锚点 hour.anchorPoint = CGPointMake(0.5, 0.8); \[**self**.view.layer addSublayer:hour\]; CADisplayLink \*link = \[CADisplayLink displayLinkWithTarget:**self** selector:**@selector**(timeChange)\]; \[link addToRunLoop:\[NSRunLoop mainRunLoop\] forMode:NSDefaultRunLoopMode\]; \[**self** timeChange\]; } -(**void**)timeChange{ NSDate \*date = \[NSDate date\]; // // NSDateFormatter \*formatter = \[\[NSDateFormatter alloc\]init\]; // formatter.dateFormat = @"ss"; // NSString \*ms = \[formatter stringFromDate:date\]; // CGFloat msValue = \[ms floatValue\]; NSCalendar \*cal = \[NSCalendar currentCalendar\]; CGFloat ms = \[cal component:NSCalendarUnitNanosecond fromDate:date\]; CGFloat s= \[cal component:NSCalendarUnitSecond fromDate:date\]; CGFloat m = \[cal component:NSCalendarUnitMinute fromDate:date\]; CGFloat h = \[cal component:NSCalendarUnitHour fromDate:date\]; //秒针角度 CGFloat angle = (2 \* M_PI/60) / 1000000000; CGFloat angle1 = 2 \* M_PI / 60; **self**.second.affineTransform = CGAffineTransformMakeRotation(angle1 \* s + angle \* ms); //分针角度 CGFloat minuteAngle = 2 \* M_PI / 60; **self**.minute.affineTransform = CGAffineTransformMakeRotation(minuteAngle \* m + angle1 \* s / 60 + angle \* ms / 60); //时针角度 CGFloat hourAngle = 2 \* M_PI / 12; **self**.hour.affineTransform = CGAffineTransformMakeRotation(hourAngle \* h + minuteAngle \* m / 12 + angle1 \* s / 60 + angle \* ms / 60); } - (**void**)didReceiveMemoryWarning { \[**super** didReceiveMemoryWarning\]; // Dispose of any resources that can be recreated. } **@end 当然还要有一个这样的表盘,** ![](https://file.jishuzhan.net/article/1721764295437455362/b44ce457bb5194d593c49f2c48cd168a.webp) 其实代码实现主要是用的CALayer的一些动画效果实现的。

相关推荐
红橙Darren4 小时前
手写操作系统 - 编译链接与运行
android·ios·客户端
鹏多多.7 小时前
flutter-使用device_info_plus获取手机设备信息完整指南
android·前端·flutter·ios·数据分析·前端框架
麦兜*1 天前
【swift】SwiftUI动画卡顿全解:GeometryReader滥用检测与Canvas绘制替代方案
服务器·ios·swiftui·android studio·objective-c·ai编程·swift
GeniuswongAir1 天前
iOS 26 一键登录失效:三大运营商 SDK 无法正常获取手机号
ios
吴Wu涛涛涛涛涛Tao1 天前
Flutter 实现类似抖音/TikTok 的竖向滑动短视频播放器
android·flutter·ios
猪哥帅过吴彦祖1 天前
Flutter 插件工作原理深度解析:从 Dart 到 Native 的完整调用链路
android·flutter·ios
归辞...1 天前
「iOS」————UITableView性能优化
ios·性能优化·cocoa
AI工具测评与分析1 天前
EhViewer安卓ios全版本类下载安装工具的完整路径解析
android·ios
叽哥2 天前
flutter学习第 18 节:设备功能调用
android·flutter·ios