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

承香墨影發表於2018-03-13
動畫

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() 方法接受一個相對的目錄路徑，閱讀它的文件就知道如何配置了。

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

接下來我們舉個例子來說明問題。

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

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

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

<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()
複製程式碼

這兩種方式都是等效的，最終會去載入我們的動畫資源。

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

在這個動畫中有三個圖片資源，非常的簡單，因為信封圖片為白色，所以我將底色調整成了藍色。

2.2 線上下載資源

最理想的方式是將圖片打包在 Apk 中一起釋出出去，但是對於一些需要經常變動動畫的需求，是無法接受每次釋出新版本來替換動畫資源的。

這個時候，我們可以選擇動態下發動畫資源，也就是在需要的時候，提前將動畫資源下載到本地的檔案系統中。

此時，我們再使用 setImageAssetsFolder() 方法就沒有效果了，因為本身圖片就已經不在 assets 目錄下。

繼續在原始碼中找答案，實際上 Lottie 載入的圖片資源，最終會指定到 ImageAssetsManager 的 bitmapForId() 方法，它的實現如下。

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

關鍵程式碼我已經用紅框標記出來了，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

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

  1. 需要先將圖片轉換成向量圖 SVG 格式，這個設計師一定有辦法。
  2. 使用 Illustrator 將 SVG 檔案另存為 .ai 檔案。
  3. 使用 .ai 檔案在 AE 中做動畫處理。
  4. 最後通過 Bodymovin 外掛，輸出動畫資源。

這樣，輸出的 JSON 裡面，其實就已經包含了圖片的資訊。同時，JSON 檔案的大小也會增大，你可以理解是把向量圖打包到了 JSON 檔案中，不過這也不完全對。整體來看體積還是非常小的，以現在的例子來說，只是從 3kb 增大到了 15kb。

所以這可以算是一個最優的解決方案，強烈推薦你試著說服設計師小姐姐。

三、設計師校驗

如果設計師願意為你製作沒有圖片資源的動畫 JSON，那設計師如何自己檢驗自己匯出的 JSON 檔案是否正確呢？

Lottiefiles 網站提供了一個 preview 的頁面，如果你的動畫只有一個 JSON 檔案，那直接拖拽進去就可以進行預覽。

https://www.lottiefiles.com/preview

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

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

需要注意的是，這種方式，只針對沒有圖片資源的動畫 JSON 才有效。如果是帶圖片資源的動畫，也只能開發自己使用程式實現的方式進行預覽！

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

今天在公眾號後臺回覆成長『成長』，將會得到我整理的一些學習資料，也能回覆『加群』，一起學習進步。

推薦閱讀：

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

相關文章