四字箴言解鎖畫面

每天都在使用手機的我們，對解鎖畫面不陌生，如果能把自己目標的生活哲學或提醒自己的訊息顯示在解鎖畫面，或許每一天都離目標近一點了。

因為很喜歡等一個人咖啡電影裡爆哥的名言，所以就打算用他的名言來做這次作業了。

成果圖：

心得：

一開始先把畫面拉好，結構長這樣紅色圓圈的都是按鈕，然後每個按鈕旁的數字是他的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)
}

我遇到最大的困難就是動畫特效了，到現在我還是不太懂動畫的程式碼怎麼寫，坐等其他人分享了。

參考資料：

動畫部分參考這兩篇

iOS App 動畫建議使用 UIViewPropertyAnimator，別再用 UIView.animate

Apple Developer Documentation

程式碼跳轉畫面參考這篇

SWIFT用程式碼跳轉controller

GitHub連結：

Skylar327016/UnlockDemo