Images to Lottie - Convert PNG/JPGs to Lottie Animations Online

Merge PNG or JPG image sequences to Lottie JSON

How to use

1. Select all images you would want to combine into a Lottie animation
2. Select how you want the images to be ordered
3. Click "Convert"
4. Click on "Download File" to download your Lottie JSON file.
5. Preview the file on your favorite Lottie file viewer. We recommend this Lottie viewer by Drawer.

What are Lottie animations

Lottie is a JSON-based animation file format that enables designers to create animations for apps and websites. Lottie animations are small, lightweight files that can be used on any platform that supports HTML5, making them ideal for use in both web and mobile environments.

Advantages of Lottie animations

Lottie animations allow developers to easily create interactivity. They are usually vector-based, which means they are resolution-independent and are lightweight. However, while invalidating the latter two benefits, Lottie also supports creating image sequences like a gif. Unlike gifs, Lottie image sequences can still be made to interact with user actions such as scroll and mouse positions.

How we used to create Lotties using a series of images

The normal way to do it is to use Photoshop to create a Photoshop sequence (.psd), and then import it to After Effects, then export it with the Bodymovin plugin to create a Lottie JSON file.

With this tool, we reduced 5 minutes of work to a minute, which is not a huge reduction, but are you even a programmer if you haven't spent 20 hours automating a 5-minute process?

Useful Links

Video to Lottie - A local mp4/mov/webm to Lottie converter. This project is so close to what our team wanted!

Airbnb Lottie Docs - More history/context about Lottie

LottieFiles - A platform for Lottie files and related tools. You can find a lot of community-made Lottie animations here.

Preview Lottie Animation Live - An online Lottie viewer by Drawer

Lottieflow - A UI-focused Lottie animation library by Finsweet

將多個圖像 (JPG/PNG) 合併為 JSON 格式的 Lottie 動畫

如何使用

1. 選擇您想要組合成 Lottie 動畫的所有圖像
2. 選擇您希望圖像的排序方式
3. 點擊“Convert”
4. 單擊“Download File”以下載您的 Lottie JSON 文件。
5. 在您最喜歡的 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 動畫庫