Swift如何纯代码实现时钟效果

OneSwift - iOS Tips Based On Swift

在刚开始学习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