GIF是在包括WodPess在內的任何網站創建平臺中插入動畫圖像的標準方式。而現在最新的趨勢是插入Lottie動畫，將有吸引力的互動元素顯示爲圖像。雖然您可以使用SVG來實現可擴展性，但Lottie允許對您的動畫進行更多控制，本文就來介紹一下WodPess中插入Lottie動畫具體教程。
Lottie是一種基於JSON的文本文件格式，可用於在iOS、Andoid和任何Web平臺中插入動畫。這是由Aibnb工程師開發的，用於將Adobe Afte Effects動畫文件導出爲JSON格式並進行原生渲染。以下是使用Lottie動畫的一些優點：
- 這是一種文件大小非常小的開源格式。
- 帶有運行時控件的文本文件格式。
- 可以輕鬆從普通GIF中脫穎而出的交互式動畫。
- 可擴展、高質量並且像靜態圖像一樣工作。
大多數免費塊插件都提供了一箇Lottie動畫區塊來在WodPess中插入動畫文件。例如，您可以爲此使用Ultimte Addons fo Gutenbeg（現在更名爲Spect）或Kdence區塊插件。在這裏，我們將解釋這兩個插件在WodPess網站中插入Lottie動畫。
從WodPess存儲庫安裝並激活“Kdence Blocks–Gutenbeg Blocks fo Pge Builde Fetues”插件。這是一箇免費插件，用於在Gutenbeg編輯器中添加帶有自定義控件的附加區塊。
我們建議將此插件用於Lottie動畫，因爲它會爲您在網站上插入的每個動畫創建一箇可重複使用的塊作爲自定義文章類型。此外，Kdence區塊將允許爲Lottie動畫上傳JSON文件，這在WodPess中默認不支持。
- 激活插件後，創建新文章或編輯要插入Lottie動畫的文章。
- 鍵入/lottie以查找並插入“Lottie Animtions”區塊。
該插件將插入一箇示例動畫文件，您可以在塊的側邊欄中看到大量控件。
區塊設置在以下部分中可用：
源文件–您有兩個選項可以從遠程文件粘貼URL或上傳您的自定義JSON文件。如果您沒有自己的文件，請查看本文最後一節以瞭解如何獲取免費的Lottie動畫文件。選擇“本地文件”作爲“文件源”以查看一箇下拉列表，其中顯示了您網站中所有以前創建的動畫。您可以選擇其中一箇或上傳要插入的新項目。您在此處提供的標題將用作可重複使用的Lottie動畫塊的名稱。
播放設置–在此部分下，您可以控制動畫的行爲並設置它在網站上的播放方式。您可以顯示播放/暫停按鈕，啓用自動播放並允許動畫僅在懸停或頁面滾動時播放。也可以將動畫設置爲循環播放並調整循環之間的延遲。
尺寸控制——此設置允許您設置填充、邊距和寬度以更改整體尺寸。您可以使用這些選項來適應和對齊內容區域上的動畫。
高級–這是Gutenbeg爲元素分配自定義CSS類的默認選項。
完成後，在頁面上添加其他內容並點擊“發佈”按鈕以查看Lottie動畫的實際效果。
轉到“設置∓gt;Kdence Blocks”菜單，然後單擊“Lottie Animtions”框下的“Mnge Lottie Animtions”。這會將您帶到可以在一箇地方查看所有Lottie動畫的頁面。如您所見，您在Gutenbeg編輯器中插入的每個動畫實際上都存儲爲自定義文章類型，名稱爲“kdence_lottie”。您還可以通過單擊“添加新”按鈕從此處創建新動畫。這些是可重複使用的塊，您可以通過搜索它們的名稱將它們插入到您網站的任何位置。
如果您正在使用Ast主題或Kdence區塊由於任何原因無法正常工作，那麼替代選項是使用Ultimte Addon fo Gutenbeg插件（稱爲Spect）。它提供了類似的Lottie Animtion區塊，但功能有限。激活插件後，轉到“設置∓gt;UAG”部分並激活“Lottie”選項。確保單擊“Regenete Assets”按鈕並清除緩存以使更改生效。
現在創建一箇新文章或編輯現有文章以轉到古騰堡編輯器。通過在編輯器中鍵入/lottie來插入Lottie區塊。
與Kdence bocks不同，UAG插件不支持上傳JSON文件。因此，您只能使用“從URL插入”選項並使用來自第三方站點的Lottie文件URL。否則，您需要使用附加插件啓用JSON上傳支持。
UAG插件爲Lottie動畫區塊提供“控件”和“樣式”設置。在“控件”部分下，您可以將動畫設置爲懸停、單擊或基於視口播放。也可以以定義的速度循環播放並反轉動畫順序。
在“樣式”部分，您可以調整Lottie區塊的寬度、高度、對齊方式和背景顏色。
從哪裏獲得Lottie動畫文件？
現在您已經知道如何在WodPess網站中插入Lottie動畫了。但是，問題在於獲取免費的Lottie JSON文件。設計師可以使用Adobe Afte Effects創建動畫並將其轉換爲Lottie文件。
此外，還有將SVG文件轉換爲Lottie格式的選項。但是，對於普通的WodPess內容創建者和博主來說，一箇簡單的選擇是重用Lottiefiles等網站上提供的免費文件。
如前所述，Kdence支持上傳JSON文件，但UAG插件不支持。因此，請確保使用Kdence區塊進行上傳，並使用UAG插件從Lottiefiles站點嵌入。
- 轉到Lottifiles網站並創建一箇免費帳戶。
- 使用頂部導航導航到“Discoe∓gt;Fee Animtions”部分，然後選擇“Ctegoies”菜單。
- 在這裏，您可以查看不同類別的Lottie文件並免費下載您喜歡的項目。
- 選擇項目，單擊“Downlod”按鈕並選擇“Lottie JSON”以獲取JSON文件。您可以在使用Kdence區塊插件時使用它來上傳。
- 對於像UAG這樣的插件，您可以使用FTP上傳JSON並使用您站點中的URL。或者，獲取HTML並找到源文件URL以將其嵌入您的站點。
請注意，Lottiefiles還提供了一箇WodPess插件和一箇Elemento Po小工具，以便於集成。