Lottie 基本上是一種用于矢量圖形動(dòng)畫的文件格式，它在吸引訪問者注意力方面比您網(wǎng)站的靜態(tài)資產(chǎn)非常有效。它以德國剪影動(dòng)畫先驅(qū) Charlotte Lotte Reiniger 的名字命名。 Lottie 基本上是一種基于 JSON 的動(dòng)畫文件，可幫助網(wǎng)頁設(shè)計(jì)人員在每個(gè)屏幕上顯示動(dòng)畫文件

移動(dòng)的元素總是能引起我們的注意。美國國家醫(yī)學(xué)圖書館出版了一本關(guān)于視覺運(yùn)動(dòng)和注意力捕獲之間的聯(lián)盟的期刊。根據(jù)他們的研究，運(yùn)動(dòng)總能有效地引導(dǎo)我們的注意力。

如果您想在您的網(wǎng)頁上獲得更多關(guān)注，請(qǐng)?jiān)诖颂幪砑右恍┮苿?dòng)對(duì)象。因此，客戶更有可能迷上您的網(wǎng)頁。但真正的問題來了；您如何吸引訪客的注意力？

很簡單，使用Lottie動(dòng)畫！ 

Lottie 在吸引訪問者注意力方面比您網(wǎng)站的靜態(tài)資產(chǎn)更有效。這就是為什么我們要告知您將交互式 Lottie 動(dòng)畫添加到您的 Joomla 網(wǎng)站的整個(gè)過程。

什么是 Lottie 動(dòng)畫

Lottie 基本上是一種用于矢量圖形動(dòng)畫的文件格式。它以德國剪影動(dòng)畫先驅(qū) Charlotte Lotte Reiniger 的名字命名。 

Lottie 基本上是一種基于 JSON 的動(dòng)畫文件，可幫助網(wǎng)頁設(shè)計(jì)人員在每個(gè)屏幕上顯示動(dòng)畫文件。這些小動(dòng)畫文件適合任何沒有像素化的屏幕。但是，如果我們想談?wù)摪l(fā)展，Bodymovin 是我們必須在這里討論的第一件事。

由于Bodymovin，Lottie 文件的開發(fā)終于成為可能。它是由 Hernan Torrisi 開發(fā)的 Adobe After Effect 插件。此插件可以將 Adobe After Effects 動(dòng)畫導(dǎo)出為 JSON 格式。當(dāng)網(wǎng)頁設(shè)計(jì)師在他們的網(wǎng)站上實(shí)現(xiàn)這些 JSON 文件時(shí)，他們會(huì)在屏幕上看到那些美麗的 Lotties！

在哪里可以免費(fèi)找到交互式 Lottie 動(dòng)畫

有很多在線和離線工具可以設(shè)計(jì)您自己的 Lottie 動(dòng)畫。最流行的是 Adobe After Effects、Adobe XD、Figma 等。但是，只有您有足夠的時(shí)間和設(shè)計(jì)知識(shí)，才能設(shè)計(jì)出有效的 Lottie 動(dòng)畫。 

盡管 Lottie 動(dòng)畫看起來創(chuàng)建起來有多么復(fù)雜，但它們實(shí)現(xiàn)起來非常簡單。因?yàn)榫W(wǎng)上有大量免費(fèi)和現(xiàn)成的 Lottie 動(dòng)畫。在那里搜索您喜歡的 Lottie 動(dòng)畫，獲取 JSON 文件，然后在您的網(wǎng)站上使用它。 

但是，您可以從 Lottiefiles 收集您的Lotties。這是一個(gè)很棒的開源平臺(tái)，您可以在其中免費(fèi)下載許多交互式 Lotties。讓我解釋一下從 Lottiefiles 中尋找免費(fèi) Lottie 動(dòng)畫的步驟。

• 瀏覽 com
• 將鼠標(biāo)懸停在“發(fā)現(xiàn)”菜單上
• 從下拉菜單中單擊免費(fèi)的即用型動(dòng)畫

您會(huì)在該頁面上找到大量 Lottie 動(dòng)畫。如果您想要一個(gè)特定的動(dòng)畫，你可以使用導(dǎo)航欄上的搜索框。找到您喜歡的 Lottie 動(dòng)畫后，單擊它并以您想要的任何格式下載它。Lottiefiles 允許用戶以多種格式下載這些動(dòng)畫，例如 JSON、dotLottie、ZIP、MP4、Gif 等。

如何添加和配置交互式 Lottie 動(dòng)畫

設(shè)計(jì)一個(gè) Joomla 網(wǎng)站不是什么大事。當(dāng)您想設(shè)計(jì)一個(gè)專業(yè)且引人注目的網(wǎng)站時(shí)，真正的斗爭就開始了。那么，今天我們將通過添加和配置交互式 Lottie 動(dòng)畫來幫助您設(shè)計(jì)一個(gè)更好的網(wǎng)站。讓我們先獲取先決條件列表。

