GIF是在包括wordpress在內(nèi)的任何網(wǎng)站創(chuàng)建平臺中插入動畫圖像的標準方式。

然而，最新的趨勢是插入Lottie動畫，將有吸引力的互動元素顯示為圖像。雖然您可以使用SVG來實現(xiàn)可擴展性，但Lottie允許對您的動畫進行更多控制。

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

什么是Lottie動畫？

Lottie是一種基于JSON的文本文件格式，可用于在iOS、Android和任何Web平臺中插入動畫。這是由Airbnb工程師開發(fā)的，用于將Adob??e After Effects動畫文件導(dǎo)出為JSON格式并進行原生渲染。以下是使用Lottie動畫的一些優(yōu)點：

• 這是一種文件大小非常小的開源格式。
• 帶有運行時控件的文本文件格式。
• 可以輕松從普通GIF中脫穎而出的交互式動畫。
• 可擴展、高質(zhì)量并且像靜態(tài)圖像一樣工作。

在WordPress中插入Lottie動畫

大多數(shù)免費塊插件都提供了一個Lottie動畫區(qū)塊來在WordPress中插入動畫文件。例如，您可以為此使用Ultimate Addons for Gutenberg（現(xiàn)在更名為Spectra）或Kadence區(qū)塊插件。在這里，我們將解釋這兩個插件在WordPress網(wǎng)站中插入Lottie動畫。

1. 使用Kadence區(qū)塊插入Lottie動畫

從WordPress存儲庫安裝并激活“Kadence Blocks – Gutenberg Blocks for Page Builder Features”插件。這是一個免費插件，用于在Gutenberg編輯器中添加帶有自定義控件的附加區(qū)塊。

我們建議將此插件用于Lottie動畫，因為它會為您在網(wǎng)站上插入的每個動畫創(chuàng)建一個可重復(fù)使用的塊作為自定義文章類型。此外，Kadence區(qū)塊將允許為Lottie動畫上傳JSON文件，這在WordPress中默認不支持。

• 激活插件后，創(chuàng)建新文章或編輯要插入Lottie動畫的文章。
• 鍵入/lottie以查找并插入“Lottie Animations”區(qū)塊。

使用Kadence插入Lottie動畫區(qū)塊

• 該插件將插入一個示例動畫文件，您可以在塊的側(cè)邊欄中看到大量控件。

Kadence中的Lottie動畫區(qū)塊設(shè)置

在Kadence中自定義Lottie動畫

區(qū)塊設(shè)置在以下部分中可用：

• 源文件– 您有兩個選項可以從遠程文件粘貼URL或上傳您的自定義JSON文件。如果您沒有自己的文件，請查看本文最后一節(jié)以了解如何獲取免費的Lottie動畫文件。選擇“本地文件”作為“文件源”以查看一個下拉列表，其中顯示了您網(wǎng)站中所有以前創(chuàng)建的動畫。您可以選擇其中一個或上傳要插入的新項目。您在此處提供的標題將用作可重復(fù)使用的Lottie動畫塊的名稱。

上傳JSON Lottie文件

• 播放設(shè)置– 在此部分下，您可以控制動畫的行為并設(shè)置它在網(wǎng)站上的播放方式。您可以顯示播放/暫停按鈕，啟用自動播放并允許動畫僅在懸停或頁面滾動時播放。也可以將動畫設(shè)置為循環(huán)播放并調(diào)整循環(huán)之間的延遲。

Lottie動畫的播放設(shè)置

• 尺寸控制——此設(shè)置允許您設(shè)置填充、邊距和寬度以更改整體尺寸。您可以使用這些選項來適應(yīng)和對齊內(nèi)容區(qū)域上的動畫。

Lottie動畫區(qū)塊的大小控制設(shè)置

• 高級– 這是Gutenberg為元素分配自定義CSS類的默認選項。

完成后，在頁面上添加其他內(nèi)容并點擊“發(fā)布”按鈕以查看Lottie動畫的實際效果。

管理Lottie區(qū)塊

轉(zhuǎn)到“設(shè)置 > Kadence Blocks”菜單，然后單擊“Lottie Animations”框下的“Manage Lottie Animations”。這會將您帶到可以在一個地方查看所有Lottie動畫的頁面。如您所見，您在Gutenberg編輯器中插入的每個動畫實際上都存儲為自定義文章類型，名稱為“kadence_lottie”。您還可以通過單擊“添加新”按鈕從此處創(chuàng)建新動畫。這些是可重復(fù)使用的塊，您可以通過搜索它們的名稱將它們插入到您網(wǎng)站的任何位置。

在Kadence中管理可重復(fù)使用的Lottie區(qū)塊

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

如果您正在使用Astra主題或Kadence區(qū)塊由于任何原因無法正常工作，那么替代選項是使用Ultimate Addon for Gutenberg插件（稱為Spectra）。它提供了類似的Lottie Animation區(qū)塊，但功能有限。激活插件后，轉(zhuǎn)到“設(shè)置> UAG”部分并激活“Lottie”選項。確保單擊“Regenerate Assets”按鈕并清除緩存以使更改生效。

在UAG插件中激活Lottie

現(xiàn)在創(chuàng)建一個新文章或編輯現(xiàn)有文章以轉(zhuǎn)到古騰堡編輯器。通過在編輯器中鍵入/lottie來插入Lottie區(qū)塊。

使用UAG插件插入Lottie區(qū)塊

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

使用UAG從文件中插入Lottie

UAG插件為Lottie動畫區(qū)塊提供“控件”和“樣式”設(shè)置。在“控件”部分下，您可以將動畫設(shè)置為懸停、單擊或基于視口播放。也可以以定義的速度循環(huán)播放并反轉(zhuǎn)動畫順序。

UAG中的Lottie區(qū)塊設(shè)置

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

UAG Lottie區(qū)塊的樣式設(shè)置

從哪里獲得Lottie動畫文件？

現(xiàn)在您已經(jīng)知道如何在WordPress網(wǎng)站中插入Lottie動畫了。但是，問題在于獲取免費的Lottie JSON文件。設(shè)計師可以使用Adob??e After Effects創(chuàng)建動畫并將其轉(zhuǎn)換為Lottie文件。

此外，還有將SVG文件轉(zhuǎn)換為Lottie格式的選項。但是，對于普通的WordPress內(nèi)容創(chuàng)建者和博主來說，一個簡單的選擇是重用Lottiefiles等網(wǎng)站上提供的免費文件。

如前所述，Kadence支持上傳JSON文件，但UAG插件不支持。因此，請確保使用Kadence區(qū)塊進行上傳，并使用UAG插件從Lottiefiles站點嵌入。

• 轉(zhuǎn)到Lottifiles網(wǎng)站并創(chuàng)建一個免費帳戶。
• 使用頂部導(dǎo)航導(dǎo)航到“Discover > Free Animations”部分，然后選擇“Categories”菜單。
• 在這里，您可以查看不同類別的Lottie文件并免費下載您喜歡的項目。

選擇類別以查看動畫

• 選擇項目，單擊“Download”按鈕并選擇“Lottie JSON”以獲取JSON文件。您可以在使用Kadence區(qū)塊插件時使用它來上傳。
• 對于像UAG這樣的插件，您可以使用FTP上傳JSON并使用您站點中的URL?；蛘?，獲取HTML并找到源文件URL以將其嵌入您的站點。

下載Lottie動畫JSON文件

請注意，Lottiefiles還提供了一個WordPress插件和一個Elementor Pro小工具，以便于集成。