簡介
先不多說,大家看看下列的動畫效果:
很流暢吧!這就是Lottie動畫了。動畫製作員在Adobe After Effects製作動畫後,把檔案經過Lottie插件“Bodymovin”導出為json格式,再把連接套到網站,便可呈現這麼漂亮的景象!
倘若不是動畫製作員的你,怎麼可以為你的網頁添加Lottie動畫呢?這個時候你只需要完成以下2個簡單步驟即可:
- Lottie動畫資源
- Elementor Pro Lottie插件
Lottie動畫資源
現時最大的資源庫是 lottiefiles.com,它擁有大量免費及付費動畫內容。現在我們先前往註冊。在首頁點擊“Sign Up”進行註冊。由於註冊相當簡單,這裡我便省略過程,直接跳到主題。

完成註冊後,點擊菜單的“Animations”進入動畫庫。這裡你可以隨便瀏覽,挑選心愛的動畫。

現在我們隨便點開一個動畫,這時播放器會播放完整的動態。留意指標地方的URL,稍後我們將會用到。

Elementor Pro Lottie插件
挑選好心儀的動畫後,我們便可以把它放到網頁處。
打開Elementor控制台,找到Lottie插件,並把插件拉到網頁。

現在看到儀錶板的選項,在“Source”選擇“External URL”,然後在“External URL”方塊,貼上剛才提醒大家需要留意的“Lottie Animation URL”。

這時候,動畫立馬出現!先別開心,留意到動畫只播放1次就停了嗎?這時候我們需要多一個動作。
找到Settings,把“Loop”打開,這時候動畫將無限重播!至於其它的選項,則可根據喜好自行設定。

總結
由於Lottie動畫不像一般Vector插圖般能輕易利用Adobe Illustrator修改顏色,使動畫與網頁配色相同,因此若你並非專業動畫製作員,Lottie動畫只適合單獨點綴你的網頁。若經濟條件許可的話,可以考慮在LottieFiles網頁的“Marketplace”分頁,購買色調相對一致的組合包,這樣能為網頁格調提升不少!