如今，在網頁設計中，效能和載入速度高於一切，這很大程度上是由於行動裝置的廣泛使用需要更快、更輕的網站。
因此，我們對網站上的圖像和其他圖形資源的處理和使用至關重要，以免影響加載並導致網站訪客因無法導航而離開。
Lottie 檔案涵蓋了目前網頁設計中非常必要的空間 - 動畫 - 動畫已經被遺忘了一段時間，因為它們是相當重的檔案並且基本上已經不再使用。直到最近！
在這篇文章中，我將告訴您有關此類動畫文件所需了解的所有信息，以及如何在當前的網頁設計中利用它。
給它一盞燈！
目錄
洛蒂是什麼？
如何建立 Lottie 文件
Lottie 檔案的重量是多少？
哪裡可以下載 Lottie 文件
#1.洛蒂文件
#2.圖示偵察兵
＃3。運動元素
＃4。洛蒂·弗洛
＃5。洛迪康
如何編輯 Lottie 文件
如何在 Lottie 中轉換 SVG 文件
如何在 Elementor 中使用 Lottie 文件
#1.元素專業版
#2.鱷魚塊
＃3。進階插件
＃4。 Plus 外掛
結論及個人看法
洛蒂是什麼？
Lottie 是 Airbnb 創建的一個庫，旨在讓您更輕鬆地為不同平台創 賽普勒斯電話號碼庫 建動畫。 Lottie 可用於網頁、Android、iO 和其他類型的環境。 Airbnb 對此做了正確的解釋。
它們是可在任何裝置上運行的動畫文件，並且可以在不像素化或品質損失的情況下進行縮放，就像 SVG 文件一樣。
洛蒂動畫圖標
我們可以說這種格式是 Zumosol 動畫 Gif 格式的表親，由於它增加了網站的重量，現在已經相當過時了。
動畫 Gif 和 Lottie 檔案之間的最大區別在於，前者由圖像組成，後者是透過 JSON 類型檔案中的程式碼產生的，這允許它們完全自訂並且重量要低得多，因為它是關於程式碼的（我像香腸一樣重複自己）。
借助這種動畫格式，我們可以創建非常有創意的 WordPress 網頁，而不會影響載入速度，正如您所知，這是當今良好用戶體驗的一個基本方面，尤其是在手機上。
設計網站的階段
如何建立 Lottie 文件
要建立 Lottie 文件，您需要 Adobe After Effects 動畫工具和開源 Bodymovin 擴展，這是將動畫文件匯出為 JSON 格式所必需的。該擴充功能包括一個 JavaScript 播放器，可以在網路上呈現動畫。
您可以在此處找到更多 Airbnb 文件。
Lottie 文件有多重？
在網頁效能層面，我們可以說 Lottie 檔案為網頁設計帶來了創造力和現代感，同時又不影響載入速度。
正如 PNG、JPG 或 GIF 等靜態檔案必須進行最佳化和壓縮，以免影響網站的效能一樣，Lottie 檔案也不必進行最佳化，並且它們在這方面的影響實際上是非-存在的。
從圖形上看，PNG 就像大象，GIF 就像鯨魚，Lottie 就像無害的小螞蟻。
無論如何，如果您的網站包含太多動畫文件，它也會看起來超載，因此在設計網站時不要犯最常見的錯誤之一。
洛蒂動畫
哪裡可以下載 Lottie 文件
如果您想在網站上使用 Lottie 文件，可以在一些儲存庫中下載動畫：
#1.洛蒂文件
最知名、最廣泛的 Lottie 檔案網站。在這裡，除了下載動畫檔案之外，您還會發現很多其他資源。
#2.圖示偵察兵
來自 LottieFiles 的同一個人，您可以在這裡找到一個很好的文件存儲庫，可以下載並帶到您的網站。有些是免費的，並且不允許進行重大編輯調整，但大多數是付費的（大約 370 萬個文件，哇！）。
＃3。運動元素
在這個網站上，您可以找到免費和付費文件，儘管事實是，它們的品質在創意水平上相當基礎。
＃4。洛蒂·弗洛
在這裡，您將找到 100 多個簡單的 Webflow 動畫圖標，您可以在下載之前自訂。
＃5。洛迪康
非常酷的動畫圖示庫，其中包括 350 多個免費圖示和 1,650 多個付費圖示。
如何編輯 Lottie 文件
在 LottieFiles 網站上，您可以使用其編輯工具輕鬆編輯 Lottie 檔案。
使用它您可以修改顏色、文字和其他元素，直到達到所需的效果。
如何在 Lottie 中轉換 SVG 文件
您也可以從 LottieFiles 網站訪問
