Swift如何純程式碼實現時鐘效果

xDEHANG發表於2018-04-29
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

相關文章