Lottie animation 網站動畫功能

之前講過Elementor Pro出了一個Multi-step form，現在跟大家說他們另一個新增的功能Lottie animation。

有個示範圖片，看到在網站上下拉動時，或者跟網站做一些互動時，會出現一些動畫。

以前常用flash來做，現在已經不用flash了，而且flash體積大，載入相對慢。

動畫animation

如果網站想做一些類似的animation，而也適用於手機，就可以用這個新功能，用lottie這個新元素。

用戶應該會喜歡的，因為增加了參與度。

做法是去lottiefiles網站，其實就是一些動畫類的東西。

首先要免費登記一個帳戶，然後在上面可以尋找主題，裡面有很多素材，都是免費的動畫，也支援手機。

比如我找單車，結果出來很多相關動畫，有些運動幅度還相當大。

Elementor pro – Lottie files

首先去選element – lottie，把它拉出來，左邊Source這裡要提供一個JSON file，點擊一下喜歡的單車動畫，就看到該動畫資料頁面上面有個Download JSON，下載後回到剛才要求JSON file的頁面，上載選好的動畫。

現在畫面看到剛才選的動畫了，去網站給大家看預覽，可以看到動畫播放了一次。

在設定那裡可以設為loop(不斷重播)，但也還是少了互動元素。

Lottie files 設定

其實還有更多設定，可以設定什麼情況下動畫運轉，可以選擇幾種情況：viewport看到就播；點擊才播；

滑鼠滑到才播(電腦可以做，手機不行)；

scroll是我最喜歡的，就是拉動畫面的時候播出，往下拉動畫向前走，往上拉動畫往回走。

而且踩單車的速度也隨用戶拉動的快慢而變化，這個會比較有趣和有吸引力，因為多了互動。

Lottie有多少animation

我暫時還不清楚Lottie有多少animation，就知道是免費的，但主流的會有，這個功能相當有趣，會讓你的網站與別不同。

因為用戶可以參與操控和改變畫面，容易令人印象深刻，有助延長逗留時間，絕對是好事一樁。

Elementor Pro本身已經有很多功能，再加上這個變得更吸引了。