動畫加持，UI升級！檔案格式比較

嗨嗨～我是9Ana！今天想分享動畫格式小知識。本人是一名超愛在UI加動畫的設計師，小動畫能讓介面更吸引人！💖 ，像是錯誤提示時的哭哭表情包，應該是會讓人捨不得生氣吧?！😆 不過，選擇合適的動畫檔案格式可是關鍵哦！今天我來分享這些檔案類型吧！✨

1. GIF (Graphics Interchange Format)

兼容性是GIF很大的優點，不論是在網頁或APP都可以完美支援，但顏色限制跟透明度是很大的問題!之前在UI上用GIF會有很明顯的顏色差異😭。

優點：

• 廣泛兼容：幾乎所有瀏覽器和平台均能支援，這使得GIF成為最受歡迎的動畫格式之一。
• 文件小巧：相對較小的檔案大小，方便網頁快速加載。

缺點：

• 色彩限制：僅支援256種顏色，對於需要豐富色彩的動畫來說，可能無法滿足需求。
• 無法透明：不支援透明背景，可能影響到動畫在不同背景下的效果。

2. CSS/JS動畫

有些比較簡單的動畫可以用CSS去製作，也有很多套件，例如Animate.css，如果需要更厲害的動畫就需要超厲害的程式能力😆，可以去CodePen 有很多厲害的範例喔!

優點：

• 小檔案：檔案小，非常適合需要快速加載的網頁。
• 可定制性強：可以通過CSS或JavaScript創造複雜的動畫效果，提供更多的互動性。

缺點：

• 程式碼技能：雖然能支持豐富的動畫，但在實現複雜動畫時需要較高的程式碼技能。

Codepen上有很多有趣的範例

3. Lottie (JSON-based)

Lottie目前很多人使用的方式，用After Effects製作動畫並轉成JOSN格式，兼容多平台，唯一的缺點是會有很多製作上限制，基本上插件無法使用，有些After Effects內建特效還有Puppet Tool也無法使用，在製作動畫時會有蠻大的限制。(教學在這!)

優點：

• 豐富的動畫效果：支援複雜的動畫效果且檔案小，是現代UI設計的熱門選擇。
• 透明背景：支持透明背景，使得動畫能無縫融入各種設計中。
• 跨平台顯示一致：在不同平台和裝置中能夠保持一致的顯示效果。

缺點：

• 製作限制：會有蠻大的製作限制，插件、部分特效、Puppet Tool等功能無法使用。

4. MP4 (Video Format)

蠻多網頁會使用的方式，通常適合大範圍的影片檔。

優點：

• 高質量顯示：適合長時間和高解析度的動畫展示，畫質優良。
• 聲音支持：可以加入聲音，增強動態展示的效果。

缺點：

• 文件較大：檔案一般較大，可能影響頁面加載速度。
• 無法互動：動畫通常是靜態的，無法提供互動性。

5. APNG (Animated PNG)

不會有顯色跟透明度的問題，但兼容性跟檔案大小是蠻大的問題，有時候在畫面上會延遲出現😭，如果檔案不大又很需要透明度的動圖就很適合喔!!(之後會寫篇APNG的製作方式~)

優點：

• 色彩豐富：相比於GIF，APNG支援更多顏色，適合需要高畫質的動畫。
• 透明支持：可以有透明背景，與UI設計更為契合。

缺點：

• 較大檔案：通常檔案較大，可能影響加載時間。
• 兼容性問題：非所有瀏覽器均完全支援APNG格式。

根據你的設計需求和場景來選擇動畫檔案格式。動畫可以為UI設計更有趣，勇於探索不同的動畫形式，讓你的設計不僅好看，更能吸引使用者的目光✨

如果這篇有幫到你，希望你按下方的小手手~拍拍手👏👏👏!!