WordPress中插入Lottie動(dòng)畫(huà)具體教程

GIF是在包括WordPress在內的任何網(wǎng)站創(chuàng )建平臺中插入動(dòng)畫(huà)圖像的標準方式。而現在最新的趨勢是插入Lottie動(dòng)畫(huà)，將有吸引力的互動(dòng)元素顯示為圖像。雖然您可以使用SVG來(lái)實(shí)現可擴展性，但Lottie允許對您的動(dòng)畫(huà)進(jìn)行更多控制，本文就來(lái)介紹一下WordPress中插入Lottie動(dòng)畫(huà)具體教程。

什么是Lottie動(dòng)畫(huà)？

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

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

在WordPress中插入Lottie動(dòng)畫(huà)

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

1.使用Kadence區塊插入Lottie動(dòng)畫(huà)

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

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

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

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

在Kadence中自定義Lottie動(dòng)畫(huà)

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

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

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

尺寸控制——此設置允許您設置填充、邊距和寬度以更改整體尺寸。您可以使用這些選項來(lái)適應和對齊內容區域上的動(dòng)畫(huà)。

高級–這是Gutenberg為元素分配自定義CSS類(lèi)的默認選項。

完成后，在頁(yè)面上添加其他內容并點(diǎn)擊“發(fā)布”按鈕以查看Lottie動(dòng)畫(huà)的實(shí)際效果。

管理Lottie區塊

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

2.使用Ultimate Addon for Gutenberg插入Lottie動(dòng)畫(huà)

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

現在創(chuàng )建一個(gè)新文章或編輯現有文章以轉到古騰堡編輯器。通過(guò)在編輯器中鍵入/lottie來(lái)插入Lottie區塊。

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

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

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

從哪里獲得Lottie動(dòng)畫(huà)文件？

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

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

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

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

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

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

來(lái)源鏈接：https://www.idcspy.com/57408.html

本站聲明:網(wǎng)站內容來(lái)源于網(wǎng)絡(luò ),如有侵權,請聯(lián)系我們,我們將及時(shí)處理。