先決條件

您只需要兩件事就可以設(shè)計(jì)出獨(dú)一無二的 Joomla 網(wǎng)頁。

• SP 頁面生成器專業(yè)版
• 對(duì)網(wǎng)站的管理員訪問權(quán)限

第 1 步：創(chuàng)建新頁面或文章

您可以在網(wǎng)頁和文章中添加 Lottie 動(dòng)畫。因此，首先創(chuàng)建一個(gè)新頁面或文章。在這篇博客中，我們將在一篇新文章中添加一個(gè)Lottie。因此，首先登錄到您的 Joomla 管理面板儀表板。然后導(dǎo)航到內(nèi)容>文章。在文章頁面上，單擊頂部欄上的+ 新建按鈕以創(chuàng)建新文章。

在這里，寫下您的文章標(biāo)題、別名和其他所需的設(shè)置。然后單擊保存按鈕并在文章部分選擇 SP Page Builder 選項(xiàng)。現(xiàn)在，單擊“使用 SP 頁面構(gòu)建器編輯”按鈕，SP 頁面構(gòu)建器編輯器將在新選項(xiàng)卡中打開。 

注意：您必須先保存文章才能使用 SP Page Builder 編輯文章。 

第 2 步：選擇放置區(qū)域

現(xiàn)在，您必須選擇要放置 Lottie 的位置。盡量把它放在能吸引最多游客的地方。要選擇放置區(qū)域，請(qǐng)單擊“添加新行”按鈕并選擇您喜歡的列布局。 

如您所見，那里已經(jīng)有 10 個(gè)預(yù)定義的列布局。選擇最適合您文章結(jié)構(gòu)的一種。但是，您也可以使用自定義列框生成自定義列布局。我們?cè)谖恼轮羞x擇4+4+4布局。

第 3 步：使用 Lottie Addon

現(xiàn)在是時(shí)候使用 Lottie 插件了。設(shè)置列布局后：

• 選擇您想要顯示 Lottie 的首選欄目區(qū)域
• 單擊那里的“+”圖標(biāo)，它將打開 SP Page Builder 的插件
• 搜索 Lottie 插件并將其拖到您喜歡的列區(qū)域

設(shè)置欄目布局后，選擇要顯示 Lottie 的位置。然后從那里單擊“+”圖標(biāo)，它將打開 SP Page Builder 的插件。搜索 Lottie 插件并將其拖到您喜歡的列區(qū)域。

將插件拖到那里后，您會(huì)在那里看到自行車圖像。它只是 SP Page Builder 附帶的演示 Lottie 動(dòng)畫。您可以更改 Lottie URL 以使用您自己的。我們將在接下來的步驟中討論該過程。

第 4 步：獲取 Lottie 動(dòng)畫 URL

SP Page Builder 支持在您的 Joomla 網(wǎng)站上集成 Lottie 動(dòng)畫的多種方法。您可以將 Lottie GIF 文件直接上傳到媒體庫或使用您首選 Lottie 文件的 JSON 文件的外部 URL。在此博客中，我們將使用托管在 Lottiefiles 上的特技飛行飛機(jī)的 Lottie。 

正如我們之前提到的，Lottiefiles 有數(shù)以千計(jì)的免費(fèi) Lottie 動(dòng)畫可供選擇。只需選擇一個(gè)好的 Lottie，然后單擊它。您將在動(dòng)畫下方獲得 Lottie 動(dòng)畫 URL。

轉(zhuǎn)到Lottiefiles官網(wǎng)并復(fù)制您喜歡的 Lottie 動(dòng)畫的 JSON 鏈接。我們需要該 URL 來配置 Lottie 動(dòng)畫。確保您已正確復(fù)制完整的 URL。否則，SP Page Builder 無法從源中獲取您首選的 Lottie 文件。順便說一句，您必須登錄才能獲取該 JSON URL。

現(xiàn)在，點(diǎn)擊 Lottie 部分，它會(huì)顯示 Lottie 設(shè)置欄。單擊此處的 Lottie 插件圖標(biāo)。它將打開 Lottie 設(shè)置模式彈出窗口。從那里選擇外部 URL選項(xiàng)作為文件源，并將您的 URL 粘貼到 Lottie URL 框中。

就是這樣！

如果您正確執(zhí)行了前面的步驟，您現(xiàn)在可能會(huì)預(yù)覽所選的 Lottie 動(dòng)畫。 

第 5 步：配置 Lottie 的設(shè)置

好吧，你現(xiàn)在可能有點(diǎn)困惑。因?yàn)榧词鼓颜_完成所有操作，動(dòng)畫文件也不會(huì)移動(dòng)！它看起來像靜態(tài)圖像，對(duì)吧？

