Lottie 動畫裏有圖片怎麽辦？設計師小姐姐也能幫你減少開發量！
一、序
Hi，大家好，我是承香墨影！
Lottie 是 Airbnb 開源的一套跨平臺的完整解決方案，設計師只需要使用 After Effectes （之後簡稱 AE）設計出動畫之後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就可以直接運用在 iOS、Android 和 React Native之上，無需關心中間的實現細節。
這樣，對於不同的工作角色來說，Lottie 帶來的都是更簡潔的工作流。開發小哥哥不再擔心動畫實現困難，設計師小姐姐也不需要擔心實現的效果會有偏差。
關於 Lottie 的基本使用，之前也寫過一篇文章，不了解的同學可以先看看《聊聊 Airbnb 的 Lottie》。
不過當時的文章有些細節沒有講明白，那就是有時候設計師實現的的動畫，其實也是在操作一些圖片資源的變換，這樣使用 Bodymovin 在 AE 上導出的時候，會同時導出一些圖片資源。
那麽，如何使用 Lottie 加載一個帶圖片的動畫資源，就是我們今天需要討論的主題。
二、需要圖片資源的動畫
今天主要討論帶圖片資源的 Lottie 動畫。
Lottie 提供的動畫資源，其實是可以從很多途徑進行加載的，例如你可以放在本地的 assets 目錄下，或者放在線上動態下載。
下面我們就分情況來講解如何加載一個有圖片資源的 Lottie 動畫，並且最後來說說如何讓設計師把圖片資源整合到 Lottie 的 JSON 文件中。
2.1 包內資源
有一些不經常變動的動畫資源，我們會選擇打包在 Apk 中，一般會放在 assets 目錄下。
這其實是一種最簡單的方式，Lottie 提供了一個 setImageAssetsFolder() 以及 app:imageAssetsFolder 屬性，來為我們設置一個 Lottie 動畫需要的圖片資源在 assets 下的路徑。
setImageAssetsFolder() 方法接受一個相對的目錄路徑，閱讀它的文檔就知道如何配置了。
接下來我們舉個例子來說明問題。
例如，我在 assets 目錄下存放了我需要的動畫資源，它的目錄結構如下。
這個時候，我在布局中寫：
<com.airbnb.lottie.LottieAnimationView 或者在代碼裏寫（kotlin 示意）：
lottieView.imageAssetsFolder = "images/"
lottieView.setAnimation("xinfeng.json")
lottieView.loop(true)
lottieView.playAnimation()這兩種方式都是等效的，最終會去加載我們的動畫資源。
在這個動畫中有三個圖片資源，非常的簡單，因為信封圖片為白色，所以我將底色調整成了藍色。
2.2 線上下載資源
最理想的方式是將圖片打包在 Apk 中一起發布出去，但是對於一些需要經常變動動畫的需求，是無法接受每次發布新版本來替換動畫資源的。
這個時候，我們可以選擇動態下發動畫資源，也就是在需要的時候，提前將動畫資源下載到本地的文件系統中。
此時，我們再使用 setImageAssetsFolder() 方法就沒有效果了，因為本身圖片就已經不在 assets 目錄下。
繼續在源碼中找答案，實際上 Lottie 加載的圖片資源，最終會指定到 ImageAssetsManager 的 bitmapForId() 方法，它的實現如下。
關鍵代碼我已經用紅框標記出來了，bitmapForId() 接收一個 String 類型的 id，它其實就是我們動畫資源中，圖片資源的名稱。而 Lottie 允許我們在加載 assets 目錄資源之前，設置一個代理，通過代理的 fetchBitmap() 方法，來提前加載一個圖片資源，供 Lottie 動畫使用。這裏的圖片加載代理，可以使用 setImageAssetDelegate() 方法進行設置。
接下來的步驟就簡單了，我們從本地的文件系統中，加載一個動畫文件的輸入流，然後使用 setImageAssetsDelegate() 方法設置一個代理即可。
val fileInputStream = FileInputStream(File("/sdcard/xinfeng.json"))
LottieComposition.Factory.fromInputStream(this,fileInputStream,{ composition ->
lottieView.setComposition(composition!!)
lottieView.setImageAssetDelegate { asset ->
BitmapFactory.decodeStream(assets.open(asset.dirName + asset.fileName))
}
lottieView.loop(true)
lottieView.playAnimation()
})動畫效果和之前一樣，就不再過多展示了。
這種方式其實也有點復雜了，因為需要經歷一個文件下載，接下來讓我們看看一個對開發來說，最簡單的方案。
2.3 將圖片資源放入 JSON
到這裏，我想說，其實 Lottie 動畫所需要的圖片資源也是可以集成在動畫的 JSON 文件中。
如果你能說服設計師，將圖片資源整合到動畫的 JSON 文件中，那你的工作量就可以節約很多。
接下來我們就來看看如何將圖片資源打包到動畫的 JSON 文件中。
其實官方文檔中，已經給出了非常健全的文檔，建議直接把文檔發給設計師小姐姐，讓她自己體會，開發人員其實也不需要太關心其中的細節。
http://airbnb.io/lottie/after-effects/artwork-to-lottie-walkthrough.html
為了讓你能更好的和設計師小姐姐溝通，簡單說一下步驟：
- 需要先將圖片轉換成矢量圖 SVG 格式，這個設計師一定有辦法。
- 使用 Illustrator 將 SVG 文件另存為 .ai 文件。
- 使用 .ai 文件在 AE 中做動畫處理。
- 最後通過 Bodymovin 插件，輸出動畫資源。
這樣，輸出的 JSON 裏面，其實就已經包含了圖片的信息。同時，JSON 文件的大小也會增大，你可以理解是把矢量圖打包到了 JSON 文件中，不過這也不完全對。整體來看體積還是非常小的，以現在的例子來說，只是從 3kb 增大到了 15kb。
所以這可以算是一個最優的解決方案，強烈推薦你試著說服設計師小姐姐。
三、設計師校驗
如果設計師願意為你制作沒有圖片資源的動畫 JSON，那設計師如何自己檢驗自己導出的 JSON 文件是否正確呢？
Lottiefiles 網站提供了一個 preview 的頁面，如果你的動畫只有一個 JSON 文件，那直接拖拽進去就可以進行預覽。
https://www.lottiefiles.com/preview
在 Preview 頁面可以直接預覽，並且右下角還會有一個二維碼，可以只用 Lottie 的 Demo App 掃碼在手機上預覽。
需要註意的是，這種方式，只針對沒有圖片資源的動畫 JSON 才有效。如果是帶圖片資源的動畫，也只能開發自己使用程序實現的方式進行預覽！
好了，再遇上 Lottie 動畫有圖片的時候，知道怎麽和設計師溝通了嗎？有其他問題歡迎在留言區留言！
今天在公眾號後臺回復成長『成長』，將會得到我整理的一些學習資料，也能回復『加群』，一起學習進步。
推薦閱讀：
- 漫畫：程序員，你能“管理”好你的產品經理嗎？
- 官方新出的 Kotlin 擴展庫 KTX
- 不懂批判性思維，可能正在限制你的程序員生涯
- Android 開發，遇上 Emoji 頭疼嗎？
- Andorid 簽名和多渠道打包方案 | VasDolly
Lottie 動畫裏有圖片怎麽辦？設計師小姐姐也能幫你減少開發量！