用 Lottie 把設計師的動畫直接搬進 Android App——我的完整工作流

Lottie 是什麼——設計師與開發者的一座橋

Lottie 最初由 Airbnb 團隊在 2017 年開源，定位是「跨平台動畫播放引擎」。它的核心想法很簡單：設計師在 Adobe After Effects（AE）裡做好動畫，安裝一個叫 Bodymovin 的外掛後，按一下按鈕就能把合成匯出成一個輕量的 JSON 檔案；前端或 Android 開發者拿到這個 JSON，用 Lottie官網 提供的 SDK 直接載入，動畫就能在 App 中原樣播放。

這個想法之所以顛覆，是因為在此之前，設計師的 動畫 交付物通常是 MP4 錄屏或 GIF——開發者要麼把影片壓成 apng 塞進資源包（體積大、播放不流暢），要麼自己用代碼重寫一遍貝茲曲線和關鍵幀（幾乎不可能和設計師的 AE 預覽完全一致）。Lottie 把「設計 → 開發」之間的鴻溝縮成了一個 JSON 檔案的傳遞。

目前 Lottie 已經支援 Web、Android、iOS、React Native、Flutter 等主流平台，Android 端當前最新穩定版是 6.6.8，最低支援 API 16（Android 4.1），覆蓋超過 99% 的現役裝置。

安裝

Lottie 本質是一個 Android SDK，安裝方式是標準的 Gradle 依賴引入——不用從 Lottie下載 頁面拉 APK 或手動拷貝 jar，一行代碼搞定。

在專案的 app/build.gradle（或 build.gradle.kts）裡加入兩條依賴：核心庫必選，Jetpack Compose 支援可選，視你的專案是否採用 Compose 而定。引入後同步 Gradle 即可，Android Studio 會自動從 Maven Central 拉取對應版本。最低環境要求是 compileSdk 34+、Kotlin 1.7+、Java 11+，這在 2026 年幾乎是所有 Android 專案的標準配置，不會出現版本衝突。

如果你在專案裡開啟了 ProGuard 或 R8 混淆，SDK 已經自帶了 -dontwarn com.airbnb.lottie.** 規則，通常不需要手動添加；如果部署後發現動畫不渲染或部分圖層消失，再回頭檢查是不是混淆把內部類誤刪了。

JSON 檔案在專案裡推薦放在 assets/ 目錄——比 res/raw/ 更靈活，不受 Android Studio 對 raw 資源的大小限制（raw 目錄預設單檔不超 2KB）。網路動態載入也是另一種常見方式，適合需要遠端更新動畫而不發版的場景。

我的完整工作流——從 AE 時間軸到 App 畫面

說完安裝，真正有意思的部分是怎麼把設計師的產出串到你的 Android 專案裡。我每天的 動畫 需求來源大致兩種：要麼是產品經理丟來一個 LottieFiles 上的現成動畫連結，要麼是設計師自己在 AE 裡做的自定合成。兩種情況的處理流程有差異，但核心鏈條是一樣的。

舊流程的痛點

先說說我之前怎麼幹的——沒有 Lottie 的時候，設計師交付一個載入動畫或歡迎頁特效，我要麼讓她輸出 30fps 的 apng 當資源圖，要麼自己用 Android 原生的 AnimationDrawable 或 ValueAnimator 硬寫。前者的問題是資源包體積爆炸——一個 10 秒的複雜動畫 apng 經常要 2 到 5 MB，而且載入記憶體後容易觸發 OOM；後者更慘，設計師的 AE 合成裡可能有十幾個圖層、每層又有貝茲曲線補間，我重寫出來的效果永遠和她在 AE 預覽裡看到的不一樣——要麼色階錯了，要麼貝茲曲線的緩動函數對不上，來回調整要花好幾天。

新流程：三個人的接力棒

現在這條鏈條被我拆成三段，每一段有明確的輸入輸出，幾乎不需要中間的「翻譯」環節。

第一段是設計師在 AE 裡製作並用 Bodymovin 匯出。這一段我不碰，但我會提前跟設計師約好幾條規矩：圖層名全英文加下劃線（emoji 和全角符號會讓 Bodymovin 解析失敗）、不要用 3D 圖層或調節圖層（目前不支援）、所有表達式在匯出前要 Convert Expression to Keyframes——這條是最高頻的坑，AE 裡動效好好的，匯出後在預覽器裡動畫停在第一幀不動，90% 是表達式沒烘焙的問題。設計師匯出完 JSON 後，我讓她直接拖到 LottieFiles 線上預覽器驗一下，預覽器裡渲染正常才算交付。

