自制圆形时钟⏰

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

#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
当然还要有一个这样的表盘,

其实代码实现主要是用的CALayer的一些动画效果实现的。

相关推荐
陈皮话梅糖@3 小时前
iOS 集成ffmpeg
ios·ffmpeg
幽夜落雨3 小时前
ios老版本应用安装方法
ios
胖虎111 小时前
实现 iOS 自定义高斯模糊文字效果的 UILabel(文末有Demo)
ios·高斯模糊文字·模糊文字
_可乐无糖2 天前
Appium 检查安装的驱动
android·ui·ios·appium·自动化
胖虎12 天前
iOS 网络请求: Alamofire 结合 ObjectMapper 实现自动解析
ios·alamofire·objectmapper·网络请求自动解析·数据自动解析模型
开发者如是说3 天前
破茧英语路:我的经验与自研软件
ios·创业·推广
假装自己很用心3 天前
iOS 内购接入StoreKit2 及低与iOS 15 版本StoreKit 1 兼容方案实现
ios·swift·storekit·storekit2
iOS阿玮3 天前
“小红书”海外版正式更名“ rednote”,突然爆红的背后带给开发者哪些思考?
ios·app·apple
刘小哈哈哈3 天前
iOS UIScrollView的一个特性
macos·ios·cocoa
忆江南的博客4 天前
iOS 性能优化:实战案例分享
ios