不用擔(dān)心！一切都很好。在這一步中，我們必須調(diào)整一些設(shè)置來控制所選動(dòng)畫文件的行為。

為此，請(qǐng)?jiān)俅未蜷_ Lottie 設(shè)置模式彈出窗口。然后啟用自動(dòng)播放和循環(huán)選項(xiàng)。顧名思義，啟用這些選項(xiàng)將使動(dòng)畫連續(xù)移動(dòng)。

除了突出顯示的選項(xiàng)外，您還將在此處獲得一些其他自定義選項(xiàng)。這些都是：

• 模式- 它指示動(dòng)畫何時(shí)開始移動(dòng)。 
• 播放速度- 它決定動(dòng)畫的速度。默認(rèn)速度為 1。
• 起點(diǎn)- 起點(diǎn)表示動(dòng)畫開始的時(shí)間。
• 終點(diǎn)- 就像起點(diǎn)一樣，它表示 Lottie 動(dòng)畫的結(jié)束時(shí)刻。
• 方向- 您可以從這里控制是向前還是向后播放動(dòng)畫。 

這些是 SP Page Builder 的附加配置選項(xiàng)。但是，如果您需要調(diào)整 Lottie 動(dòng)畫的尺寸，您可以從“大小”選項(xiàng)卡進(jìn)行調(diào)整。您可以為 Lotties 設(shè)置合適的高度和寬度。

注意：用戶也可以在 iFrame 中嵌入 Lotties。在這種情況下，他們必須使用 RAW HTML 插件而不是 Lottie 插件。然后，他們必須將整個(gè) iFrame 代碼復(fù)制并粘貼到Raw HTML 插件上。 

第 6 步：預(yù)覽最終版本

我們?cè)?Joomla 網(wǎng)站上添加和配置交互式 Lottie 動(dòng)畫的旅程到此結(jié)束。

添加 Lottie 動(dòng)畫的額外提示 

Lottie 動(dòng)畫肯定會(huì)美化您的網(wǎng)站；毫無疑問。但是，這并不意味著您可以在 Joomla 網(wǎng)站的任何地方添加無限的 Lotties。 

以下是添加 Lottie 動(dòng)畫時(shí)必須考慮的一些重要事項(xiàng)。 

不要使用太多Lottie動(dòng)畫

Lottie 動(dòng)畫是一個(gè)引人注目的網(wǎng)絡(luò)元素。它對(duì)訪問者會(huì)話、跳出率、用戶參與度等有積極影響。因此，大多數(shù)網(wǎng)站管理員無法抗拒過度使用這些動(dòng)畫的誘惑。但是你必須避免使用過多的 Lottie 動(dòng)畫，以降低加載速度、頁面重量等。

保持品牌顏色的一致性

您必須在整個(gè)網(wǎng)站上保持顏色的一致性。它是您品牌標(biāo)識(shí)的重要組成部分。但是，這并不意味著您不能使用不同顏色的動(dòng)畫。如今，大多數(shù) Lottie 動(dòng)畫提供者都具有為該動(dòng)畫應(yīng)用不同調(diào)色板的功能。只需應(yīng)用您的品牌調(diào)色板并提高您的品牌知名度。

注意 Lottie 放置

使用 Lottie 動(dòng)畫的最終目的是提高訪問者的注意力。這就是為什么您必須密切注意這些動(dòng)畫的位置。以下是您可以使用 Lottie 動(dòng)畫以獲得最積極反饋的一些位置。

• 折疊區(qū)域上方
• 圖片畫廊
• 產(chǎn)品功能部分
• 聯(lián)系表
• 購買確認(rèn)頁面
• 404頁等

這些是 Lottie 動(dòng)畫最適合的最常見頁面。雖然這個(gè)位置完全取決于您的業(yè)務(wù)和網(wǎng)站設(shè)計(jì)，但請(qǐng)確保您沒有放錯(cuò)位置。 

確保 Lotty 的像素完美布局

在現(xiàn)有文章中放置動(dòng)畫時(shí)，請(qǐng)確保它與現(xiàn)有欄布局保持一致。否則，不僅破壞了設(shè)計(jì)模式，而且整個(gè)網(wǎng)頁的設(shè)計(jì)也會(huì)變得不一致。總的來說，它會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。

總結(jié)

Lottie 動(dòng)畫不僅可以改善訪問者的用戶體驗(yàn)，還可以使您的網(wǎng)站看起來獨(dú)一無二，比其他網(wǎng)站更具吸引力。順便說一下，不要過度使用右邊的這些動(dòng)畫。否則，它可能會(huì)適得其反地影響您網(wǎng)站的性能。 

但是，我們希望我們添加和配置交互式 Lottie 動(dòng)畫的指南能幫助您在自己的網(wǎng)站上實(shí)現(xiàn)一些引人注目的 Lottie。如果您在整個(gè)配置過程中遇到任何問題，可以給我們留言。