四字箴言解鎖畫面
每天都在使用手機的我們,對解鎖畫面不陌生,如果能把自己目標的生活哲學或提醒自己的訊息顯示在解鎖畫面,或許每一天都離目標近一點了。
因為很喜歡等一個人咖啡電影裡爆哥的名言,所以就打算用他的名言來做這次作業了。
成果圖:
心得:
一開始先把畫面拉好,結構長這樣紅色圓圈的都是按鈕,然後每個按鈕旁的數字是他的tag數值,用來比對密碼的,上方有4個image view。
然後將storyboard的4個要顯示使用者的image view跟view controller連結,還有宣告一些會用到的變數,如以下註解。
@IBOutlet weak var firstWord: UIImageView!
@IBOutlet weak var secondWord: UIImageView!
@IBOutlet weak var thirdWord: UIImageView!
@IBOutlet weak var fourthWord: UIImageView!
//要操作動畫的StackView
@IBOutlet weak var words: UIStackView!
//放各個按鈕文字的UIImage陣列,索引值對照他們的tag,我寫成setWordsImage方法在viewDidLoad時把圖做好放進去預備
var images = [UIImage]()
//判斷使用者輸入第幾個數字,第四個數字時要判斷是否密碼正確
var keyCount = 0
//預設密碼9527不解釋
let password = "9527"
//用來儲存使用者輸入的文字的tag值串連的結果
var input = ""
再來將使用者輸入的文字按鈕連結到同一個IBOAction的keyIn方法,判斷使用者輸入的次數,依照他的tag值來顯示UIImage對應索引值的圖,這也是這次作業最主要的if-else練習,每次輸入文字後同時把該按鈕的tag數值轉乘字串append到input,作為第四次跟password比對的對象。
@IBAction func keyIn(_ sender: UIButton) {
keyCount += 1
if keyCount == 1{
firstWord.image = images[sender.tag]
input += "\(sender.tag)"
}else if keyCount == 2{
secondWord.image = images[sender.tag]
input += "\(sender.tag)"
}else if keyCount == 3{
thirdWord.image = images[sender.tag]
input += "\(sender.tag)"
}else{
fourthWord.image = images[sender.tag]
input += "\(sender.tag)"
if input != password{
animationForFailure()
}else{
actionForSuccess()
}
}
}
如果第四次輸入完密碼錯誤,就會跑animationForFailure方法,出現spring的動畫特效,這個動畫比較特別,必須先生成UIViewPropertyAnimator實體後,使用startAnimation才行,其中dampingRatio 這個參數會影響晃動的幅度。
func animationForFailure(){
let animation = UIViewPropertyAnimator(duration: 0.8, dampingRatio: 0.1, animations: {
self.words.center.x += 30
})
animation.addCompletion({_ in
self.restart()
})
animation.startAnimation()
}
另外上面動畫有使用addCompletion這個方法,在動畫完成後就把密碼清空,輸入次數重計,這邊不能直接將restart()寫在動畫後,因為這個方法不會等動畫執行完才執行,restart同時也是右下角cancel按鈕會執行的方法。
func restart(){
firstWord.image = nil
secondWord.image = nil
thirdWord.image = nil
fourthWord.image = nil
keyCount = 0
input = ""
}
如果使用者輸入密碼正確, 就會執行performSegue轉到下個畫面。
func actionForSuccess(){
self.performSegue(withIdentifier: "go", sender: self)}
我遇到最大的困難就是動畫特效了,到現在我還是不太懂動畫的程式碼怎麼寫,坐等其他人分享了。
參考資料:
動畫部分參考這兩篇
程式碼跳轉畫面參考這篇
GitHub連結: