Lottie 基本上是一種用于矢量圖形動畫的文件格式，它在吸引訪問者注意力方面比您網站的靜態資產非常有效。它以德國剪影動畫先驅 Charlotte Lotte Reiniger 的名字命名。 Lottie 基本上是一種基于 JSON 的動畫文件，可幫助網頁設計人員在每個屏幕上顯示動畫文件

移動的元素總是能引起我們的注意。美國國家醫學圖書館出版了一本關于視覺運動和注意力捕獲之間的聯盟的期刊。根據他們的研究，運動總能有效地引導我們的注意力。

如果您想在您的網頁上獲得更多關注，請在此處添加一些移動對象。因此，客戶更有可能迷上您的網頁。但真正的問題來了；您如何吸引訪客的注意力？

很簡單，使用Lottie動畫！ 

Lottie 在吸引訪問者注意力方面比您網站的靜態資產更有效。這就是為什么我們要告知您將交互式 Lottie 動畫添加到您的 Joomla 網站的整個過程。

什么是 Lottie 動畫

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

Lottie 基本上是一種基于 JSON 的動畫文件，可幫助網頁設計人員在每個屏幕上顯示動畫文件。這些小動畫文件適合任何沒有像素化的屏幕。但是，如果我們想談論發展，Bodymovin 是我們必須在這里討論的第一件事。

由于Bodymovin，Lottie 文件的開發終于成為可能。它是由 Hernan Torrisi 開發的 Adobe After Effect 插件。此插件可以將 Adobe After Effects 動畫導出為 JSON 格式。當網頁設計師在他們的網站上實現這些 JSON 文件時，他們會在屏幕上看到那些美麗的 Lotties！

在哪里可以免費找到交互式 Lottie 動畫

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

盡管 Lottie 動畫看起來創建起來有多么復雜，但它們實現起來非常簡單。因為網上有大量免費和現成的 Lottie 動畫。在那里搜索您喜歡的 Lottie 動畫，獲取 JSON 文件，然后在您的網站上使用它。 

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

• 瀏覽 com
• 將鼠標懸停在“發現”菜單上
• 從下拉菜單中單擊免費的即用型動畫

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

如何添加和配置交互式 Lottie 動畫

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

先決條件

您只需要兩件事就可以設計出獨一無二的 Joomla 網頁。

• SP 頁面生成器專業版
• 對網站的管理員訪問權限

第 1 步：創建新頁面或文章

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

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

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

第 2 步：選擇放置區域

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

如您所見，那里已經有 10 個預定義的列布局。選擇最適合您文章結構的一種。但是，您也可以使用自定義列框生成自定義列布局。我們在文章中選擇4+4+4布局。

第 3 步：使用 Lottie Addon

現在是時候使用 Lottie 插件了。設置列布局后：

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

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

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

第 4 步：獲取 Lottie 動畫 URL

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

正如我們之前提到的，Lottiefiles 有數以千計的免費 Lottie 動畫可供選擇。只需選擇一個好的 Lottie，然后單擊它。您將在動畫下方獲得 Lottie 動畫 URL。

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

現在，點擊 Lottie 部分，它會顯示 Lottie 設置欄。單擊此處的 Lottie 插件圖標。它將打開 Lottie 設置模式彈出窗口。從那里選擇外部 URL選項作為文件源，并將您的 URL 粘貼到 Lottie URL 框中。

就是這樣！

如果您正確執行了前面的步驟，您現在可能會預覽所選的 Lottie 動畫。 

第 5 步：配置 Lottie 的設置

好吧，你現在可能有點困惑。因為即使您已正確完成所有操作，動畫文件也不會移動！它看起來像靜態圖像，對吧？

不用擔心！一切都很好。在這一步中，我們必須調整一些設置來控制所選動畫文件的行為。

為此，請再次打開 Lottie 設置模式彈出窗口。然后啟用自動播放和循環選項。顧名思義，啟用這些選項將使動畫連續移動。

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

• 模式- 它指示動畫何時開始移動。 
• 播放速度- 它決定動畫的速度。默認速度為 1。
• 起點- 起點表示動畫開始的時間。
• 終點- 就像起點一樣，它表示 Lottie 動畫的結束時刻。
• 方向- 您可以從這里控制是向前還是向后播放動畫。 

這些是 SP Page Builder 的附加配置選項。但是，如果您需要調整 Lottie 動畫的尺寸，您可以從“大小”選項卡進行調整。您可以為 Lotties 設置合適的高度和寬度。

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

第 6 步：預覽最終版本

我們在 Joomla 網站上添加和配置交互式 Lottie 動畫的旅程到此結束。

添加 Lottie 動畫的額外提示 

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

以下是添加 Lottie 動畫時必須考慮的一些重要事項。 

不要使用太多Lottie動畫

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

保持品牌顏色的一致性

您必須在整個網站上保持顏色的一致性。它是您品牌標識的重要組成部分。但是，這并不意味著您不能使用不同顏色的動畫。如今，大多數 Lottie 動畫提供者都具有為該動畫應用不同調色板的功能。只需應用您的品牌調色板并提高您的品牌知名度。

注意 Lottie 放置

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

• 折疊區域上方
• 圖片畫廊
• 產品功能部分
• 聯系表
• 購買確認頁面
• 404頁等

這些是 Lottie 動畫最適合的最常見頁面。雖然這個位置完全取決于您的業務和網站設計，但請確保您沒有放錯位置。 

確保 Lotty 的像素完美布局

在現有文章中放置動畫時，請確保它與現有欄布局保持一致。否則，不僅破壞了設計模式，而且整個網頁的設計也會變得不一致。總的來說，它會對用戶體驗產生負面影響。

總結

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

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