Lottie 動畫裏有圖片怎麼辦？設計師小姐姐也能幫你減小開發量！

1、序

Hi，你們好，我是承香墨影！

Lottie 是 Airbnb 開源的一套跨平臺的完整解決方案，設計師只須要使用 After Effectes （以後簡稱 AE）設計出動畫以後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就能夠直接運用在 iOS、Android 和 React Native之上，無需關心中間的實現細節。

這樣，對於不一樣的工做角色來講，Lottie 帶來的都是更簡潔的工做流。開發小哥哥再也不擔憂動畫實現困難，設計師小姐姐也不須要擔憂實現的效果會有誤差。

關於 Lottie 的基本使用，以前也寫過一篇文章，不瞭解的同窗能夠先看看《聊聊 Airbnb 的 Lottie》。

不過當時的文章有些細節沒有講明白，那就是有時候設計師實現的的動畫，其實也是在操做一些圖片資源的變換，這樣使用 Bodymovin 在 AE 上導出的時候，會同時導出一些圖片資源。

那麼，如何使用 Lottie 加載一個帶圖片的動畫資源，就是咱們今天須要討論的主題。

2、須要圖片資源的動畫

今天主要討論帶圖片資源的 Lottie 動畫。

Lottie 提供的動畫資源，實際上是能夠從不少途徑進行加載的，例如你能夠放在本地的 assets 目錄下，或者放在線上動態下載。

下面咱們就分狀況來說解如何加載一個有圖片資源的 Lottie 動畫，而且最後來講說如何讓設計師把圖片資源整合到 Lottie 的 JSON 文件中。

2.1 包內資源

有一些不常常變更的動畫資源，咱們會選擇打包在 Apk 中，通常會放在 assets 目錄下。

這實際上是一種最簡單的方式，Lottie 提供了一個 setImageAssetsFolder() 以及 app:imageAssetsFolder 屬性，來爲咱們設置一個 Lottie 動畫須要的圖片資源在 assets 下的路徑。

setImageAssetsFolder() 方法接受一個相對的目錄路徑，閱讀它的文檔就知道如何配置了。

接下來咱們舉個例子來講明問題。

例如，我在 assets 目錄下存放了我須要的動畫資源，它的目錄結構以下。

這個時候，我在佈局中寫：

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:imageAssetsFolder="images/"
    app:lottie_autoPlay="false"
    app:lottie_fileName="question_like.json"
    app:lottie_loop="false" />

或者在代碼裏寫（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...

爲了讓你能更好的和設計師小姐姐溝通，簡單說一下步驟：

1. 須要先將圖片轉換成矢量圖 SVG 格式，這個設計師必定有辦法。
2. 使用 Illustrator 將 SVG 文件另存爲 .ai 文件。
3. 使用 .ai 文件在 AE 中作動畫處理。
4. 最後經過 Bodymovin 插件，輸出動畫資源。

這樣，輸出的 JSON 裏面，其實就已經包含了圖片的信息。同時，JSON 文件的大小也會增大，你能夠理解是把矢量圖打包到了 JSON 文件中，不過這也不徹底對。總體來看體積仍是很是小的，以如今的例子來講，只是從 3kb 增大到了 15kb。

因此這能夠算是一個最優的解決方案，強烈推薦你試着說服設計師小姐姐。

3、設計師校驗

若是設計師願意爲你製做沒有圖片資源的動畫 JSON，那設計師如何本身檢驗本身導出的 JSON 文件是否正確呢？

Lottiefiles 網站提供了一個 preview 的頁面，若是你的動畫只有一個 JSON 文件，那直接拖拽進去就能夠進行預覽。

https://www.lottiefiles.com/p...

在 Preview 頁面能夠直接預覽，而且右下角還會有一個二維碼，能夠只用 Lottie 的 Demo App 掃碼在手機上預覽。

須要注意的是，這種方式，只針對沒有圖片資源的動畫 JSON 纔有效。若是是帶圖片資源的動畫，也只能開發本身使用程序實現的方式進行預覽！

好了，再趕上 Lottie 動畫有圖片的時候，知道怎麼和設計師溝通了嗎？有其餘問題歡迎在留言區留言！

今天在公衆號後臺回覆成長『 成長』，將會獲得我整理的一些學習資料，也能回覆『 加羣』，一塊兒學習進步。

推薦閱讀：

• 漫畫：程序員，你能「管理」好你的產品經理嗎？
• 官方新出的 Kotlin 擴展庫 KTX
• 不懂批判性思惟，可能正在限制你的程序員生涯
• Android 開發，趕上 Emoji 頭疼嗎？
• Andorid 簽名和多渠道打包方案 | VasDolly