介紹 Kadence Lottie Block
已發表: 2022-02-10Kadence 團隊很高興推出 Lottie Block，這是 Kadence Blocks 版本 2.2.4+ 中可用的新塊。 這個新塊為使用 Kadence Blocks 的網站所有者提供了向其網站添加高質量和低帶寬動畫的新機會。 Kadence Blocks 2.2.4 還引入了新的向上計數塊，將動畫向上或向下計數添加到特定值。
Lottie Animations 為動畫帶來新機遇
網站上的動畫具有令人難以置信的力量來吸引觀眾並引起人們對轉換目標的關注，但以前添加動畫的技術通常伴隨著低質量的視覺體驗和大文件大小。 從 GIF 動畫到 Adobe Flash 再到各種視頻格式，以前的動畫技術帶來的問題多於其價值。
Airbnb 的開發人員創造了一種名為 Lottie 的新技術，它可以提供高質量的動畫，而不會產生高帶寬的開銷。 開發後，這些開發人員將他們的創作開源。 Lottie 文件不僅是開源的、體積非常小、質量高，而且它們也是交互式的，可以在運行時進行操作。 根據 LottieFiles 的說法，“iOS App Store 上排名前 500 的應用程序現在使用 Lottie 來吸引用戶並提高轉化率。”
現在有了 Kadence Blocks 中的 Kadence Lottie Block，WordPress 網站所有者能夠使用動畫為網站訪問者創造更好、更具吸引力的體驗。
什麼是洛蒂？
Lottie 以德國電影導演 Lotte Reiniger 的名字命名。 Reiniger 是剪影動畫最重要的先驅，以 1926 年發行的《艾哈邁德王子歷險記》而聞名。這是現存最古老的長篇動畫電影，比沃爾特·迪斯尼的長篇《白雪公主與七個小矮人》（1937 年）早了十多年.
Lottie 是一種基於 JSON 的文件格式，允許任何人使用 Kadence Blocks 將動畫添加到 WordPress 站點。 Lottie JSON 文件是一個適用於台式機、平板電腦和移動設備的小文件。 Lottie 動畫可以輕鬆放大或縮小，而不會在以前的動畫或圖形文件中看到像素化。
尋找 Lottie 動畫
LottieFiles.com 是 Lottie 所有事物的絕佳資源。 無論您是在尋找可以作為遠程 URL 加載或下載以在本地站點上使用的免費 Lottie 動畫，LottieFiles 都有許多免費文件可供選擇。 您還可以了解有關創建自己的 Lottie 動畫的更多信息，訪問 After Effects 插件、Figma 插件，或者在市場上找到可以為您創建自定義 Lottie 文件的動畫師。 您甚至可以使用 LottieFiles 上的工具為動畫添加交互性。
使用 Lottie 塊
Kadence Lottie Block 使用免費的 Kadence Blocks 插件添加到您的站點，該插件可從 WordPress.org 存儲庫免費獲得。 只需更新到最新版本的免費 Kadence Blocks 插件，您的站點就可以使用 Lottie Block。 您可以在任何可以使用任何其他塊的地方使用 Lottie 塊，包括在帖子內、頁面上，甚至在構建 Kadence Elements 模板時。 您甚至可以將 Lottie 塊添加到 Kadence 轉換彈出窗口/模式，或滑入。
使用 Lottie Block 很簡單。
選擇 Lottie Block 後，您將立即看到來自 LottieFiles.com 的 WordPress 佔位符 Lottie Block 動畫
遠程 Lottie 文件
如果您想使用遠程 URL 替換佔位符，只需替換Lottie Animation URL字段中的條目。 這將從另一台服務器上的遠程位置提取 Lottie 文件。
您可以在 LottieFiles.com 上的每個動畫的詳細信息頁面上找到遠程 Lottie 文件 URL。
本地 Lottie 文件
如果您想使用本地文件，請在“文件源”下拉列表中選擇“本地文件”。
點擊上傳 Lottie 文件。 然後系統會提示您從硬盤上傳 JSON Lottie 文件。 首先，為Animation title輸入一個熟悉的名稱。 上傳 JSON Lottie 文件後，您將能夠從任何提供 Kadence Blocks 的帖子或頁面訪問該文件，這個熟悉的名稱將幫助您確定您選擇的文件。
接下來，單擊瀏覽。 這會將您帶到您的文件系統以查找您要上傳的 JSON 文件。 單擊上傳，您的圖像將出現在 Kadence Lottie 塊中。 整個 WordPress 站點的 Kadence Lottie Block 也可以使用它。
樂天可訪問性
對於屏幕閱讀器和其他替代瀏覽器，請在Aria 標籤字段中添加動畫描述以方便訪問。 （Aria 標籤類似於圖像 alt 標籤。）
Lottie 塊中可用的設置
Kadence Lottie Block 提供了許多設置，用於控制 Lottie 動畫在您的網站上的顯示方式。
顯示控件
如果您想讓您的用戶控制動畫以啟動/停止動畫，您可以將其打開。
自動播放
如果您希望在用戶加載您的頁面時自動播放動畫，請將其打開。
只在懸停時播放
當用戶將鼠標懸停在動畫上時，如果打開此選項，您的動畫將播放。 如果您想鼓勵您的用戶採取行動，這很有用。
僅在頁面滾動時播放
您的動畫只會在用戶滾動時播放。 請注意，這將覆蓋大多數設置，例如自動播放、播放速度、反彈、循環和懸停播放。 在塊編輯器中預覽時，這將不起作用。
播放速度
您可以確定動畫播放的快慢。
循環控制
有兩個主要的循環控制：循環播放和彈跳播放。 循環播放會重複播放動畫，反彈播放會播放動畫，然後反向播放。 您還可以設置（以秒為單位）循環播放的延遲，以及限製播放給用戶的循環數量。
尺寸控制
大小控件的工作方式與其他塊大致相同。 您可以通過每個變量（左、右、頂部和底部）設置 Lottie 塊周圍的填充和邊距，或者單擊框以鏈接邊距設置或填充設置。 您還可以設置 Lottie 塊的最大寬度以快速調整 Lottie 動畫的大小。
在任何可以使用積木的地方使用 Kadence Lottie 積木
在您使用積木的任何地方使用 Kadence Lottie Block。 它在 Kadence Blocks 的免費版本中可用。
如果您已經在使用 Kadence Blocks Pro、Kadence Conversions 或 Kadence Theme Pro 插件，您可以開始將 Lottie Block 添加到您已經使用塊的任何區域。
例如，如果您將 Kadence Elements Templates 用作 Kadence Theme Pro 的一部分並想在頁腳中添加 Lottie Block，您可以輕鬆地做到這一點。 只需前往您的Kadence > Elements > Template找到您的頁腳模板，然後在此處添加 Lottie Block。 例如，請參閱最近的一篇文章，介紹如何使用 Kadence 元素模板將 Lottie 動畫添加到頁腳。
如果您將 Kadence Conversions 用於彈出式/模態或滑入式，並且您想將 Lottie Block 添加到您網站上使用的轉換項，您可以以相同的方式添加它。 只需像往常一樣使用積木，並為您的 Kadence 轉換項目自定義 Lottie 積木。
動畫可用性資源
WordPress 網站上的動畫是非常強大的工具，可讓您吸引註意力並吸引觀眾。 當然，權力越大，責任越大。 有一些資源可用於了解動畫的最佳實踐，我們建議查看網絡動畫的可用性最佳實踐。 Nielsen Norman Group 提供了一些很棒的指南：Animation for Attention and Comprehension 以及 Animation and Motion 在 UX 中的作用。
使用您對動畫可用性的研究來幫助指導您的轉換目標。 這樣做，您可以添加動畫，幫助您的用戶獲得他們正在尋找的內容，同時您還可以滿足您的營銷目標。 動畫是創造令用戶滿意的體驗的出色工具，Kadence 很高興將這一創新工具帶給使用 Kadence Blocks 的超過 200,000 名用戶使用 WordPress 創建卓越的用戶體驗。
Kadence 不斷創新
Kadence Lottie Block 只是來自 Kadence 團隊的最新創新。 在免費的 Kadence Blocks 插件中可用，當您更新到 2.2.4 或更高版本時，您會看到 Kadence Lottie Block。
要獲得 Kadence 提供的所有功能，我們建議您使用 Full Bundle。 隨著新產品和功能的添加，它們將被添加到完整捆綁包中，因此您將始終可以訪問最新的 Kadence 創新。