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

人們依然喜歡網頁的動畫效果，只是他們不再是佔據在網頁頭版，而是以不同的樣貌出現在選單、特效、內頁、甚至是APP手機程式中。網頁動畫有助於吸引用戶目光、拉近用戶的關係，或是增進使用體驗。

不久前我們才告別了Flash世代，準備迎接HTML 5動畫技術應用於網頁設計上，但下一個世代的網頁動畫技術似乎已經準備好了，其中一個全新的技術Lottie正在網頁設計師、手機APP設計師的社群中開始流傳，而且已經有人開始用Lottie在視覺設計工作上取得了成果。

Lottie是什麼？

Lottie是一個以JSON為基礎的開源動畫技術，而JSON是一個基於Java Script的語言，用來表示JavaScript 物件的格式，不論是文字、內容、程式、動畫都能夠透過JSON的技術，在不同平台上正常運行程式，而且快速有效率，幾乎在所有網站設計中看得到JSON的蹤影。

Lottie的動畫有很多優勢，剛剛提到的跨平台是一大優點，所以很多手機的微型動畫效果，可以透過Lottie呈現出來。另一個優勢是檔案大小非常小，以舊有技術來說，將動畫輸出成點陣圖(GIF)或(PNG)雖然也是可行，但檔案龐大，Lottie的檔案可以只有點陣圖動畫的十分之一不到，甚至最高可以達到六百分之一的大小。

使用Lottie的方式多元且完整，不論是作業系統、傳統網站、社群網站...都有對應的方式，例如以下的Lottie動畫就是透過官方資源提供的javascript方式崁入的。

根據Lottie官網的歷史資料，其實這個技術開發長達十年，從沒沒無名的技術，經過微軟以及許多大公司的支援，Lottie能夠在電腦與手機上順暢運作沒有問題，踏出了成功的第一步。接著Adobe After Effect軟體也提供了Lottie的插件，可以透過After Effect輸出高品質的動畫。

如何製作Lottie動畫？

Lottie的優勢在於向量動畫的效果，因此在Lottie的官網可以看到大多數的Lottie都是以向量為主的作品，向量動畫的優勢早在Flash時代就很明顯了：可以任意縮放大小，不受到顯示器的尺寸限制，畫質也不受縮放影響，也更易於達成設計師想要的高幀(高影格速率)作品。

根據Lottie官方的文件指出，目前只做Lottie動畫主要的技術以Adobe After Effect為主，但也有越來越多軟體可以開發，例如已經相當知名的UX開發軟體FLOW、以及目前提供免費使用的Haiku Animator軟體，都能開發出Lottie作品。

哪裡可以找到Lottie資源？

沒有開發經驗的人，最快的入門方式永遠是先參考，後學習。到lottiefiles.com 可以看到海量的免費資源可以下載使用。大家或許最想淘寶的地方是下載區，但其實lottiefiles.com 還有很多資源如論壇與免費工具等，可以提升你的動畫設計能力。

Lottie有一個很簡易的編輯功能，你可以將Lottie的檔案透過lottie editor編輯器，隨意的改變元素中的顏色配置，但請注意編輯器不是開發工具，頂多是改變顏色或是添加文字，不能調整作品的時間軸或元件原有位置。

另外，lottie沒有忘記老朋友，lottiefiles.com還能夠輸出成為傳統的GIF格式，不限於Lottie的開發者，就連網站小編或是站長都能在這裡找到許多有用的資源，來玩玩看吧！