第二段是我拿到 JSON 後放進專案 assets/。這步最快——下載（或從設計師的雲端盤拖下來）、命名、放到 app/src/main/assets/ 下，就完事了。如果是從 LottieFiles 拿的現成資源，我會先看它是 JSON 格式還是 dotLottie 格式——後者是 LottieFiles 推出的新格式，支援狀態機和 Motion Tokens，但 Android SDK 對 dotLottie 的完整支援在 6.x 之後才穩，老專案如果還在用 5.x 就先統一用 JSON。

第三段是在 Activity 或 Fragment 裡集成 LottieAnimationView。XML 裡直接加一個 com.airbnb.lottie.LottieAnimationView，指定 app:lottie_fileName="loading.json" 從 assets 載入，app:lottie_loop="true" 設置循環，app:lottie_autoPlay="true" 讓它自動播放。就這幾行 XML，不需要寫任何 Java 或 Kotlin 代碼。如果需要動態控制——比如根據使用者操作改動畫顏色、切換狀態——就用到 addValueCallback 和 LottieProperty 系統，可以在不重新載入 JSON 的情況下修改圖層顏色、文字、不透明度，運行時即時生效。

最容易斷鏈的兩個環節

這條流程跑了幾十次後，我發現最容易出問題的地方有兩個，值得專門記下來。

第一個是設計師匯出的 JSON 在 Android 端渲染失敗。我踩過一次坑：設計師在 AE 裡加了一組複雜的漸層，Bodymovin 匯出時悄悄把它變成了一個 1KB 不到的空殼 JSON——好在設計師按規矩先在預覽器驗過，拖進去一看就知道不對，回 AE 把漸層簡化成兩層纯色形狀圖層，重新匯出就正常了。我現在把「匯出 → 預覽器驗證」做成了強制門檻，沒有預覽器截圖的 JSON 不收。

第二個是RecyclerView 裡同時顯示多個 LottieAnimationView 導致的性能問題。Lottie 的每一幀都是在 Canvas 上重繪，如果一個 RecyclerView item 裡塞了一個 LottieAnimationView，滑動時會看到明顯卡頓。解法有兩種：要麼把動畫改成靜態圖，要麼在 item 離屏時手動呼叫 animationView.cancelAnimation() 暫停播放、進屏時再 resume。另外 addValueCallback 如果在每一幀的回調裡做了複雜計算也會影響性能，用完記得用 removeValueCallback 移除——這條細節在官方文件裡提過，但幾乎沒有人第一次就記住。

效果與邊界

用 Lottie 之後，一個從「設計師提需求」到「我在 App 裡看到動畫」的完整週期，從之前平均 3 天縮到了現在平均 4 小時——大部分時間其實是設計師在 AE 裡調效果，我這邊真正花的時間通常不超過 30 分鐘：拿到 JSON、放 assets、寫幾行 XML、跑一下確認渲染正常、提 PR。資源包體積也從之前每個動畫平均 2~5 MB 降到了現在的 50~200 KB。

但這條流程也不是什麼場景都划算。如果設計師要的是一個超過 30 秒的複雜動畫序列，或者動畫裡用到了大量點陣圖圖層，JSON 本身就會變大（超過 1MB 後載入時間會明顯變長），這時候用原生錄屏或影片播放器反而更合適。另外 dotLottie 格式的狀態機 API 雖然強大，但需要設計師也學習一點狀態機概念，對純視覺設計師來說門檻有點高——目前我團隊裡只有資深設計師在用 dotLottie，大部分還是停留在 JSON + 簡單的動畫播放。

整體來說，Lottie 解決的是「設計產出怎麼原樣搬到 App 裡」這個老問題，它沒有讓設計師的工作變簡單——設計師在 AE 裡該花多少心思還是花多少——但它徹底消掉了中間那個「開發者重新實現」的翻譯步驟。我現在的做法是把這條流程寫進了團隊的 wiki，設計師和開發者各看自己那一半，交接時只傳一個 JSON 檔案，再也不會出現「你 AE 裡看到的和我 App 裡跑出來的不一樣」這種扯皮場面了。

本文為個人基於網路公開資料整理編寫，非官方內容，僅供學習交流參考；軟體版權歸原作者所有，請支持正版；使用過程中遇到問題請查閱官方管道，本文不承擔任何責任。