前言:本篇文章會分為四塊內容和大家分享
第一項:lottie的原理
第二項:lottie的安裝與運用
第三項:lottie的弊端
第四項:總結
第一項:lottie的原理
1.Airbnb開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發。而且它還具有占用內存少,加載流暢等特點,是個極其不錯的第三方庫。
具體的操作流程如圖
如上圖所示,設計獅使用ae,借用bodymovin插件,就可以把設計好的動圖導出為json格式給程序猿。
bodymovin插件本身是用于網頁上呈現各種AE效果的一個開源庫
lottie所做的事情就是實現在不同移動端平臺上呈現AE動畫的方式,從而達到動畫文件的一次繪制、一次轉換,隨處可用的效果。
2.Airbnb 還建立的Lottie動畫網站,里面有設計師制作的動效可供參考https://www.lottiefiles.com
第二項: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到其窗口,即可安裝完成
安裝成功后,如圖所示:
3.運用
打開AE,選擇首選項的常規,勾選允許腳本寫入和訪問網絡
重啟AE
制作動圖
導出時打開窗口擴展的bodymovin
第三項:lottie的弊端
不同平臺Lottie支持AE的特性,可參考Supported After Effects Features · Lottie
在使用 After Effects 制作動畫時,建議先預覽上述網頁,以知道應該使用哪些特性制作動畫,因為若使用 Lottie 還不支持的特性,如3D圖層,則 Lottie 會無法正確渲染。
由于這些限制,目前可制作的動圖更多為路徑改變的動畫,比如加載動畫、提示動畫、刷新動畫等。
第四項:總結
在做設計的過程中,遇到簡單的動效,用Lottie可以快速實現,減少前端的工作量。但是也不用過度依賴Lottie,還有gif,vedio等多種方式實現,更多關于粒子特效的可以ae制作完成讓前端寫出來。所以方法多種多樣,適合自己的就好。