在刚开始学习iOS开发时,我制作了OneClock,它除了使用最多的翻页时钟效果,还拥有最常见的时钟样式。 今天用一个很简单的方式为大家展示如何实现时钟效果。
1.分别创建时针、分针、秒针
2.随着时间改变进行对应旋转
一、创建时针、分针、秒针
分别创建三个指针的同时,我们初始化了他们的位置,也就是在12点的方向。 这里我只贴出创建的代码,在使用的过程中可以根据需要进行放置。其中hourLength
、minuteLength
、secondLength
分别代表三个指针的长度,在实际使用中根据页面情况进行调整大小。
//创建一个时针VIEW
let hourView:UIView! = UIView.init()
hourView.center = self.view.center
hourView.layer.bounds = CGRect(x: 0, y: 0, width: 2, height: hourLength)
hourView.backgroundColor = PolarTheme.bottomColor
hourView.layer.anchorPoint = CGPoint(x: 1, y: 1)
hourView.layer.cornerRadius = 1
self.hourView = hourView
self.view.addSubview(self.hourView)
//创建一个分针VIEW
let minuteView:UIView! = UIView.init()
minuteView.center = self.view.center
minuteView.layer.bounds = CGRect(x: 0, y: 0, width: Int(1.5), height: Int(minuteLength))
minuteView.backgroundColor = PolarTheme.bottomColor
minuteView.layer.anchorPoint = CGPoint(x: 1, y: 1)
self.minuteView = minuteView
self.view.addSubview(self.minuteView)
//创建一个秒针VIEW
let secondView:UIView! = UIView.init()
secondView.center = self.view.center
secondView.layer.bounds = CGRect(x: 0, y: 0, width: 1, height: secondLength)
secondView.backgroundColor = PolarTheme.topColor
secondView.layer.anchorPoint = CGPoint(x: 1, y: 1)
self.secondView = secondView
self.view.addSubview(self.secondView)
二、时间跟踪器
创建指针只是时钟的第一步,之后我们需要用时间来改变对应的指针位置。所以在创建指针之后,我们需要紧跟着一个时间监视器,通过move
函数来调整指针方向。 先定义Timer
var timer:Timer!
再为Timer
绑定函数,时间间隔为0.2秒执行一次move
timer = Timer.scheduledTimer(timeInterval: 0.2,target:self,selector:#selector(PolarViewController.move),userInfo:nil,repeats:true)
三、改变指针位置
实现原理是,先在函数move()
中定义每个指针旋转的大小,再进行周期性刷新位置。
func move(){
var angleSecond:CGFloat = CGFloat(Double.pi * 2/60.0)
var angleMinute:CGFloat = CGFloat(Double.pi * 2/60.0)
var angleHour:CGFloat = CGFloat(Double.pi * 2/12.0)
//当前时间
let date = Date()
let calendar = NSCalendar.current
let secondInt = CGFloat(calendar.component(.second, from: date))
let minuteInt = CGFloat(calendar.component(.minute, from: date))
let hourInt = CGFloat(calendar.component(.hour, from: date))
//计算旋转角度
angleSecond = angleSecond * secondInt
angleMinute = angleMinute * minuteInt + angleSecond/60.0
angleHour = angleHour * hourInt + angleMinute/60.0
//保持中心点
self.secondView.center = self.view.center
self.minuteView.center = self.view.center
self.hourView.center = self.view.center
//旋转各自的角度
self.secondView.transform = CGAffineTransform(rotationAngle: angleSecond)
self.minuteView.transform = CGAffineTransform(rotationAngle: angleMinute)
self.hourView.transform = CGAffineTransform(rotationAngle: angleHour)
}
四、手机旋转后的页面刷新
最后增加在旋转模式下的自动刷新,帮助修正显示。
override func willRotate(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval) {
move()
}
GitHub:OneSwift – iOS Tips Based On Swift
微博:xDEHANG
今天的文章Swift如何纯代码实现时钟效果分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14341.html