如何在 WordPress 中使用 Lottie 動畫

[ad_1]

將動畫整合到您的 WordPress 網站中是一種讓疲倦的網頁活躍起來並讓您的訪問者在他們的網站上全程參與的好方法。 一種簡單有效的方法是使用樂天動畫:高質量、輕量級的動畫。

Lottie 動畫越來越受歡迎,原因有很多,如果您準備加入潮流並美化您的網站,它們可能適合您。

有幾種不同的方法可以創建這些動畫並將它們順利添加到您的 WordPress 網站。

什麼是樂蒂動畫?

洛蒂動畫

洛蒂 是一個適用於 Android、iOS、Web 和 Windows 的庫,用於渲染 After Effects 動畫並允許將動畫數據導出為 JSON 文件,而不是典型的 圖像文件類型. 簡而言之,他們可以輕鬆地將靜態資產替換為有趣且引人入勝的東西。

這個開源解決方案最初是由 AirBnB 的團隊引入的,但它在不同市場的設計師和動畫師中迅速流行起來。 在您的 WordPress 網站中使用 lottie 動畫的一大優勢是文件大小與 GIF 動畫或 mp4 文件相比非常小。 此外,靈活的動畫格式允許瀏覽器處理渲染。

使用樂透動畫的多種可能性是它們如此受歡迎的原因之一。 您可以將彩票動畫用作動畫標題、按鈕、醒目的圖形元素等。 您還可以將動畫設置為在訪問者滾動、懸停或單擊網頁時觸發。 它們的多功能性和易於實施的 B2C 和 B2B 網站 使它們成為一種改變遊戲規則的方式,以提高您的網頁設計的質量和整體外觀。

創建 Lottie 動畫

在考慮是否向您的網站添加彩票動畫時,您首先需要決定是採用庫存方法還是自定義方法。 每個都有其優點和缺點,因此在決定之前考慮這兩個選項是明智的。

對於任何類型的動畫,少即是多。 將動畫元素合併到 網站重新設計,考慮動畫在客戶旅程中扮演的角色。

自定義 Lottie 動畫

Adobe After Effects

如果您正在為您的網站尋找自定義的樂天動畫,您需要與專門從事動畫製作的動畫師或設計師合作 Adobe After Effects 並且熟悉這種類型的動畫。

許多樂透動畫都使用插圖風格,因此您需要先確定這是否符合網站的品牌和風格,然後再繼續使用。 一旦您決定了圖形元素和動畫效果,動畫師將需要在 Adob​​e After Effects 中創建自定義動畫,並使用 After Effects 擴展將它們導出為 lottie 動畫。 這將呈現可以輕鬆實現到您的站點的高質量動畫。

抽籤動畫質量高的一個原因是創建過程消除了開發人員或工程師以網路格式重新創建設計師動畫的任何需要。 它提供了一個即用型解決方案,使動畫實現比以往更容易。

股票樂天動畫

樂蒂文件

如果您想加快新設計的速度,股票抽籤動畫是一個不錯的選擇。 您可以查找現有的股票抽籤動畫,如果需要,可以對其進行自定義以適合您的品牌。

樂蒂文件 是一個股票網站,您可以在其中找到大量免費和付費的樂透動畫。 該網站還提供了一個編輯工具,您可以在下載前編輯動畫的顏色。 如果您需要更改動畫中的大量顏色,熟練的動畫師或設計師還可以使用 Adob​​e After Effects 更有效地進行這些更改並導齣動畫。

如果您希望在網站上實現大量動畫,或者如果您有非常特定的網站美感,那麼可能很難找到多種風格正確的股票期權。 在這種情況下,您可以考慮聘請動畫師來創建更多適合您的網站並與您已經選擇的股票期權相匹配的動畫。

對於任何類型的庫存動畫或圖形,請記住庫存動畫的許可要求,並確保在需要時將動畫貢獻給原始設計師。

在 WordPress 中添加 Lottie 動畫

將樂透動畫添加到 WordPress 網站是一個非常順利的過程。 您可以使用自定義 HTML 小部件將動畫代碼添加到站點,或使用 WordPress 插件添加動畫。

自定義 HTML 小部件

熟練的 WordPress 開發人員可以使用小型 JavaScript 庫和自定義 HTML 小部件將彩票動畫添加到站點。 您首先將 lottie.min.js 腳本連同動畫 .json 文件和任何圖像資產上傳到主題文件夾。 然後將一小段 JS 添加到小部件中以啟動 Lottie 腳本,該腳本將 .json 動畫文件載入到所需的容器 div 中。

這種簡化的方法非常適合大多數 WordPress 網站,因為它避免了使用額外的 WordPress 插件來加重網站的負擔。 在添加抽獎動畫的時候,還可以控制動畫是否循環,循環多少次,以及什麼可能觸發頁面上的動畫元素。

大多數在沒有開發人員幫助的情況下添加抽獎動畫的插件都需要 Elementor 頁面構建器,因此如果您使用的是 Elementor 以外的主題或頁面構建器插件,則自定義 HTML 方法往往會更好地工作。

在沒有插件的情況下向網站添加元素也可以更好地提高網站速度和性能,因為添加越來越多的插件會拖累網站。

WordPress 插件選項

如果您不想使用開發人員以自定義方式執行此操作,則將 lottie 小部件添加到您的站點的另一種選擇是使用 WordPress 插件。

Elementor Pro – Lottie 小部件

Elementor Pro - Lottie 小部件

Elementor 是具有拖放功能的 WordPress 頁面構建器,Elementor Pro 許可證包括 樂蒂小部件. 使用此小部件,您無需代碼即可添加抽獎動畫並自定義動畫的尺寸和行為。 該插件可以方便地與 Lottie Files 股票網站連接,因此您可以直接從該網站輕鬆選擇股票動畫選項或上傳您自己的作品。

Gutenberg Blocks – 終極插件

Gutenberg Blocks - 終極插件

如果您在您的網站上使用古騰堡編輯器, 古騰堡的終極插件插件 在插件的幫助下添加彩票動畫是一個不錯的選擇。 自 WordPress 5.0 發布以來,Gutenberg 編輯器一直是 WordPress 核心的一部分,但它並不是最受歡迎的。 許多網站仍然使用經典編輯器或其他頁面構建器,例如 Site Origin、Elementor 或 Beaver Builder,僅舉幾例。

儘管如此,這是一個可行的選擇。 The Ultimate Addons for Gutenberg 是一個備受好評的插件,並提供了許多很棒的功能,包括添加樂天動畫和控制高級選項的選項,例如動畫速度和觸發器。

其他 WordPress 插件

附加插件 可在 WordPress 目錄中添加和自定義樂透動畫。 請記住,某些插件要求您的網站是構建並使用 Elementor,例如適用於 Elementor 的 Premium Addons 和適用於 Elementor 的 Elementskit Addon。 還有一些插件適用於其他 WordPress 主題和構建器,例如 Divi 主題或 Gutenberg 塊。

是時候製作動畫了

任何擁有 WordPress 網站的人都可以輕鬆訪問 Lottie 動畫。 無論您想要自定義動畫還是股票動畫、英雄動畫還是滾動動畫,資源都在您的指尖。

您可以在希望動畫的外觀和功能方面發揮創意,當您開始探索樂透動畫的可能性時,您將開始意識到它們可以為您的網站質量增加多少.

相關文章