Swift —分享 動畫小技巧（ Animation Tips）

序：

因為本人在下我很喜歡做一些程式的動畫效果，因此我要來分享「 我的 」在實作動畫效果的小技巧。

因為是我自己的技巧，可能在效能上有些疑慮或是可能部分依賴 storyboard 實現動畫效果，要不要實用就端看個人（ 麻煩小力鞭

那麼我就開始來分享我製作動畫時的小技巧囉～

動畫小技巧（ Animation Tips）

# Tip 1 仔細觀察動畫的執行過程

程式碼中動畫的執行區塊

你可以看到我們上方的程式碼的紅色區塊，可以想像成一段動畫效果，每執行一段之後（ finish ），就會在執行下一個區塊，如此循環。所以，我們必須了解其動畫效果是同時進行，還是分別、接續進行的，如此一來我們才能劃分我們的程式碼。

仔細觀察是否需要同時執行或是接續進行

# Tip 2 用 Functions 來打包我們的動畫效果

使用 functions 來打包動畫

你可以看到我在寫動畫效果時，常常會把動畫效果寫在 function 中使用，我這麼做的用意有下列考量：

1. 透過 function 名稱，我可以很容易知道這段動畫效果是什麼
2. 假如有重複的動畫效果，即可使用該 function 重複使用。即使可能部分效果不同，但可以透過參數來變更。
3. 即使是不同元件（ UIButton、UILabel）也想進行相同動畫效果，也可以透過設定一個參數類型（ UIView ），讓這些元件能被執行相同效果。

假如你的動畫效果是接續進行的，必須接續在前一個方法之後，而不是同時貼上兩段程式碼，那麼他只會同時進行動畫效果。

# Tip 3 逆向的實作動畫效果

逆向實作動畫效果

你可以看到我會經常先做好畫面（ 左圖 ），之後在程式碼中的 viewDidLoad 去使他進行變形效果（ transform ）如右邊的圖片。之後，當我們需要的時候再使用 identity 就能使它恢復原本的樣子及位置。我會這麼做的原因是：

1. 在 Storyboard 上創建物件相對於程式碼容易，加上也能設置 AutoLayout ，也相對於程式碼直觀。
2. 很清楚動畫效果最後呈現的模樣，因為跟 Storyboard 相同，也不需要特別計算要位移到哪或變更該元件的 frame。

# Tip 4 動畫執行了嗎？（ 判斷動畫開關 ）

判斷動畫效果是否執行

當我們的動畫需要判斷是否執行了，或者是他是一個可以開關的動畫（ e.g. 彈跳視窗、菜單效果 ），我們必須判斷是否執行過了，所以我們必續透過一個 「 值 」來判斷是否執行了，這邊我們可以透過兩個方式：

1. 設置一個 Bool 值：我們可以藉由點擊之後變更其 Bool 值來判斷該動畫是否已經被執行過了，之後個別處理 true 及 false 狀態。
2. 檢查變更元件的屬性值：我們可以檢查被我們執行動畫效果的元件的屬性值，來判斷是否執行了。像是上面範例就是檢查元件的 alpha 值是否不等於 0，如果是 true 表示動畫已經執行；如果為 false，那麼就不做任何事情。

# Tip 5 動畫效果的衝突

動畫效果間的衝突

在我們動畫過程中，常常會有動畫之間會產生美麗的誤會（？），尤其是在你畫面有位移或滾動的情況下，導致可能部分的動畫效果執行後是看不見的，就像是我們上方的動畫一樣有兩種衝突情況：

1. 畫面在下方時，點選按鈕之後卻看不到紫色區塊。
2. 畫面拉到下方時，沒有收回紫色區域按鈕。

所以我們就會設置判斷式來修正上面的衝突，所以我們會設定：

1. 當紫色區域打開時 ，畫面拉到下方時，收回紫色按鈕。
2. 當畫面在下方時，點選紫色按鈕會移動回上方。

如此一來就能正常執行我們的動畫效果了，畫面如下：

解開動畫效果間的衝突

# Tip 6 動畫效果的接續

動畫效果接續的程式碼

常常我們寫了一個動畫效果，因為是要動畫效果不斷接續下去，所以可能寫成如上方圖片這樣一直不斷接續下去，可能會寫出好幾個區塊，導致程式碼看起來很繁複，修改起來也困難。

所以我們可以將動畫效果畫分區塊，將相關的範圍寫成一個區塊個別管理。舉例像是我之前做的按鈕下載的動畫效果，我們會這樣劃分：

按鈕的下載動畫效果

1. 第一部分：將按鈕改變成 Loading 方框樣式
2. 第二部分：下載進度條動畫執行
3. 第三部分：按鈕變為圓角 Complete 狀態

你可能會好奇，程式碼不是一樣長度嗎？為什麼我還要這樣特地劃分？

沒有錯？程式碼基本上還是照著原本的方式打，長度大致上也沒有太多的改變，只是我透過這些 function 我可以容易管理修正，也不會如同上方如此繁複。

假設我今天每個部分各有三個動畫效果的區塊，假設我不用此方式，就是連續寫了九個區塊 1、2、3、4 … 9 這樣子，看起來十分複雜。那我用這個方式可以把它劃分三個 function 每個部分都有三區塊，123 、456、789 這樣子，看起來比起上面易讀也容易修正。

結尾

感謝大家看完這邊文章，裡面都是我製作動畫效果半年以來的小技巧（或是旁門左道，如果覺得不錯可以試著用用看，如果有什麼疑惑的地方可以留言討論一下。

本期動畫小技巧在這邊結束，不知道還有沒有下一期。