Swift — 玩玩 UIViewPropertyAnimator

讓我們使用 UIViewPropertyAnimator 做個動畫吧!

Jeremy Xue
Jeremy Xue ‘s Blog
6 min readJun 20, 2020

--

✒︎ 前言:

繼上一篇講解 UIViewPropertyAnimator 的文章後,那這邊我們就來使用它簡單做幾個動畫吧!

✒︎ 動畫實作:

‣ runningPropertyAnimator:

UIViewPropertyAnimator 中,我們有一個 runningPropertyAnimator 的 class function 可以直接創建並且返回一個動畫器,並且該動畫器立即執行動畫(有點類似於之前 UIView.animate 的方式)。大致上用法如下:

此函數還有一個 completion 閉包參數,可以在動畫結束後執行額外操作。

‣ 創建一個 UIViewPropertyAnimator:

我們也可以透過實例化的方式來產生 UIViewPropertyAnimator ,但是別忘了動畫並不會在產生後立即執行,我們必須調用 startAnimation 方法來啟動動畫。這邊我們產生與上面相同的動畫:

‣ 添加動畫及完成程式碼區塊:

在過去添加動畫對我來說是一件蠻困擾的是,因為總是要等到動畫結束,接著透過 completeion 的閉包才能執行下一個階段的操作,導致容易產生 callback hell 的狀況。但這點在 UIViewPropertyAnimator 就改善許多,我們可以很靈活的使用它提供的方法,像是 addAnimationsaddCompletion 以及 continueAnimation 在我們想需要動畫的時間點調用即可。

‣ 暫停並恢復動畫:

在我們動畫運行過程中,我們可以使用 startAnimation 來啟動/恢復動畫,然後使用 pauseAnimation 來暫停動畫。

‣ 倒轉動畫:

如果想要實現倒轉(reverse)的效果,我們只需要把屬性動畫器的 isReversed 這個屬性改為 true 即可。如果在動畫途中又想以正常方式播放,那麼就再次把 isReversed 設為 false 即可正常播放。(不需執行 startAnimation 方法)

‣ 停止動畫和設置動畫結束點:

當然我們也可以直接停止動畫,只是這邊我們在停止動畫時要特別注意的是 stopAnimation 這個函數需要帶上一個 withoutFinishing 的 Bool 函數,而當 withoutFinishing 為 true 時,屬性動畫器在停止後的 state 會為 .inactive;而為 false 時,state 則會是 .stopped

而當我們使用 stopAnimation 並且將其 withoutFinishing 設為 false 時,此時屬性動畫器 state.stopped,我們可以使用 finishAnimation 來使我們的動畫停留在某個位置上:

特別注意: finishAnimation 只有在屬性動畫器 state.stopped 的狀態才能調用,若在其他狀況下使用會導致應用崩潰。

‣ 調整動畫完成度:

這個可能是我覺得最特別的一個效果了,我們在屬性動畫器中看到一個稱為 fractionComplete 的屬性,而它的描述為「動畫的完成百分比」,是一個介於 0.0 ~ 1.0 的值,也就是說我們可以透過調整這個屬性的值來操控目前動畫進行的完成度。這邊我們簡單使用一個 UISlider 來操控目前動畫完成度吧:

✒︎ 後記:

可以看得出來 UIViewPropertyAnimator 在使用上確實比 UIView.animate 的方式實用許多,不管是在建立、管理、調整方面都比原有的方式靈活許多,而且又釋出許多屬性或方法讓我們可以更好的訪問目前狀態或是調整動畫完成度。希望透過這篇文章可以讓大家對 UIViewPropertyAnimator 有更近一步的了解,抽換掉過去的 UIView.animate 相關的舊方法吧 XD

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]