.svg)
將多個圖像 (JPG/PNG) 合併為 JSON 格式的 Lottie 動畫
如何使用
- 選擇您想要組合成 Lottie 動畫的所有圖像
- 選擇您希望圖像的排序方式
- 點擊“Convert”
- 單擊“Download File”以下載您的 Lottie JSON 文件。
- 在您最喜歡的 Lottie 文件查看器上預覽文件。我們推薦 Lottie viewer by Drawer。
什麼是 Lottie
Lottie是一種高效的、基於JSON的動畫格式，使設計師能夠為應用程序和網站創建動態動畫。這些小而強大的文件足夠輕巧，可以在任何運行HTML5的平台上使用，使它們同樣適用於網絡和移動應用程序。
Lottie 動畫的優點
Lottie動畫為開發者提供了輕鬆創建互動性的機會。基於矢量和輕量級，這些動畫序列提供了超越典型GIF的分辨率獨立性：它們不僅在視覺上令人驚嘆，而且還能與用戶的操作（如滾動或鼠標定位）進行互動。簡而言之，Lottie提供了一個獨特的參與水平，而沒有任何質量或性能上的損失!
如何將 jpg/png 照片轉換成為 Lottie
原本，你須使用Photoshop以.psd文件的形式把所有圖像做成一個圖像序列，然後再導入After Effects，再通過Bodymovin插件將其導出為Lottie JSON文件。然而，有了我們這一工具，這約五分鐘的工序就會減少至約六十秒，厲害吧！
相關鏈接
Video to Lottie - mp4/mov/webm 到 Lottie 轉換器。 這個工具非常接近我們團隊想要的效果
Airbnb Lottie Docs - 更多關於 Lottie 的歷史/背景
LottieFiles - Lottie 文件和相關工具的平台。 你可以在這裡找到很多社群製作的 Lottie 動畫。
Preview Lottie Animation Live - Drawer 的在線 Lottie 查看器
Lottieflow - Finsweet 的一個以 UI 為中心的 Lottie 動畫庫
Angus Yip
Web designer @ MSHK
Ex Silicon Valley full-stack developer. Web designer, SEO expert, and co-founder of Media Studio Hong Kong.
.webp)
.webp)