[譯] iOS 中賞心悅目的動畫

• 原文地址：Delightful animations in iOS
• 原文作者：Roland Leth
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：iWeslie
• 校對者：Fengziyin1234

我們熱愛動畫。

一方面，它們引導我們的視線，同時也是畫龍點睛的一筆，增添了額外的關注點甚至一點 感情。比起靜態的 UI，我們更偏愛生動形象並且能給我們反饋，可以互動的 UI。但是太多了就會造成不良的後果，所以讓我們來探索一些可以給一款 app 增加恰到好處的潤色的動畫。

在 touchDown 時改變一個按鈕的大小或顏色

我們通常在 touchUpInside 上設定點選事件，其原因是可以讓使用者有機會改變他的主意，但在現實生活中，按下按鈕則執行事件，這應 touchDown 處理。我們可以在此時讓 UI 響應使用者的互動，並通過改變外觀讓他們知道一些事 確實 已經發生了。

但是仍然不要太過分。 我以 0.97 的 scale 開始，背景色的 alpha 為 0.85，borderWidth 增加 1 或 2，或者是它們其中兩者的組合，超過兩個的話就有點過了。從這開始，你還有很多選項，僅僅舉幾個例子：增加 scale 縮放比例，改變 y 值，新增一個輕微的陰影，當一個按鈕被不停地點選時新增一個 “抖動” 動畫，就好像按鈕在跟你說 我已經知道你點了我了，你還想幹嘛？，還有增加字型的粗細，抑或是改變背景顏色。

這類動畫不必很顯眼，它們唯一的目的就是畫龍點睛，以及給使用者一些資訊，告訴他們一些事情 確實 已經發生了。

新增到購物車或類似動作

就像蘋果在 Safari 中新增書籤的動畫一樣，我們也可以把新增到購物車時做成這樣的動畫，這樣的話就可以把使用者的視線引導到購物車按鈕上。如果按鈕上有小數字的話，就新增個縮放動畫，例如像彈簧一樣的動畫。或者直接模仿蘋果的原生效果，把整個圖示新增動畫就好像你買的東西進入了購物車一樣。

還有，我們可以讓 UI 對使用者的操作進行了相應，這樣也可以提示使用者下一步該做什麼。它能引導並告訴使用者發生了什麼以及 哪裡 發生了改變。你也許會覺得在把東西新增到購物車很多次之後，使用者自然就會知道購物車在哪裡了，也許你是對的，但是強調它並沒有壞處。

事件響應

通過合適的層級結構，一個按鈕事件的響應應當已經很突出了。但是有時候卻不可行或者根本不夠。所有有一種方法是給他新增一個輕微的動畫，也許是一個有節奏的跳動（scale 在 1.03 和 0.97 間範圍內的帶有延時的慢動作變化），或者一個抖動（快速地連續旋轉幾度，中間延遲較長），又或者是背景，文字顏色或大小，描邊的寬度和顏色等等的變化。但是要注意一次性不要變化太多了。

建立、刪除和提交

當發生了錯誤的時候可以採用相同的策略。

當提交一個表單時，如果其中一個 UITextFields 為空，就給它新增一個輕微的抖動，也可以給邊框或者文字新增紅色的閃爍的效果，這樣才能吸引使用者並告訴他們問題出在哪了。

如果使用者想新增了一個已經存在的東西，就讓那一項的背景色突出顯示出來或者抖動一下，這主要取決與它的大小，如果很大的話，非常輕微的動畫會更好，因為它的尺寸比較大的緣故，很微小的動畫反而會更加顯眼。

當使用者成功建立新的一項時，比起簡單的重新整理 UI，把新的那一項滑入或者淡入，或者也可以使用 tableView.insertRows(at:with:) 自帶的動畫會更好。反之亦然，刪除一項也可以這麼做。

選擇

想象一下單選按鈕或者核取方塊，在這特殊的情況下，動畫的唯一作用就是潤色，因為並沒有太多真正的使用者體驗價值。這樣確實新增了一個視覺上的確認效果，直到手指抬起。一個核取方塊可以繪製複選的標記，就好像你是在紙上把它畫出來一樣。至於單選按鈕，則可以給它的中心填充，例如下面的效果：

小竅門

你可以看看我的關於上面的單選按鈕動畫的 帖子，我把動畫拆分成了很多非常細小的步驟，核心部分則是：

1. 正確理解動畫的組成部分。
2. 採取易於實施的可操作步驟。
3. 如果需要的話，使每一步驟足夠的小以便於更換或移除。

再次強調：不慍不火，從細節開始做。比起沒有動畫，誇張的動畫反而更加有害。從短小精悍的動畫開始吧，只變化幾個屬性！比起十分刺眼的動畫，能讓使用者能注意到的微妙細節上的動畫會更好。

有一些例子的要點可以在 這裡 找到，單選按鈕的動畫可以在控制元件的找到 這裡 有單選按鈕的動畫，它們可以在自身的控制元件中找到。

祝你和動畫相處愉快！

---

你可以在我的部落格裡找到更多文章，或者訂閱 每月的推送。原文連結：rolandleth.com。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。