交互動效乾貨——動畫節奏感不好，動畫生硬如何治療？（調貝塞爾曲線）

交互動效設計的時候，動畫節奏感不好，動畫生硬，如何避免這種現象？

我們需要提升三個點的能力來進行治療。分別是「感受」「觀察和分析」「軟體執行手段」。

1、感受

心裡要有節奏感。感受時間的流淌，在時間流失的過程里去想像和感受動作的變化。之後才是在軟體上調節各項參數來擬合自己心裡的想像。心中要有物。自己的大腦都構建不出來的場景，盲目去調軟體是沒有收穫的。n

2、觀察和分析

留意現實生活中發生的事件。也要留意非現實的影視作品。去看前人發明的表現手法。模擬、抽象、借鑒，或者致敬都是好的。多看。n藉助可以記錄和回放的設備，通過減速或畫面疊加來分析自己看不清的動作。人類發明攝像機之前，世界上絕大多數畫家畫「賓士駿馬」，其nn馬腿都是錯誤的。

3、軟體執行手段

調節動畫的核心是時間和曲線。曲線包括運動軌跡，這個很直觀，這裡暫時不討論。比較抽象的是速率曲線，一般使用貝塞爾曲線來調節運動速率。

①了解貝塞爾曲線是什麼。

CSS3 Bezier Curve Tester

cubic-bezier.com

可以用這些工具來體驗一下貝塞爾曲線。

不管是交互動效，還是 motion graphics、3D動畫，使用貝塞爾曲線來調節運動速率都是一個常規的做法。幾乎所有的設計軟體都支持貝塞爾曲線調節。

如果你使用的軟體是Ae，上面那個 CSS3 Bezier Curve 對應東西是「值圖表」：

顧名思義，隨著時間的推移，這個屬性的值從0過渡到100%。你操作的是「值」。可以觀察到，它開始和結束的線段都比較緩，中間陡峭一些，是緩動效果。

你也可以在 Ae 里選擇編輯「速度圖表」：

速度曲線表示：每一刻這個屬性變化的的速度。左邊是0，它靜止；慢慢開始加速，中間速度最高；然後減速，最右邊速度為0的時候已經停了下來。

以上兩個曲線是以不同的角度描述著同一個運動，初學者需要在軟體里來回切換著理解一下。

②怎麼輸出。

輸出給開發人員的設計標註文檔中，應當標註清楚這個曲線。

例如：cubic-bezier(0.25, 0.1, 0.25, 1)

使用 Bezier Curve 的話可以直接顯示出這個參數。你告訴開發人員「貝塞爾插值器」他應該會知道的。如果他不知道，請原諒他，並和他一起研究一下（因為玩到後面你自己也必須懂這個）。

如果你是使用 Ae，你可能要想辦法去得到你調的「值圖表」所對應的 Bezier Curve 參數是多少。其實就是兩個控制點的x、y值。這篇文章將深入了解插值器和文檔標註：動效乾貨--交互動效在開發落地中是怎麼實現的？（插值器及動效標註） - 知乎專欄

③運用貝塞爾的一些小技巧。（初學者在閱讀下文的同時，請親自動手實驗）

• 一般來說，右上方的這個操作點，初學者可以盡量把它拉成水平的。這樣動畫結束的時候會減速停下，比較舒緩。適合一個需要停止在界面內的元素使用。

  

• 如果一個元素一開始就是在界面內的。那麼他開始運動時，就需要一個加速度的過程，開始時比較慢，速度一點點加快起來。那就需要把左下方的操作點拉得接近水平。

  

• 如果一個元素需要從界面內移動到界面外。它需要一直加速，直到出界面外，甚至到達設定的終點都不會減速。貝塞爾曲線將從左到右完整地描述這個過程。這個時候右上方的操作點則不能再拉成水平狀，必須傾向於垂直。不然如果元素在接近屏幕邊緣的時候又開始減速的話——會很奇怪。

  

• 貝塞爾曲線操作點的可調範圍不止局限在這個矩形里。例如右上方的點高於這個矩形的話，會得到「跑超過了，再反回來」的 overshoot 動作。

  

以上都是比較初級、必備的手段。多動手練習，每個人都能掌握。

而「感受」是更難得的。通過控制這樣小小的兩個把手，可以模擬出：阻力感、潤滑感、磁鐵吸附感、排斥感、橡皮彈性、重力、力度打擊、萌動、粗暴、溫柔、流動、敏捷……

其實調動畫很有意思的：）

===========================================================

開了很久的專欄，一直沒時間寫內容。今天回答了一個問題之後，才把那個答案轉發在這裡……之後會慢慢補充起來的。但一開始會偏初級的內容。面向的對象是有一定設計基礎的，但完全沒有接觸過動畫的人。之後會慢慢開始討論中高級內容。未來的內容包括：

設計方法類：動畫基礎法則、互動體驗、系統動效設計、概念方案探索等等。

技術手段類：交互事件、開發工具、開發落地跟蹤、動畫腳本、代碼藝術等等。

工作技巧類：和開發同事的有效溝通、如何鼓勵和支持開發同事挑戰高難度視覺效果、推動新概念進入整體設計方案、推動設計方案落地等等。

推薦閱讀：