Lottie 動畫是什麼？
Lottie 是什麼？
Lottie 是一個輕量級的動畫格式，能將動畫嵌入到網頁中，並保持動畫的可互動性和流暢性。不會大幅增加文件大小或減慢頁面加載速度，這讓 Lottie 成為 UI/UX 設計中常用的工具。Lottie 動畫的優點
- 輕量級：動畫文件大小通常非常小，它將 Ae 動畫轉換為 JSON 格式，比傳統的 GIF 或影片文件小很多，減少對網路載入的需求。
- 高品質：使用向量圖形來渲染動畫，放大、縮小動畫都能保持清晰。
- 可互動性：支持動畫與用戶的互動性。例如，當點擊某個按鈕時，動畫可以做出即時反應，增強應用的動態性。
- 跨平台：可在多個平台上運行，包括網頁、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 動畫是否有無法轉換的效果
- 測試動作和時間軸：檢查時間軸上的動畫動作是否流暢，並避免太複雜或重的動作，這樣能夠確保動畫在 Lottie 中運行時不會出現卡頓或跳幀。
- 優化形狀圖層和顏色填充：Lottie 支援 Ae 中的形狀圖層，因此優先使用形狀圖層而非圖像。另外，顏色填充和漸變也是能夠順利轉換成 Lottie 格式的屬性。
- 避免使用不支援的效果：像動態模糊、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
