UI設計獅做動圖使用Lottie是否是剛需

前言:本篇文章會分為四塊內容和大家分享

第一項:lottie的原理

第二項:lottie的安裝與運用

第三項:lottie的弊端

第四項:總結

第一項:lottie的原理

1.Airbnb開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發。而且它還具有占用內存少,加載流暢等特點,是個極其不錯的第三方庫。

具體的操作流程如圖


Lottie 操作流程

如上圖所示,設計獅使用ae,借用bodymovin插件,就可以把設計好的動圖導出為json格式給程序猿。

bodymovin插件本身是用于網頁上呈現各種AE效果的一個開源庫

lottie所做的事情就是實現在不同移動端平臺上呈現AE動畫的方式,從而達到動畫文件的一次繪制、一次轉換,隨處可用的效果。


Lottie 官方示范

2.Airbnb 還建立的Lottie動畫網站,里面有設計師制作的動效可供參考https://www.lottiefiles.com


Lottie動畫網站

第二項:lottie的安裝與運用

1、軟件準備(以蘋果系統為例)

AE下載:http://www.gfxcamp.com/after-effects-cc-2018/

Lottie 下載:https://github.com/airbnb/lottie-ios?下載之后選擇bodymovin安裝

2. 安裝插件

下載 After Effects 插件安裝器ZXP Installer(有 Windows 和 Mac 版本)

運行ZXP Installer,按照指示拖動bodymovin.zxp到其窗口,即可安裝完成

拖動安裝bodymovin.zxp.png

安裝成功后,如圖所示:

安裝成功

3.運用

打開AE,選擇首選項的常規,勾選允許腳本寫入和訪問網絡


首選項


勾選

重啟AE

制作動圖

導出時打開窗口擴展的bodymovin


導出bodymovin


導出文件設置


導出格式選擇

第三項:lottie的弊端

不同平臺Lottie支持AE的特性,可參考Supported After Effects Features · Lottie

在使用 After Effects 制作動畫時,建議先預覽上述網頁,以知道應該使用哪些特性制作動畫,因為若使用 Lottie 還不支持的特性,如3D圖層,則 Lottie 會無法正確渲染。

由于這些限制,目前可制作的動圖更多為路徑改變的動畫,比如加載動畫、提示動畫、刷新動畫等。

第四項:總結

在做設計的過程中,遇到簡單的動效,用Lottie可以快速實現,減少前端的工作量。但是也不用過度依賴Lottie,還有gif,vedio等多種方式實現,更多關于粒子特效的可以ae制作完成讓前端寫出來。所以方法多種多樣,適合自己的就好。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容