動效設計的物理法則

標籤：

動效作為當今提升網頁感官效果的利器，在各種類型的網頁中已經全面開花，如何做到自然流暢讓使用者感覺舒適的動畫效果呢？今天就來跟大家聊一聊動效設計的物理法則，以及它是如何應用的。

首先來一發大師金句，迪士尼動畫大師格裡穆·乃特維克曾經說過：

動畫製作和動效設計是本質相通的，我們需要為使用者建立一種“視覺的真實”，即動作是可信的，我們需要獲得的不是照搬線下情境的寫實主義，而是“可信度”，要讓使用者感知到這個動作是成立的。這裡，就要搬出高大上的物理學了！

物理學四大基本力——萬有引力、電磁相互作用力、弱相互作用力、強相互作用力，我們在現實生活中能夠感知到的基本上都源自萬有引力（其他三種力咱也分析不出來啥）。換句話說，使用者在現實生活中建立的動作經驗，皆源於物體的“重量感”。要分析萬有引力，就得翻出牛頓大大的課本章節了。

（一）牛頓第一定律

根據牛頓第一定律——慣性定律，任何物體都要保持勻速直線運動或靜止狀態，直到外力迫使它改變運動狀態為止，說白了，就是不考慮任何力的作用的物體運動，其速度大小和方向是沒有任何變化的，用公式表示：

通過以上公式我們可以繪製出勻速直線運動的位移-時間曲線：

應用到網頁設計中，為了實現過渡效果，我們必須類比出頁面區塊的位移-時間曲線，對於運動拆解分析得到的分段曲線，可以運用電腦圖形映像造型的基本工具——貝茲路徑繪製出來，調用CSS3 animation-timing-function 屬性中的貝茲路徑繪製函數cubic-bezier可以輕鬆的用程式類比運動軌跡。

例如所示的貝茲路徑可以用四個點來定義，其中P0、P3是固定的點，它們的座標值是預設的[0,0],[1,1]。P1、P2兩點則用來控制曲線的形狀和曲率，PS中的鋼筆工具的錨點具有相同功能，這兩個控制點的座標值是需要我們通過cubic-bezier(x1, y1, x2, y2)自訂的，範圍在[0, 1]。 對於勻速直線運動，將運動時間設定為1s，通過cubic-bezier類比運動如下：

linear 動畫從頭到尾的速度是相同的。應用到網頁的banner地區切換動效中的效果（動圖需載入）：

感覺不是很自然，由於空氣阻力的存在，程式類比的勻速直線運動在現實生活中是很難實現的，因此對於這樣一個使用者平時很少感知到的運動是很難建立信任感的。這樣的勻速直線運動也是我們在進行動效設計時需要極力避免的。考慮到需要分析物體運動的受力情況，我們藉助牛頓第二定律來拆解運動。

（二）牛頓第二定律

根據牛頓第二定律——物體加速度的大小跟作用力成正比，跟物體的品質成反比，加速度的方向跟作用力的方向相同。當物體持續受到一個不變的力的作用時，它將做勻加速直線運動，用公式表示：

繪製出勻加速直線運動的位移-時間曲線：

通過cubic-bezier類比運動如下：

ease-in 動畫從低速開始，逐漸加速，收尾態速度最快。應用效果：

開始狀態符合靜止物體開始運動的物理規律，但是收尾態不太符合，物體在結束運動之前速度是整個運動過程中最快的，這是不合邏輯的。 如果我們讓收尾狀態符合物理法則，那麼就是需要讓物體減速下來，勻減速運動的公式如下：

繪製出勻加速直線運動的位移-時間曲線：

通過cubic-bezier類比運動如下：

ease-out 動畫從高速開始，以低速結束。應用效果：

類比的是物體收到一個期間很短的推力作用後自然滑行並慢慢停止的過程。在本應用情境使用這種效果是比較合適的，banner圖片剛開始切換運動時，需要用一個比較快的速度來吸引使用者的注意力“嗨！這兒有新的資訊！”，在快要抵達最終位置的時候，需要逐漸慢下來，因為此時使用者已經將注意力轉移到新的banner圖上了，使用者需要的是這一區塊逐漸慢下來好看清楚上面的內容，擷取資訊。

如果想要讓banner圖片在起始階段也是柔和地出現，可以緩入緩出一起使用，位移-時間曲線：

通過cubic-bezier類比運動如下：

ease-in-out 動畫從低速開始，以低速結束。應用效果：

轉場效果非常的柔和，也就是我們常說的“緩入緩出”。

（三）賦予材質——速度、形變和反饋

好的動效在滿足了基本的物理原則之後還有很多“材質”上的細節補充，主要有速度、形變和反饋這三個方面。 如果我們想要給上面的案例加上一點重量感，也就是讓物體看上去“有品質”，可以再速度上做一點文章，調節一下運動曲線；

通過cubic-bezier類比運動：

ease動畫從低速開始，動畫以低速開始，然後加快，在結束前變慢。應用效果：

我們可以用這種開始態和結束態絕對值不等的加速度讓運動產生“粘滯感”，可以讓運動的區塊產生更加真實的互動效果。但是另一方面，不對等的加速和減速過程有可能會讓動效產生拖泥帶水、不乾脆的感覺，具體應用還是要具體情況具體分析。

做到對物體運動過程的拆解分析再程式類比之後，我們還可以對運動物體的形狀上花一些小心思，通過物體形變和運動的反饋效果可以為物體賦予“材質”，來看幾個不錯的Web動效案例。

採用ease-out的參數設定，使得所有元素迅速進入使用者視線，又緩慢到達目標位置，動畫流暢自然。

通過不同區塊速度差來實現展開頁面的效果，但是仔細看每一個區塊的運動，發現實際上是沒有形變的，巧妙的速度變化也可以讓整個頁面的切換變得生動起來。

通過形變的設定，使得不同高度的柱狀圖形變會顯得很有彈性，仔細看該網頁表現的都是“Top”的資料，為柱狀圖賦予彈性效果也是非常符合其所表現的資料“情緒”的，整個頁面都會顯得趣味生動。

通過下拉框的反彈效果現實區塊的“窗帘”設計，運動反饋也可以為網頁元素賦予材質。

本文主要分析的案例集中在網頁動效當中運用最廣泛的線性運動，對於基本動效的其他動作，如縮放、旋轉、不透明度等等效果的變化，其本質上是相通的，結合物理法則的分析實踐均可以做出自然流暢的效果， 總結一下應用流程： 1. 分析具體內容區塊的運動，結合需求本身繪製出區塊運動的運動數值-運動時間曲線。 2. 拆解曲線，運用貝茲路徑類比運動。 3. 通過速度調整、材質形狀變化和運動反饋來為區塊賦予動效豐富的細節。

感謝越澄同學的支援人員，送上指令碼傳送門： http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp http://cubic-bezier.com/#.63,0,1,1

動效設計的物理法則