Lottie 動畫預覽
動畫 JSON · 即時播放 · 本地渲染
Lottie 預覽
就緒
ABOUT
關於 Lottie 動畫預覽
匯入 Lottie 動畫 JSON 檔案，在瀏覽器中實時預覽動畫，無需 After Effects 或外掛。
Lottie 讓動效從 After Effects 無縫進入 Web 與移動端，但 JSON 檔案無法「用眼看」效果。本地預覽讓你在整合 lottie-web 之前就能驗收資源，減少返工。
DEEP DIVE
深入瞭解 Lottie 動畫預覽
Lottie 是 Airbnb 開源的動畫格式，用 JSON 描述向量動畫，廣泛用於移動端與 Web。但 Lottie JSON 檔案無法直接在程式碼編輯器中預覽效果，通常需要 After Effects + Bodymovin 外掛或 LottieFiles 線上預覽。JSONSort 在瀏覽器本地渲染 Lottie，貼上 JSON 即播放。
適合前端驗收動效資源、排查 Lottie JSON 是否損壞、快速檢視 animation 的 frame rate 與 layer 結構等。
Lottie JSON 由 Bodymovin 匯出，包含 layers、shapes、keyframes 等複雜結構。預覽器使用 lottie-web 渲染，與生產環境行為高度一致；若預覽失敗，問題多半在匯出設定或 JSON 損壞而非整合程式碼。
FEATURES
核心能力
即時播放
貼上 Lottie JSON 後自動載入並迴圈播放動畫。
檔案匯入
支援 .json 與 .lottie 檔案拖拽匯入。
本地渲染
動畫 JSON 不上傳，設計稿動效可保密預覽。
錯誤提示
JSON 不符合 Lottie schema 時給出載入失敗提示。
與格式化聯動
可先驗證 JSON 語法，再切換 Lottie 預覽。
零外掛
無需安裝 AE 或 Lottie 桌面客戶端。
.lottie 壓縮包
支援 dotLottie 格式自動解壓渲染。
迴圈播放
自動 loop 便於檢查首尾幀是否銜接。
HOW TO USE
使用步驟
-
1
貼上 Lottie JSON 或上傳 .json/.lottie 檔案
-
2
自動播放動畫預覽
-
3
調整並匯出
-
4
輸入變更後檢視自動重新整理，可反覆調整 JSON 觀察結構
-
5
截圖或複製 JSON 片段用於文件與評審材料
WORKFLOW
典型工作流
從匯入資料到匯出結果的完整流程，幫助團隊統一 Lottie 動畫預覽 的使用方式。
獲取 Lottie JSON
從 Figma/AE Bodymovin 外掛或 LottieFiles 下載。
匯入預覽
拖拽 .json / .lottie 或貼上 JSON 文字。
驗收動效
檢查迴圈、尺寸、顏色是否與設計稿一致。
整合開發
確認無誤後複製 JSON 到專案 assets 目錄。
USE CASES
適用場景
前端開發
驗收設計師提供的 Lottie 資源是否正常播放。
移動端開發
預覽 JSON 動畫資源，確認 frame 與尺寸參數。
動效設計
匯出後快速驗證 Bodymovin JSON 是否完整。
QA
迴歸測試 Lottie 資源更新後的視覺效果。
設計交付
設計師匯出 JSON 後自查，再交給開發整合。
效能最佳化
預覽同時觀察 layer 數量，評估是否需簡化動效。
TIPS
使用技巧
- Lottie JSON 通常較大，拖拽匯入比貼上更穩定。
- 載入失敗時先用格式化工具檢查 JSON 語法是否正確。
- 預覽區可觀察動畫迴圈是否 seamless，有無明顯跳幀。
- 與 JSON 腦圖配合：腦圖看 layer 結構，預覽看實際效果。
- dotLottie (.lottie) 是壓縮格式，工具會自動解壓渲染。
- 預覽確認無誤後再整合到 lottie-web / lottie-react 專案。
- 預覽卡頓可能是 layer 過多，請設計側簡化或合併 shape。
- 圖片資源外鏈失敗時檢查 CORS 或改用內嵌 base64。
- 與格式化工具配合：先驗證 JSON 語法再切換 Lottie 模式。
- 整合前確認 frameRate 與專案 CSS animation 無衝突。
LOCAL VS ONLINE
本地 vs 線上工具
JSONSort 堅持純前端架構，以下對比說明為何本地化工具更適合處理開發資料。
TROUBLESHOOTING
常見誤區與排查
實際使用中容易遇到的問題及建議處理方式，減少反覆試錯的時間。
載入失敗
建議：JSON 語法錯誤或 Lottie 版本不相容；重新匯出 Bodymovin。
圖片不顯示
建議：外部 URL 被 CORS 攔截；改用 embedded asset。
動畫太快/太慢
建議：檢查 JSON 內 fr (frame rate) 與 op/ip 幀範圍。
預覽空白無報錯
建議：可能是空 composition；確認 AE 匯出前有時間軸內容。
FAQ
常見問題
支援哪些 Lottie 版本？
支援主流 Bodymovin 匯出的 JSON 格式。極新特性可能需更新 renderer。
動畫能暫停/Seek 嗎？
當前自動迴圈播放。後續可擴充播放控制。
圖片資源內嵌的 Lottie 能播嗎？
支援內嵌 base64 圖片的 Lottie。外部 URL 引用可能受 CORS 限制。
預覽與真機效果一致嗎？
lottie-web 與 iOS/Android 原生 Lottie 高度一致，極端表示式可能略有差異。
檔案超過 1MB 怎麼辦？
可正常嘗試；過大檔案建議 dotLottie 壓縮或拆分動畫。
資料會上傳到伺服器嗎？
不會。JSONSort 所有工具均在瀏覽器本地執行，您的輸入內容不會傳送到任何後端伺服器。
需要註冊或安裝嗎？
不需要。開啟頁面即可使用，無需賬號、無需下載客戶端，也支援 PWA 離線快取。
支援多大的檔案？
取決於瀏覽器記憶體，通常可流暢處理數 MB 級別的資料。超大檔案建議先拆分或使用合併清理工具。