自制圆形时钟⏰

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

#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 allocinit];

//大小

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 allocinit];

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 allocinit];

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 allocinit];

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 allocinit];

// 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的一些动画效果实现的。

相关推荐
天桥吴彦祖1 天前
判断iOS如何监听手机屏幕是否锁屏
ios
敲代码的鱼2 天前
PDF 预览与签名批注写回 支持安卓 iOS 鸿蒙 UTS插件
android·前端·ios
时光足迹2 天前
uni-app 视频通话实战:康复师与患者视频问诊的 6 个致命 Bug 与解决方案
android·ios·uni-app
时光足迹2 天前
JPush UniApp UTS 插件完全参考手册:API、事件与厂商通道一网打尽
vue.js·ios·uni-app
时光足迹2 天前
极光推送全攻略(下):uni-app 代码实现与 iOS 排查实战
vue.js·ios·uni-app
时光足迹2 天前
极光推送全攻略(上):被iOS证书折磨了三天,我写了一份前端也能看懂的避坑指南
前端·ios·uni-app
编程范式4 天前
SwiftUI 中图片如何适配可用空间
ios
songgeb6 天前
启发式 UI 自动化:从线性剧本到每步读屏决策
ios·测试
壹方秘境9 天前
我用Go语言开发了一个跨平台的HTTPS抓包和调试工具
前端·后端·ios
初级代码游戏15 天前
easy Photo Clean公测版:快速清理iPhone照片 邀请公测
ios·iphone