2019-12-26 麗潔
動效設計，是 UI 設計當中不可或缺的一環。大家對動效的認知也從最初認為動效只是為了美觀酷炫，到逐漸理解了動效對于提升用戶體驗和產品需求的重要作用。而導致這種認知的轉變，相當一部分原因是因為硬件性能的發展和動效輸出方式的優化。
因為動效實現的過程就是設計師和開發之間互相博弈的過程。設計師可能通過 AE 或者其他工具做出炫酷的效果，和開發對接就懵了。要么無法實現，要么極其復雜。畢竟開發工程師要通過代碼把動效實現出來，設計師得用開發所能理解的語言來描述。就如同你能完美地解出一道數學題一樣，讓你把解題思路教給別人，你可能就沒那么順暢了。一方面取決于你的表述能力，而更重要的是對方的理解能力。過去所廣泛采用的通過動效標注輸出給開發的方式，都存在還原度的問題。很多時候還原度達到 80% 可能都算比較好的了。
而今天要說到的 Lottie 不僅可以 100% 還原動效，而且無需動效標注。直接通過 AE 輸出動效文件給開發。開發人員直接調用，然后完美還原。
Lottie 是 Airbnb 開源的一個動畫渲染庫，同時支持 Android、iOS、React Native 平臺。Lottie 支持渲染播放 AE 動畫。通過 AE 插件 bodymovie 導出 json 文件作為動畫數據。
Lottie 可以應用在 UI 設計的很多場景中。以下舉出幾個常用例子。
1. 動態啟動頁
2. 動態圖標/按鈕
3. 空頁面
以上僅列舉了部分常用案例，其實 Lottie 的應用場景遠不止這些。在 APP 的多個模塊中都可以運用，那么我們要如何將 Lottie 運用在自己的工作項目中呢？那就要了解 Lottie 的原理了。
前面已經提過 Lottie 是 Airbnb 開源的一個動畫渲染庫。我們可以理解為它是一個多功能的視頻播放器，開發人員需要將這個播放器部署到相應的環境中。然后設計人員提供視頻（動效文件）給開發人員，讓開發人員按照要求播放視頻文件，即可完成動效的應用。
假設該按鈕動效一共10幀，整個按鈕切換分為兩部分，第一部分：從菜單切換到關閉（1-10幀）；第二部分：從關閉切換到菜單（10-1）。我們可以讓開發通過以下控制方式，完成我們想要的效果。
按鈕動效默認顯示第1幀（菜單狀態），點擊按鈕以后開始播放動效，動效播放到第10幀的時候停止，并停在第10幀（關閉狀態）。當按鈕為關閉狀態（第10幀）時，點擊按鈕以后動效從第10幀倒放到第1幀（關閉狀態），并停在第1幀（菜單狀態）。
通過以上方式就完成了對一個動效按鈕的控制。而日常工作中我們可以靈活地運用多種控制方式。
首先動效的觸發，可以是一次交互事件，比如點擊、滑動；也可以是監聽到了廣播，比如網絡異常等。而觸發以后的動效控制也多種多樣，可以從開始播放到結束，也可以進行倒放；可以循環播放某一段動效；也可以從某一幀播放到另一幀，或者某一個時間點播放到另一個時間點；更多的控制方式需要大家在工作中慢慢挖掘。
Lottie雖然能夠滿足多種場景需要，但是并非支持所有的 AE 效果。設計制作時，需要考慮該效果是否支持。否則，會導致出錯或者所用效果無法生效。
上圖為 Lottie 支持的主要 AE 屬性，此處有刪減掉部分不常用的屬性。可以打開以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features
需要注意的是文檔中雖然說支持漸變，但是會出錯，所以大家在使用矢量圖形時，請勿使用漸變效果。關于漸變效果的修復后續文章會提到，官網以后也會修復相關問題，但是沒有確切時間。
通過上圖我們可以了解到，Lottie 支持的 AE 屬性基本包含以下幾類：
（原文章來源于：https://www.uisdc.com/lottie-dynamic-design-guide）