Lottie到底怎麼用
閱讀大約需要5分鐘
可能現在很多人都知道Lottie, 這方面的文章也很多了. 但是我感覺他們幾乎都是簡單介紹這個開源庫. 我這次就以設計師的角度,實戰出發來說明如何製作Lottie文件, 這個技術的限制和一些自己踩過的坑.（￣︶￣）↗ 藍色字或下劃線文字都有提供鏈接,部分可能需要科學上網哦預覽Lottie, Lottie介紹
Lottie的優勢
- 開發無需編寫動畫,只需載入
- Android, iOS, 和React Native多台支持
- Path,flat等風格動畫實現完美
- 可手動設置進度,綁定手勢,事件等
- 可網路載入,動態控制播放速度等
- 性能好,顯示效果完
- ...
Lottie的劣勢
- 能在AE中實現的效果非常有限
- 對AE使用要求高一點, 動畫更加依賴設計師
- 使用點陣圖後,資源消耗大
- ...
了解Lottie的應用範圍
首先我們得知道Lottie的邊界在哪裡,是否採用這個方案,製作的動畫能不能完美實現,那麼我們必須從文檔開始
1. 對Android和iOS的支持範圍(這和我們的產品要覆蓋的用戶群體息息相關)- Lottie支持API 16及以上版本(也就是Android版本至少得是4.1 Jelly Bean糖豆)
- Lottie支持iOS 8+
2. 了解支持的AE特性
這裡有一個表,羅列了所有的支持情況 點擊查看
簡單說一下
- 基本的形狀都支持.填充支持漸變,
- mask大部分混合效果不支持(少用mask,影響性能)
- Mattes用alpha matte就好(少用,影響性能)
- merge Path(合併路徑) 也盡量避免使用,應用Android只支持4.4以上,iOS都不支持.
- 圖層效果和效果等都幾乎不支持哦
- 文字最好在轉動畫前就轉為形狀(因為iOS不支持)
- 表達式不支持
- 預合成現在已經支持
- ...
從AE開始
這裡提供我已經做好的AE文件和導出的json文件(密碼可關注專欄然後私信我進行獲取)
百度網盤下載- 安裝必備的工具- After Effects(盡量選擇17以後的版本)- 原版Bodymovin(如何安裝插件網上已經很多,只是老版本AE和新版AE安裝方式有些區別,這個插件價格你自己定,填0就是免費!!!),這裡同時有個漢化版本的漢化版Bodymovin- 下載 Lottiefiles preview app(這個Android版本的app功能要更強大一些)
- 安裝bodymovin插件,插件下載地址已經在上面提到了,選擇哪個版本看你,我一般都選新的. 下載下來格式是後綴為.zxp的文件,這裡我們需要安裝一個Adobe官方的插件管理工具 ZXP Installer 進行安裝, 這個很簡單,但是不知道我安裝後無法識別到我電腦上的ae軟體.
這裡提供第二種安裝方式, 這是我在他們頁面FAQ中發現的方法,英文好的直接移步這裡如何安裝zxp格式的插件 Mac OS上安裝
1. 將.zxp文件重命名為.zip2. 解壓縮zip文件3. 在Finder(訪達)中 使用快捷鍵 ?+shift+G,輸入~/Library/Application Support/Adobe/CEP/extensions到達相應文件夾4. 將剛剛的解壓的文件移入這個文件夾
5. 打開終端, 輸入命令 defaults write com.adobe.CSXS.5 PlayerDebugMode 1 (這個命令安裝我們這個插件不需要輸入都可以)Windows上安裝1. 將.zxp文件重命名為.zip2. 解壓縮zip文件3. 將解壓文件夾拖入C:/Program Files(x86)/Common Files/Adobe/CEP/extensions/4. 在HKEY_CURRENT_USER/Software/Adobe/CSXS.5中創建一個註冊表項「PlayerDebugMode」，其字元串值為1（要創建和修改註冊表項，您可以在Windows菜單中搜索「regedit」程序）
3. 這個是我製作的一個AE動畫
可以看到我基本是用的AE的五大屬性(位置,縮放,旋轉,透明度,錨點)以及修剪路徑,和路徑做的動畫,因為我看了Lottie的文檔知道這樣去做最為安全
4. 表達式轉為關鍵幀
剛剛截圖也發現,我有用表達式. Lottie本身不支持表達式的. 但是一些微動效果(比如抖動這類),我們用表達式做出來更方便,效果更好.這裡有個插件能將表達式烘焙轉為關鍵幀,那麼也就解決我們的問題了
下載表達式烘焙插件 Easy Bak
將下載文件夾中的Easy Bake.jsxbin文件移入/Applications/Adobe After Effects CC 2018/Scripts/ScriptUI Panels中,然後打開AE-首選項-常規-允許腳本寫入文件和訪問網路.這樣你的插件才可以正常工作.
安裝的插件會出現在紅色的位置
打開你的AE文件中的合成, 點擊Bake(其它不用調節), 完成可以看到,所以表達式都被關閉,替代他們的是排列緊密的關鍵幀.關鍵這個插件還可以Unbake,點擊就可還原表達式,屌不屌!!!
5. 導出Lottie需要的json文件
這裡我們的動畫部分都基本完成了, 整個動畫是圖標變換
這裡需要使用到第二個工具 bodymovin,這裡我用漢化版(前面有提到下載地址)來說明:
選擇要導出的合成,進入設置
這個漢化版已經說明了每個選項的作用了, 按照我之前聽過一個大佬說過,軟體如果有默認選項,那麼選默認總是沒錯的. 這裡我們之間選擇默認的第二個,其它只是特殊需求情況下需要改選的.
點擊渲染, 這裡我保存在桌面, 出現了一個後綴.json的文件
不要關閉軟體,我們先預覽看看,依舊使用這個插件,旁邊的 預覽按鈕
拖動下面的按鈕,查看真箇幀率下,顯示是否正常.
最好利用官網的預覽功能再次查看(因為涉及到平台,你得在iOS和Android下查看),打開Lottiefile 進行預覽
之後用你的手機,掃描右邊的二維碼進行預覽(商店搜索Lottie Preview,分別用Android和iOS進行測試),如果動畫有問題,繼續回去看看AE用了什麼不支持的屬性,然後調整輸出,重新導出,再次檢測.
到這裡,整個Lottie的動畫導出就結束了. 下面來點更進階的東西.
下期內容預告:
用Lottie配合Framer製作可交互原型
話說設計師,應該做到更完美. 那麼我們就針對當前的動畫來做一個可交互的引導頁原型; 這部分比較難了哦,需要有一定代碼基礎,因為我使用的動效原型工具是 framer, 因為他可實現最為接近原生的交互效果, 支持多台預覽, 我在試用了大量市面上的交互軟體後,決定使用它(然後就是AE和principle這三款,其餘一概不碰)
- 準備
- coffeescript基礎知識
- github基礎使用知識
- Framer軟體(越新越好,我使用的版本為V116)
- 動畫json文件
鑒於篇幅和時間詳細原型將在下一篇文章文章中展示出來, 請關注或者點贊給我更多動力!!
推薦閱讀：