Swift利用純代碼實(shí)現(xiàn)時鐘效果實(shí)例代碼
前言
在剛開始學(xué)習(xí)iOS開發(fā)時,我制作了OneClock,它除了使用最多的翻頁時鐘效果,還擁有最常見的時鐘樣式。
今天用一個很簡單的方式為大家展示如何實(shí)現(xiàn)時鐘效果。
1.分別創(chuàng)建時針、分針、秒針
2.隨著時間改變進(jìn)行對應(yīng)旋轉(zhuǎn)
一、創(chuàng)建時針、分針、秒針
分別創(chuàng)建三個指針的同時,我們初始化了他們的位置,也就是在12點(diǎn)的方向。
這里我只貼出創(chuàng)建的代碼,在使用的過程中可以根據(jù)需要進(jìn)行放置。其中hourLength、minuteLength、secondLength分別代表三個指針的長度,在實(shí)際使用中根據(jù)頁面情況進(jìn)行調(diào)整大小。
//創(chuàng)建一個時針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) //創(chuàng)建一個分針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) //創(chuàng)建一個秒針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)
二、時間跟蹤器
創(chuàng)建指針只是時鐘的第一步,之后我們需要用時間來改變對應(yīng)的指針位置。所以在創(chuàng)建指針之后,我們需要緊跟著一個時間監(jiān)視器,通過move函數(shù)來調(diào)整指針方向。
先定義Timer
var timer:Timer!
再為Timer綁定函數(shù),時間間隔為0.2秒執(zhí)行一次move
timer = Timer.scheduledTimer(timeInterval: 0.2,target:self,selector:#selector(PolarViewController.move),userInfo:nil,repeats:true)
三、改變指針位置
實(shí)現(xiàn)原理是,先在函數(shù)move()中定義每個指針旋轉(zhuǎn)的大小,再進(jìn)行周期性刷新位置。
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) //當(dāng)前時間 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)) //計(jì)算旋轉(zhuǎn)角度 angleSecond = angleSecond * secondInt angleMinute = angleMinute * minuteInt + angleSecond/60.0 angleHour = angleHour * hourInt + angleMinute/60.0 //保持中心點(diǎn) self.secondView.center = self.view.center self.minuteView.center = self.view.center self.hourView.center = self.view.center //旋轉(zhuǎn)各自的角度 self.secondView.transform = CGAffineTransform(rotationAngle: angleSecond) self.minuteView.transform = CGAffineTransform(rotationAngle: angleMinute) self.hourView.transform = CGAffineTransform(rotationAngle: angleHour) }
四、手機(jī)旋轉(zhuǎn)后的頁面刷新
最后增加在旋轉(zhuǎn)模式下的自動刷新,幫助修正顯示。
override func willRotate(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval) { move() }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Swift?中的?Actors?使用及如何防止數(shù)據(jù)競爭問題(示例詳解)
Swift中的Actors旨在完全解決數(shù)據(jù)競爭問題,但重要的是要明白,很可能還是會遇到數(shù)據(jù)競爭,本文將介紹Actors是如何工作的,以及你如何在你的項(xiàng)目中使用它們,感興趣的朋友跟隨小編一起看看吧2023-06-06LeetCode?題解?Swift?有效的完全平方數(shù)
這篇文章主要為大家介紹了LeetCode?題解?Swift?有效的完全平方數(shù)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Swift項(xiàng)目中利用SWRevealViewController實(shí)現(xiàn)側(cè)滑菜單
這篇文章主要介紹了Swift項(xiàng)目中利用SWRevealViewController實(shí)現(xiàn)側(cè)滑菜單,需要的朋友可以參考下2015-12-12在 Swift 中測試 UIAlertController的方法
這篇文章主要介紹了在 Swift 中測試 UIAlertController的方法的,需要的朋友可以參考下2015-10-10Swift中實(shí)現(xiàn)點(diǎn)擊、雙擊、捏、旋轉(zhuǎn)、拖動、劃動、長按手勢的類和方法介紹
這篇文章主要介紹了Swift中實(shí)現(xiàn)點(diǎn)擊、雙擊、捏、旋轉(zhuǎn)、拖動、劃動、長按手勢的類和方法介紹,本文分別給出了各種手勢的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01Swift 中如何使用 Option Pattern 改善可選項(xiàng)的 API 設(shè)計(jì)
這篇文章主要介紹了Swift 中如何使用 Option Pattern 改善可選項(xiàng)的 API 設(shè)計(jì),幫助大家更好的進(jìn)行ios開發(fā),感興趣的朋友可以了解下2020-10-10