動畫變成程式碼？Lottie 是什麼？用 Ae 製作 Lottie 動畫

Lottie 動畫是什麼？

Lottie 是什麼？

Lottie 是一個輕量級的動畫格式，能將動畫嵌入到網頁中，並保持動畫的可互動性和流暢性。不會大幅增加文件大小或減慢頁面加載速度，這讓 Lottie 成為 UI/UX 設計中常用的工具。

Lottie 動畫的優點

1. 輕量級：動畫文件大小通常非常小，它將 Ae 動畫轉換為 JSON 格式，比傳統的 GIF 或影片文件小很多，減少對網路載入的需求。
2. 高品質：使用向量圖形來渲染動畫，放大、縮小動畫都能保持清晰。
3. 可互動性：支持動畫與用戶的互動性。例如，當點擊某個按鈕時，動畫可以做出即時反應，增強應用的動態性。
4. 跨平台：可在多個平台上運行，包括網頁、iOS 和 Android ，實現一次製作，隨處使用的效果。

➡️ Lottie 官網 ⬅️

Lottie 動畫通常由 Adobe After Effects（Ae）設計，並通過外掛輸出為 JSON 格式。
以下將簡單說明用 Ae 製作 Lottie 動畫的步驟：

使用 After Effects 製作 Lottie 動畫的步驟

步驟 1：製作動畫

在 After Effects 製作好動畫，注意：需簡化動畫設計。
Lottie 支持的 After Effects 功能有限，像 3D 圖層、表達式、效果等可能無法被完整導出。因此，在製作動畫時，保持設計簡單且清晰，避免過多複雜的效果。通常使用形狀圖層、簡單的遮罩、透明度變化和基本的位移動畫來達到預期效果。

➡️ 可參考：Lottie 支持的功能 ⬅️

步驟 2：安裝外掛LottieFiles 或 Bodymovin

可安裝免費外掛 LottieFiles 直接將檔案上傳至 LottieFiles _{(在官網便可以讓團隊成員異地查看)} 或用 Bodymovin 將製作好的 Ae 動畫轉換成 JSON 格式，再上傳至 LottieFiles。

步驟 3：測試 Lottie 動畫是否有無法轉換的效果

1. 測試動作和時間軸：檢查時間軸上的動畫動作是否流暢，並避免太複雜或重的動作，這樣能夠確保動畫在 Lottie 中運行時不會出現卡頓或跳幀。
2. 優化形狀圖層和顏色填充：Lottie 支援 Ae 中的形狀圖層，因此優先使用形狀圖層而非圖像。另外，顏色填充和漸變也是能夠順利轉換成 Lottie 格式的屬性。
3. 避免使用不支援的效果：像動態模糊、3D 圖層、某些表達式和 Ae 的內建效果，這些效果可能會轉換失敗。

步驟 4：預覽 Lottie 動畫

將動畫或 JSON 文件上傳到 LottieFiles，並檢查動畫在真實環境中的運行效果。

步驟 5：嵌入 Lottie 動畫到網頁或應用中

將 Lottie 動畫嵌入網頁：有兩種方式，一種是下載 Lottie JSON 檔案，一種是直接複製網址或 HTML 代碼將動畫加載到網頁。

問題

Lottie 是免費的嗎？

免費版的 Lottie 工作區最多只能儲存 10 個 Lottie 動畫，如需使用大量動畫，再考慮付費升級。另外，Lottie 官網上也有部分免費動畫可以使用喔！

使用 After Effects 製作 Lottie 動畫是將高質量動畫引入網頁和應用的一個有效方式。通過合理的設計、簡化的圖層結構，可以創建既美觀又性能優化的動畫。

想看到更多相關文章，可以按個追蹤💡就不會錯過喔！
喜歡這篇文章，可以點❤️、分享⤴️、收藏📂。
也可以到我的 Instagram 看我的其他作品喔！

合作請

私訊 Instagram

或寄信至 x.fei.4044@gmail.com