動效乾貨——交互動效在開發落地中是怎麼實現的？（插值器及動效標註）

這篇文章是寫給設計師的。我的經驗告訴我，動效設計師確定要懂這些。

軟體開發在實現「動畫」的時候，最為關鍵和基礎的就是「動」。就是某些參數從一個值，漸變到另外一個值。而這個漸變過程里有兩個點特別重要。

1、刷新率。

不只是傳統動畫里有「幀」這個概念，當代的數字動畫里都是有「幀」的。「幀」就是刷新率。24幀/秒 是傳統電影的刷新率，60幀/秒 是電視、顯示器、手機屏幕的刷新率。就目前來說，交互動效選擇 60幀/秒 是夠的（以後會越來越高）。低於這個會感覺不流暢，高於這個硬體展示不出來。

2、變化速率

n

簡單來說就是「先快後慢」「先慢後快」「緩動」「回彈」等等效果。軟體開發一般有兩種方法來實現。

①直接為視覺元素的某個屬性值（比如x軸的位置）每幀賦予一點變化。

比如每幀挪動一點，以60幀/秒的刷新率刷新界面，視覺元素就可以流暢地動起來。勻速運動被稱為線性運動。但是非線性運動就非常難控制了。設計師也很難上手用這種方法做設計。於是人們發明了第二種方式。

②插值器。

這篇文章的重點部分。

插值器

這個小工具可以幫助你理解什麼是插值器 Interpolator

插值器是使用公式來自定義的。作者提供了幾種公式，點擊「Library」來選擇切換。

插值器只描述中間過渡的變化速率。

使用插值器我們會得到一組數據，數據裡面描述了「在每一幀上，變化完成的百分比」，用 0 ~ 1 表示百分比。

比如：

如果刷新設置成 60幀/秒，動畫時長是1000ms。那麼可以得到在第30幀，也就是第0.5秒的時候，工具上對應的 x 是0.5時，變化只完成了0.25。

開發者把從插值器中得到的數據帶入到視覺元素的屬性上，比如y軸的位置。再定義好起始值、結束值，就得到了一個動畫了。

貝塞爾插值器

後來人們又引入了更方便設計師使用的工具 CSS3 Bezier Curve Tester

也是同樣的道理，貝塞爾曲線也有它的公式，被寫在插值器裡面。只不過使用這種方法，設計師可以通過調節兩個把手就能得到豐富的細節表現。輸出給開發落地的標註文檔也只需要提供這兩個把手的參數。

常用的設計軟體里都有用到貝塞爾曲線，你在使用 Ae 的時候可能就已經用過。另外一篇文章給出了關於設計師如何使用貝塞爾插值器的一點小細節。

動效標註

綜上，目前普遍的動效落地的做法就是使用貝塞爾插值器。

開發落地的時候，動畫標註文檔只需要關注幾個點：

1. 觸發事件
2. 哪個元素

3. 哪個屬性

4. 起始值和結束值

5. 插值器

6. 時長（一般情況下提供毫秒單位，程序會自動處理）

7. 其他補充（是否需要延遲，是否重複播放等等）

這個是我給開發的動效標註文檔。當然，文檔裡面會在旁邊附上一段視頻example。

比起那些動不動畫個表格的形式，很簡潔了不是嗎？

雖然乍一眼看不出來是什麼效果，但是旁邊還提供視頻可以觀看。在產品化落地的工作中，這樣做很高效，很準確。

有時候我甚至不提供視頻example，只給文字描述^_^

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

以上就是入門級的動效落地手段。可以搞定多數簡單場景。

但很明顯可以看出來，這個方法 cover 不住「drag滑動」「scroll拖拽」等交互形式的動畫。

那些是更進階一級的知識。我會抽時間補充的：）

更詳細的貝塞爾插值器原理：

動效乾貨--貝塞爾曲線插值器原理（進階準備） - 知乎專欄

更多交互事件：