OneSwift – iOS Tips Based On Swift

When I first started learning iOS development, I made OneClock, which has the most common clock styles in addition to using the most page-turning clock effects. Today with a very simple way to show you how to achieve the clock effect.

1. Create an hour hand, minute hand, and second hand respectively

2. Rotate as time changes

Create hour, minute, and second hands

When we create the three Pointers separately, we initialize their position, which is at 12 o ‘clock. Here I only post the code I created, which can be placed as needed during use. HourLength, minuteLength, and secondLength represent the length of the three Pointers, which can be adjusted according to the actual page.

// Create a clockwise VIEWlethourView: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. The cornerRadius = 1 self. HourView = hourView self. The addSubview (self. HourView) / / create a minute hand viewletminuteView: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) // Create a second viewlet 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)

Copy the code

Second, time tracker

Creating a pointer is only the first step of the clock, after which time is needed to change the position of the pointer. So after the pointer is created, we need to follow a time monitor with the move function to reorient the pointer. First define the Timer

var timer:Timer!
Copy the code

Then bind the Timer function and execute move once every 0.2 seconds

The timer = timer. ScheduledTimer (timeInterval: 0.2, target: the self, the selector:#selector(PolarViewController.move),userInfo:nil,repeats:true)
Copy the code

Change pointer position

Move () defines the size of each pointer rotation, and then periodically refreshes the position.

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) // Current timelet date = Date()
   let calendar = NSCalendar.current

   let secondInt = CGFloat(calendar.component(.second, from: date))
   let minuteInt = CGFloat(calendar.component(.minute, from: date))
   lethourInt = CGFloat(calendar.component(.hour, from: AngleSecond = angleSecond * secondInt angleMinute = angleMinute * minuteInt + angleSecond/60.0 angleHour = angleHour * hourInt + angleMinute/60.0 // Hold center self.secondView.center = self.view.center self.minuteView.center = Self. The center self. HourView. Center = self. The center / / rotate their respective point of self secondView. Transform = CGAffineTransform(rotationAngle: angleSecond) self.minuteView.transform = CGAffineTransform(rotationAngle: angleMinute) self.hourView.transform = CGAffineTransform(rotationAngle: angleHour) }Copy the code

4. Refresh the page after the mobile phone is rotated

Finally, auto-refresh in rotation mode was added to help correct the display.

override func willRotate(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval) {
    move()
}
Copy the code

GitHub: OneSwift – iOS Tips Based On Swift

Weibo: xDEHANG