Swift uses pure code to implement clock effect instance code

Preface

When I first started learning iOS development, I made OneClock, which not only uses the most page-turning clock effects, but also has the most common clock styles.

Today, I will use a very simple way to show you how to achieve clock effects.

1. Create hour, minute and second hands respectively

2. Corresponding rotations over time

1. Create hour, minute, and second hands

While creating three pointers separately, we initialize their position, that is, the direction of 12 o'clock.

Here I only posted the created code, which can be placed as needed during use. Among them, hourLength, minuteLength, and secondLength represent the lengths of three pointers, and are adjusted according to the page situation in actual use.

//Create a hour hand VIEW let hourView:UIView! = ()
  = 
  = CGRect(x: 0, y: 0, width: 2, height: hourLength)
  = 
  = CGPoint(x: 1, y: 1)
  = 1
  = hourView
 ()

 //Create a minute hand VIEW let minuteView:UIView! = ()
  = 
  = CGRect(x: 0, y: 0, width: Int(1.5), height: Int(minuteLength))
  = 
  = CGPoint(x: 1, y: 1)

  = minuteView
 ()


 //Create a second hand VIEW let secondView:UIView! = ()
  = 
  = CGRect(x: 0, y: 0, width: 1, height: secondLength)
  = 
  = CGPoint(x: 1, y: 1)
  = secondView
 ()

2. Time tracker

Creating a pointer is just the first step to the clock, and then we need to use time to change the corresponding pointer position. So after creating the pointer, we need to follow a time monitor and adjust the pointer direction through the move function.

Define Timer first

var timer:Timer!

Then bind the function to the Timer, and the time interval is 0.2 seconds to execute move

timer = (timeInterval: 0.2,target:self,selector:#selector(),userInfo:nil,repeats:true)

3. Change the pointer position

The implementation principle is to first define the size of each pointer rotation in the function move(), and then periodically refresh the position.

func move(){
 var angleSecond:CGFloat = CGFloat( * 2/60.0)
 var angleMinute:CGFloat = CGFloat( * 2/60.0)
 var angleHour:CGFloat = CGFloat( * 2/12.0)

 //Current time let date = Date()
 let calendar = 

 let secondInt = CGFloat((.second, from: date))
 let minuteInt = CGFloat((.minute, from: date))
 let hourInt = CGFloat((.hour, from: date))

 // Calculate the rotation angle angleSecond = angleSecond * secondInt
 angleMinute = angleMinute * minuteInt + angleSecond/60.0
 angleHour = angleHour * hourInt + angleMinute/60.0

 //Keep the center point  = 
  = 
  = 
 //Rotate their respective angles  = CGAffineTransform(rotationAngle: angleSecond)
  = CGAffineTransform(rotationAngle: angleMinute)
  = CGAffineTransform(rotationAngle: angleHour)
}

4. Refresh the page after the mobile phone rotates

Finally, add automatic refresh in rotation mode to help correct the display.

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

Summarize

The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.