[譯] 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。