首頁 部落格 網頁動畫新未來:Lottie檔案更小讀取更快
Free Resource
Dec 10, 2021
網路上有很多創新、免費的網頁設計資源,有些可以用於網站的草稿與線稿設計,也有繪圖軟體可以強化網站的視覺設計表現,還有很多奇特的網站提供意想不到的服務,我們樂於收集與分享這些資源給各位。

網頁動畫新未來: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的開發者,就連網站小編或是站長都能在這裡找到許多有用的資源,來玩玩看吧!

網頁視覺設計Web3.0,有多少可能打破壟斷?
網頁視覺設計Web3.0,有多少可能打破壟斷?
Jericho
Jericho
Apr 29, 2022
好想去日本!日本環景3D帶你到秋葉原、主題飯店、三麗鷗專賣店
好想去日本!日本環景3D帶你到秋葉原、主題飯店、三麗鷗專賣店
Ryan
Ryan
Feb 24, 2022
透過3D環景教育應用,實現元宇宙概念
透過3D環景教育應用,實現元宇宙概念
Ryan
Ryan
Feb 16, 2022