製作Lottie動畫，讓網頁透過動畫設計更加生動

從過去數十年來，我們一直在使用JPEG、GIF和PNG等Web圖形格式。儘管這些格式為我們提供了動畫和靜態圖像的支援，但它們的品質經常無法達到我們的預期。不過，現在有了Lottie，這是一個開源的、高效的解決方案，它可以讓我們輕鬆實現各種複雜的動畫效果。
因此...

1. 如果你是一位設計師：
   你可以完全專注於創建動畫，無需擔心複雜的技術細節。透過簡單的轉換，你可以將你的創意完美呈現出來。
2. 如果你是一位工程師：
   實現流暢的動畫可能需要大量的程式編碼，但現在使用Lottie後，一切變得更加輕鬆，同時也不會增加太多檔案大小。
3. 如果你是產品經理：
   你的產品現在具有更好的用戶體驗，用戶滿意度更高，同時無需擔心開發進度不足的問題。Lottie為你提供了一個有效的解決方案，讓你的產品更具吸引力。

一、什麼是lottiefiles? 為什麼要使用?

LottieFiles官方網站

Lottie是一個以JSON為基礎的開源動畫技術，而JSON是一個基於Java Script的語言，用來表示JavaScript 物件的格式，不論是文字、內容、程式、動畫都能夠透過JSON的技術，在不同平台上正常運行程式，而且快速有效率。
Lottie 是一個由 Airbnb 推出的函式庫，可應用於各種作業系統，包括 iOS、Android、網頁，甚至 MacOS 和 Windows。

二、Lottie動畫與GIF的比較

GIF有技術限制，對複雜圖像不適合

最初，GIF是在有限的技術條件下創建的，僅支援256種顏色。這使得它在呈現圖像時無法處理複雜的色彩和細節。

此外，由於GIF使用的壓縮技術，當圖像被縮放時，通常會失去品質，呈現模糊或像素化的現象。

Lottie支援高品質動畫，檔案更小，有利於網頁SEO

Lottie的優勢在於向量動畫的效果，因此在Lottie的官網可以看到大多數的Lottie都是以向量為主的作品，並且，使用 Lottie 相較於 GIF ，不僅檔案大小小了 600%，而且傳輸速度也提高了 10 倍。實現更複雜、高質量的動畫效果，檔案更小，有助於提高網頁性能和SEO。

Lottie動畫可後續調整，GIF無法編輯

Lottie 動畫文件是可定制的。您可以輕鬆地調整動畫的速度、變更背景顏色，甚至在每一層中編輯顏色。

即使在完成並導出 Lottie 動畫至 JSON 文件之後，您仍然能夠輕鬆進行這些修改。

相比之下，使用 GIF 創建的動畫一旦完成，就無法返回對其進行編輯。

這正是 Lottie 的一大優勢。

三、網頁動畫設計新未來：Lottie檔案更小讀取更快

無論是在Android、iOS、Web、React Native等平台都可以輕鬆使用。不同於GIF、PNG和JPEG等格式，Lottie的檔案體積更小，有利於提高網頁性能。
此外，Lottie動畫具有高度可編輯性，您可以輕鬆調整背景顏色、圖層顏色、運動速度等。它能夠混合 vector 和 raster 元素，實現高品質的動畫效果。
您可以在LottieFiles和Iconscout上找到免費的Lottie動畫，也可以使用Adobe After Effects創建自己的動畫，再導出使用Bodymovin和/或LottieFiles插件。
無論是在哪個平台上運行都能保持高品質，節省開發時間。
檔案大小會對網頁的性能和使用者體驗產生影響。較大的檔案需要更長的時間來下載，這可能會導致網頁載入速度變慢，從而降低使用者的滿意度。
Lottie相對於GIF圖像大小不僅提高了網頁性能，還有助於提高SEO排名。因此，檔案大小的優化策略是非常重要的。

成功案例：大井泵浦ESG

成功案例：欣榮材料

成功案例：國際特赦組織台灣分會

成功案例：魔競娛樂

成功案例：嗜時候

四、可以在 Lottie 中使用的特效和功能

Lottie 主要功能是允許設計師使用 Adobe After Effects 製作動畫，然後將這些動畫以 JSON 檔案的形式匯出。
對於開發人員來說，只需輕鬆地將這些 JSON 檔案嵌入到他們的程式碼中，就能輕鬆實現網頁動畫設計。
雖然 Lottie 具有眾多優點，但確實存在一些限制，主要是在於無法使用過於複雜的特效和功能。目前已知可以在 Lottie 中使用的特效和功能包括：

1. Pre-compostion（預合成）
2. Keyframe Interpolation（影格補差值）
3. Solids（色塊）
4. Masks（遮色片）
5. Track Mattes（追蹤）
6. Parenting（父子關係)
7. Shape Layers/Stroke (圖形/線條）
8. Trim Paths（修改路徑）