一、Lottie 的動畫資源分類
1.1 Lottie 資源的不同
Lottie 是 Airbnb 開源的一套跨平台的完整的動畫效果解決方案，真正的做到了在客戶端 100% 還原設計師的動畫效果。設計師只需要使用 After Effectes（AE）設計出動畫，再使用 BodyMovin 插件將動畫導出成 JSON 文件，就可以在 iOS、Android 和 RN 上 100% 還原動畫效果。
Lottie 這種工作方式，是對不同的角色進行解耦，帶來了更簡潔的工作流。開發小哥哥不再擔心動畫實現困難，設計師小姐姐也不需要擔心實現的效果會有偏差。
再說回到本文的主題，動畫預覽的問題。
設計師交付給我們的動畫資源。都是靜態的。雖然通常會有配套的動畫播放視頻。但是我們依然想在手機上真實的看看動畫播放的效果，才能放心的投入編碼的過程中。
如果你對 Lottie 有了解（不了解也沒關系，文末有幾篇介紹 Lottie 的文章，可供查閱），你就會知道，設計師交付的動畫通常有兩種：
-
單獨的 JSON 文件。
-
JSON + 圖片資源。
對於單獨的 JSON 動畫文件，官網上有一個 h5-preview （https://www.lottiefiles.com/preview）的網站，將 JSON 文件拖拽進去就可以實現預覽。同時在預覽頁面底部，會生成一個二維碼，通過手機 App Lottie 中的掃碼功能，就可以實現在手機端預覽了。
而對於第二種動畫資源，JSON + 圖片文件的預覽，就沒這么方便了。無論是 Preview 頁面還是 Lottie App，都無法直接預覽 JSON + 圖片這種動畫效果。
1.2 為什么會有不同的格式
有人很奇怪，為什么 AE 做出的動畫，導出的動畫資源會有所不同。
其實這取決於 AE 動畫的制作過程。如果動畫操作的圖片資源都是矢量圖格式的，最終導出的動畫就是一個單獨的 JSON 文件，它會將矢量圖硬編碼到 JSON 文件中。
相反，如果 AE 動畫操作的資源是一張張的圖片，則在導出的 Lottie 動畫資源中，就會包含一個 images 文件夾，其中就包含了 Lottie 動畫所需要的圖片文件。
就是這么一點區別，就導致了導出的動畫資源不同。
如果有必要，我們可以倒推設計師小姐姐，將動畫中所用到的圖片都矢量化，最終只導出一個 JSON 文件供我們使用。但是如果這樣操作，后續動畫資源的替換就不夠靈活。
例如上圖這種動畫，其實包含了三張圖片資源，分別是信封、黃色的箭頭、收信的文件夾。
如果后續的產品需求，說要在信封圖片上加一個紅心，很正常的需求對吧？此時若是使用的圖片資源，設計師只需要再給出一張帶紅心的信封圖片，開發替換一下圖片資源就好了，大家都很方便簡單。
你看，換一個動畫效果可能就是換一個操作的圖片資源就好了。本地資源當然隨便換了，換 JSON 和換圖片，對開發來說工作量是一樣的。但是換個思路呢？動畫中的圖片，來自線上的資源，是根據場景動態設置的。除了窮舉讓設計師出很多套不同的 Lottie 資源，然后按需顯示之外，使用帶圖片的 Lottie 動畫，就顯得非常簡單了。
二、lottie動畫預覽
說完了為什么會存在帶圖片的 Lottie 動畫，以及它的使用場景，如何在着手編碼前，就預覽設計師小姐姐交付的動畫效果呢？
2.1 單獨的json文件
單獨的 Lottie-JSON 文件，預覽非常的簡單，官方提供的 proview 網頁和 Lottie App 都提供了預覽的方式。
2.2 JSON + 圖片資源
其實到這里還是需要借助 Lottie App，在新版本的 Lottie App 的 Preview Tab 頁面下，有個 “Enter a URL to a json or zip file”，選它就對了。
它接受的是一個 URL，並且支持導入 zip 文件，這里只需要傳入一個 JSON + 圖片 的 zip 包的 URL，就可以了。
壓縮文件的結構如下：
我們可以在本機上，使用 Python 搭建一個最簡單的 HTTP 服務器。在本地動畫 ZIP 包文件的文件夾下，執行下面的命令。
python -m SimpleHttpServer 8099
該命令會在本機上搭建一個 HTTP 服務器，監聽 8099 端口，了解更多可以參考這篇文字☞《一行 Python 命令的 HTTP 服務器》。
最開始我以為可以使用 Android 自己的文件系統路徑來充當 URL，后來發現不行，必須是一個服務器上的 zip 包，才可以通過 Lottie App 進行預覽。
參考
設計師小姐姐給的 Lottie 動畫中“帶圖片”，如何預覽？