AE動效 | 這個「姑娘」不簡單：Lottie動畫淺談之一

4 人贊了文章

Lottie是一個Airbnb推出的開源動畫庫，也是個優雅的女名。

筆者接觸其約莫1年有餘。因為工作的關係，結合官方說明文檔我不斷總結出了數個要點，以及自己對動畫還原流程的一些思考，希望能對其他仍處在水深火熱中的設計師有一些幫助，也歡迎我們組成一個圈子，互通有無，共同進步。

縱使流暢，富有活力的動畫在App設計中越來越具有重要地位，App上的動畫以及特效設計歷來為設計師和開發所苦惱：設計對接方式的限制、機能限制下畫面的縮水、乃至不懂得程序邏輯的設計師們天真爛漫的想法，在接觸高冷的邏輯時那種無助感和焦灼感，想必難倒了一眾有情懷有理想的動畫設計者。

縱使16年以前出現過諸如Miroslaw Stanek在Twitter上實現的「心形」動畫（純代碼實現），Bartek Lipinski實現的漢堡菜單，但想必大部分開發人員都非常抵觸像設計師一樣用區塊元素調用GPU渲染去打磨動畫，而是要麼奉信功能至上的原則不予理睬，要麼會向設計師索要序列幀等成品。

因為好的動畫無法批量複製，它不像例如Picker選擇器、Time撥輪那類直接封裝進基本控制項的效果、這些動畫通常會受限於開發環境和邏輯結構而無法被複用。

設計師普遍的選擇一般都會是Gif，PNG序列幀，甚至是一段演示視頻來模擬動畫效果。更多的時候前文提到的機能限制，極大地影響了iOS和安卓兩大陣營低配置機型動畫的還原效果。

即使你有最新的操作系統加持，在設計師將動畫提交為序列幀圖片的時候，就註定需要減幀來實現。

就在這個時候，Lottie橫空出世了。

Lottie是一個Airbnb推出的開源動畫庫，通過一個安裝在AE里的插件導出Json文件，分發到PC，iOS和安卓平台，再進行解析編譯來還原動畫。

筆者從Lottie發布後不就便接觸了第一個試用版本，到現在實戰應用到App中經歷了數次跌宕，甚至有想放棄的時候；但作為一個具有開放心態公司出品的軟體，Lottie不論是流暢度，還原效果，還是兼容性都遠勝過所有動畫提交方法。

同時，這家公司開放的性格註定了這個技術也是是自上而下的變革：Github版塊和反饋郵箱，保證了它對接開發人員的即時性和交流的便利性，雖然沒有在Behance等設計類網站建立設計類社群，但我相信民間社團已經被建立。

你可以從Appstore找到起碼2種第三方輔助Lottie設計還原的App。

這就引出了另一個話題：為什麼這個看似完美的庫仍需要輔助呢？

筆者粗淺懂得一些HMTL的知識，在實現動畫後通過檢查Lottie輸出Demo的源碼，得知起碼在網頁端，Lottie是利用Path路徑來繪製動畫的基本形狀，然後通過描述這些點的坐標來讓線段產生變化。

這裡面有幾點幾本的原理：開發實現的圖形結構其實是一個個模塊，受限於顯示原理以及繪圖路徑自身的一些限制，是無法實現諸如複雜紋理，開闔路徑，交錯路徑和複雜漸變的。雖然通過描述數點以及線狀結構的貝塞爾曲線可以儘可能趨近線段的效果，但在不同端還原渲染出的效果又是不一樣的。

這裡我總結幾個注意事項：

1.所有AE動畫的元素一定是可編輯的Path路徑，不能使用諸如PNG切圖之類非矢量的元素。

2.如果用PS畫的路徑，切記倒入AI後再倒入AE，因為PS編輯的路徑其實是一種剪切蒙版，無法自由給定諸如修剪路徑，漸變等效果。

3.iOS端目前不支持漸變色，所有帶有漸變的效果可以用不透明度疊加去貼近；解決這點最好的方法是不同端的設計用不同效果，或者統一成純色的風格。

4.不要在圖層上添加效果器和複雜的表達式；同時包括影片剪輯上的時間拉抻，時間反向之類的操作也要避免，還原到iOS/安卓應用中會直接變成空元素。

另外需要特殊關注的一點是，修剪路徑在圓形上使用時，在即將連接上的閉合效果會產生一條直線；具體原理我還不太清楚，但後面會和開發一起探明這個問題。所以現在最好的做法就是，要麼在圓形路徑上再遮蓋一層，要麼直接用蒙版實現。

最後奉上Lottie官方的效果清單，作為大家自查和整理思路的工具，我們下一期再結合具體實戰案例分析一下Lottie在動畫中的應用，各位看官一定要持續關注我們哦~

附帶：自查清單

作者：魂oblige

東道設計學院UI專業教師

一個具有嬉皮情懷的動效設計師