成為懂技術的設計師！教你如何讓界面動畫自然流暢

編者按：扁平化讓界面動畫越來越流行，但想要做出自然流暢的動效，懂軟件還不行，你得學點函數。（哎喂，先別跑！）騰訊的史蒂夫同學直接從產品出發，聊聊如何用科學的方法地讓動畫更自然。語言淺顯易懂，文末附動效小驚喜，學習下。

隨著軟硬件技術的發展，界面動畫在我們的日常生活中隨處可見。桌面軟件、移動應用、云服務等，此刻環顧四周，我相信你一定能發現他們。

在產品中動畫未必越多越好，也未必越炫越好。不同的產品類型對動畫的要求也不同。常見的動畫主要承擔向用戶解釋界面與界面之間的關系，元素與元素間的關系以及特定元素的強化。

如果你關注過界面動畫，你可能見過以下這些動畫曲線。摘自 http://easings.net/

他們表述了動畫變化的程度與時間的關系。通過合理利用這些動畫曲線背后的原理，可以讓動畫看起來更加真實。

這里說到我們要讓界面動畫更自然。如何做到自然？只要遵循客觀物理規律以及人得視覺經驗，動畫就會看上去真實自然。

為什么要講動畫函數？相信很多設計師看到下面的文章會的覺得太枯燥。

那我們回到產品研發過程，在產品里，常見的動畫實現有這么幾種：

1. 設計師逐幀繪制；開發同學實現循序/循環播放邏輯。

2. 設計師提供動畫資源文件如（視頻、flash、gif）；開發同學將資源嵌入產品。

3. 設計師提供動畫形式、參數與元素；開發同學完成動畫實現，如：html5/CSS動畫。

文本想針對第三種形式，幫助設計師了解動畫背后的科學知識，可以有具體的參數與開發同學溝通。

如果你熟悉物理課本里的運動公式，請跳過第一部分。

運動動畫

我們先從最簡單的運動動畫說起。我們客觀物理規律還是得從牛頓第二定律說起。F＝ma，如果大家不明白這個公式，沒關系。

請允許我不那么講究術語的嚴謹性。通俗點來說，就是運動動畫響應變化情況與執行動畫的物體本身有關。如果你想表現的物體是一個沉甸甸的，那么他們的起始動畫響應/參數的變化會比較慢。反之，物體是輕巧的，那么其起始動畫響應/參數的變化會比較快。

從圖上可以看到如果是相同的操作且移動相同的距離，輕巧的所花的時間越短。

阻尼動畫

提到阻尼，需要介紹三個概念：臨界阻尼、過阻尼、欠阻尼。

臨界阻尼

生活中一些高檔的門或櫥柜。他們在開合的過程中為了不造成太大的聲響，他們的機械結構阻尼會盡量設計接近臨界阻尼。這個過程最容易讓人接受，不會感覺有外界干擾。過阻尼和欠阻尼，通常能讓你感覺到有一只隱形的手，阻礙或促進運動。

過阻尼

從字面上會容易理解，就是阻尼很大，阻礙運動的發展。有些自動門或電梯門在閉合的過程中，在最后段里往往需要更長的時間。另外，記憶枕的恢復的過程也是過阻尼。

欠阻尼

阻尼不夠，繼而形成了振蕩的特征。生活中的一些彈簧門，在關閉的過程中，會多次擺動，最終趨于閉合。

做一個比較細膩的界面動畫時候，如果追求理性一些，可以把動畫的成果拆解成三個階段。啟動、運行、收尾。設計師需要花更多的時間去考慮啟動與收尾過程。

· 啟動階段：體現力、質量、環境，可以表現材質的輕盈與厚重。

· 收尾階段：體現質量、速度、環境。阻尼通常在這個階段體現。

舉個例子

請大家關注啟動與收尾階段。

動畫曲線僅作示意感受，可能與實際動畫有所出入。

呼吸動畫

呼吸動畫，常用于界面元素的提醒。

對于這個動畫，設計師最直觀的印象就是閃爍。在實施的過程中，對于閃爍一詞會被賦予不同的理解。

· 設計師眼中的閃爍：“漸顯 -> 漸隱 -> 漸顯 -> 漸隱”；

· 工程師眼中的閃爍：“顯示 -> 隱藏 -> 顯示 -> 隱藏”；

如何把動畫做得更細膩，就在于如何將漸顯與漸隱的過程如何描述得更加仔細。

對于最早的漸顯、漸隱動畫，我首先想到了三角函數。

仔細觀察這個函數，可以發現他的特點是在一個周期里是啟動漸增、收尾減緩的過程。適合開發利用簡單代碼實現的動畫效果。

有興趣的同學可以用原型感受一下。做閃爍動畫，用到三角函數其實就可以滿足大部分場景。

我在嘗試的動畫的時候，把他作為呼吸函數來看，總覺得哪里還是不太自然。看起來“呼吸比較急促”。

我們來分析一下呼吸函數。

為什么看起來呼吸局促呢？請各位看官現在試試深呼吸，體會一下。你會發現在我們的在吸氣的階段，很快會就達到肺撐滿的狀態，然后吐氣的階段可以持續很久。大體上比例分布是這樣的。

融合入三角函數，將起始的漸增與收尾的減緩引入。感謝Don同學提供了一個完整的函數。

這個函數的周期為6，峰值出現在2。整個變化起始與收尾都是漸變過渡。

k=1/3，t=6, n={1,2,3,…}

大家感受一下

之前我利用了些業余時間，在Arduino硬件上試了一下。大家可以看一下視頻。我以為漸顯、漸隱的動畫的是這個樣的：

視頻地址：簡單三角函數的呼吸燈

其實應該是這樣的：

視頻地址：使用呼吸函數的呼吸燈

除此之外，使用CSS3制作自然流暢界面一樣棒棒噠！看這篇《這個比較高端了！CSS3動畫幀數科學計算法》

其他

除了在動畫變化過程中對客觀規律的描述外，對于用戶場景的還原也能增加自然感。

比如這個站點的checkbox。我們在日常生活中，面對紙質的選項，我們會選擇涂抹的方式來進行選擇。

或者這樣刪除

更多效果，可以訪問 →?動態checkbox。

寫在最后的小工具

如果使用 Mac 的小伙伴，Apple 提供了一個繪制函數圖像的利器 Grapher。本文的函數均由此工具繪制。感興趣的同學可以嘗試用一下。

動效設計好文合集！

教你快速保存動效！
《經驗分享：如何快速保存APP動效？》

手把手教你設計動態界面！
《PS高手教程！教你打造流暢酷炫的動態演示》

騰訊出品的動效設計指南！
《超贊！高大上的動效設計方法及流程總結》

原文地址：騰訊ISUX

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量76萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：