如何在WordPress中插入Lottie動畫？

GIF是在包括WordPress在內的任何網站建立平臺中插入動畫影象的標準方式。

然而，最新的趨勢是插入Lottie動畫，將有吸引力的互動元素顯示為影象。雖然您可以使用SVG來實現可擴充套件性，但Lottie允許對您的動畫進行更多控制。

如果您想知道Lottie是什麼以及如何在WordPress中插入它們，這裡有一些可參考的選項。

什麼是Lottie動畫？

Lottie是一種基於JSON的文字檔案格式，可用於在iOS、Android和任何Web平臺中插入動畫。這是由Airbnb工程師開發的，用於將Adob​​e After Effects動畫檔案匯出為JSON格式並進行原生渲染。以下是使用Lottie動畫的一些優點：

• 這是一種檔案大小非常小的開源格式。
• 帶有執行時控制元件的文字檔案格式。
• 可以輕鬆從普通GIF中脫穎而出的互動式動畫。
• 可擴充套件、高質量並且像靜態影象一樣工作。

在WordPress中插入Lottie動畫

大多數免費塊外掛都提供了一個Lottie動畫區塊來在WordPress中插入動畫檔案。例如，您可以為此使用Ultimate Addons for Gutenberg（現在更名為Spectra）或Kadence區塊外掛。在這裡，我們將解釋這兩個外掛在WordPress網站中插入Lottie動畫。

1. 使用Kadence區塊插入Lottie動畫

從WordPress儲存庫安裝並啟用“Kadence Blocks – Gutenberg Blocks for Page Builder Features”外掛。這是一個免費外掛，用於在Gutenberg編輯器中新增帶有自定義控制元件的附加區塊。

我們建議將此外掛用於Lottie動畫，因為它會為您在網站上插入的每個動畫建立一個可重複使用的塊作為自定義文章型別。此外，Kadence區塊將允許為Lottie動畫上傳JSON檔案，這在WordPress中預設不支援。

• 啟用外掛後，建立新文章或編輯要插入Lottie動畫的文章。
• 鍵入/lottie以查詢並插入“Lottie Animations”區塊。

使用Kadence插入Lottie動畫區塊

• 該外掛將插入一個示例動畫檔案，您可以在塊的側邊欄中看到大量控制元件。

Kadence中的Lottie動畫區塊設定

在Kadence中自定義Lottie動畫

區塊設定在以下部分中可用：

• 原始檔– 您有兩個選項可以從遠端檔案貼上URL或上傳您的自定義JSON檔案。如果您沒有自己的檔案，請檢視本文最後一節以瞭解如何獲取免費的Lottie動畫檔案。選擇“本地檔案”作為“檔案源”以檢視一個下拉選單，其中顯示了您網站中所有以前建立的動畫。您可以選擇其中一個或上傳要插入的新專案。您在此處提供的標題將用作可重複使用的Lottie動畫塊的名稱。

上傳JSON Lottie檔案

• 播放設定– 在此部分下，您可以控制動畫的行為並設定它在網站上的播放方式。您可以顯示播放/暫停按鈕，啟用自動播放並允許動畫僅在懸停或頁面滾動時播放。也可以將動畫設定為迴圈播放並調整迴圈之間的延遲。

Lottie動畫的播放設定

• 尺寸控制——此設定允許您設定填充、邊距和寬度以更改整體尺寸。您可以使用這些選項來適應和對齊內容區域上的動畫。

Lottie動畫區塊的大小控制設定

• 高階– 這是Gutenberg為元素分配自定義CSS類的預設選項。

完成後，在頁面上新增其他內容並點選“釋出”按鈕以檢視Lottie動畫的實際效果。

管理Lottie區塊

轉到“設定 > Kadence Blocks”選單，然後單擊“Lottie Animations”框下的“Manage Lottie Animations”。這會將您帶到可以在一個地方檢視所有Lottie動畫的頁面。如您所見，您在Gutenberg編輯器中插入的每個動畫實際上都儲存為自定義文章型別，名稱為“kadence_lottie”。您還可以通過單擊“新增新”按鈕從此處建立新動畫。這些是可重複使用的塊，您可以通過搜尋它們的名稱將它們插入到您網站的任何位置。

在Kadence中管理可重複使用的Lottie區塊

2. 使用Ultimate Addon for Gutenberg插入Lottie動畫

如果您正在使用Astra主題或Kadence區塊由於任何原因無法正常工作，那麼替代選項是使用Ultimate Addon for Gutenberg外掛（稱為Spectra）。它提供了類似的Lottie Animation區塊，但功能有限。啟用外掛後，轉到“設定> UAG”部分並啟用“Lottie”選項。確保單擊“Regenerate Assets”按鈕並清除快取以使更改生效。

在UAG外掛中啟用Lottie

現在建立一個新文章或編輯現有文章以轉到古騰堡編輯器。通過在編輯器中鍵入/lottie來插入Lottie區塊。

使用UAG外掛插入Lottie區塊

與Kadence bocks不同，UAG外掛不支援上傳JSON檔案。因此，您只能使用“從URL插入”選項並使用來自第三方站點的Lottie檔案URL。否則，您需要使用附加外掛啟用JSON上傳支援。

使用UAG從檔案中插入Lottie

UAG外掛為Lottie動畫區塊提供“控制元件”和“樣式”設定。在“控制元件”部分下，您可以將動畫設定為懸停、單擊或基於視口播放。也可以以定義的速度迴圈播放並反轉動畫順序。

UAG中的Lottie區塊設定

在“樣式”部分，您可以調整Lottie區塊的寬度、高度、對齊方式和背景顏色。

UAG Lottie區塊的樣式設定

從哪裡獲得Lottie動畫檔案？

現在您已經知道如何在WordPress網站中插入Lottie動畫了。但是，問題在於獲取免費的Lottie JSON檔案。設計師可以使用Adob​​e After Effects建立動畫並將其轉換為Lottie檔案。

此外，還有將SVG檔案轉換為Lottie格式的選項。但是，對於普通的WordPress內容建立者和博主來說，一個簡單的選擇是重用Lottiefiles等網站上提供的免費檔案。

如前所述，Kadence支援上傳JSON檔案，但UAG外掛不支援。因此，請確保使用Kadence區塊進行上傳，並使用UAG外掛從Lottiefiles站點嵌入。

• 轉到Lottifiles網站並建立一個免費帳戶。
• 使用頂部導航導航到“Discover > Free Animations”部分，然後選擇“Categories”選單。
• 在這裡，您可以檢視不同類別的Lottie檔案並免費下載您喜歡的專案。

選擇類別以檢視動畫

• 選擇專案，單擊“Download”按鈕並選擇“Lottie JSON”以獲取JSON檔案。您可以在使用Kadence區塊外掛時使用它來上傳。
• 對於像UAG這樣的外掛，您可以使用FTP上傳JSON並使用您站點中的URL。或者，獲取HTML並找到原始檔URL以將其嵌入您的站點。

下載Lottie動畫JSON檔案

請注意，Lottiefiles還提供了一個WordPress外掛和一個Elementor Pro小工具，以便於整合。