如何在WordPress中插入Lottie动画？

GIF是在包括WordPress在内的任何网站创建平台中插入动画图像的标准方式。

然而，最新的趋势是插入Lottie动画，将有吸引力的互动元素显示为图像。虽然您可以使用SVG来实现可扩展性，但Lottie允许对您的动画进行更多控制。

如果您想知道Lottie是什么以及如何在WordPress中插入它们，这里有一些可参考的选项。

Lottie是一种基于JSON的文本文件格式，可用于在iOS、Android和任何Web平台中插入动画。这是由Airbnb工程师开发的，用于将Adob??e After Effects动画文件导出为JSON格式并进行原生渲染。以下是使用Lottie动画的一些优点：

这是一种文件大小非常小的开源格式。
带有运行时控件的文本文件格式。
可以轻松从普通GIF中脱颖而出的交互式动画。
可扩展、高质量并且像静态图像一样工作。

大多数免费块插件都提供了一个Lottie动画区块来在WordPress中插入动画文件。例如，您可以为此使用Ultimate Addons for Gutenberg（现在更名为Spectra）或Kadence区块插件。在这里，我们将解释这两个插件在WordPress网站中插入Lottie动画。

从WordPress存储库安装并激活“Kadence Blocks – Gutenberg Blocks for Page Builder Features”插件。这是一个免费插件，用于在Gutenberg编辑器中添加带有自定义控件的附加区块。

我们建议将此插件用于Lottie动画，因为它会为您在网站上插入的每个动画创建一个可重复使用的块作为自定义文章类型。此外，Kadence区块将允许为Lottie动画上传JSON文件，这在WordPress中默认不支持。

激活插件后，创建新文章或编辑要插入Lottie动画的文章。
键入/lottie以查找并插入“Lottie Animations”区块。

使用Kadence插入Lottie动画区块

该插件将插入一个示例动画文件，您可以在块的侧边栏中看到大量控件。

Kadence中的Lottie动画区块设置

在Kadence中自定义Lottie动画

区块设置在以下部分中可用：

源文件– 您有两个选项可以从远程文件粘贴URL或上传您的自定义JSON文件。如果您没有自己的文件，请查看本文最后一节以了解如何获取免费的Lottie动画文件。选择“本地文件”作为“文件源”以查看一个下拉列表，其中显示了您网站中所有以前创建的动画。您可以选择其中一个或上传要插入的新项目。您在此处提供的标题将用作可重复使用的Lottie动画块的名称。

上传JSON Lottie文件

播放设置– 在此部分下，您可以控制动画的行为并设置它在网站上的播放方式。您可以显示播放/暂停按钮，启用自动播放并允许动画仅在悬停或页面滚动时播放。也可以将动画设置为循环播放并调整循环之间的延迟。

Lottie动画的播放设置

尺寸控制——此设置允许您设置填充、边距和宽度以更改整体尺寸。您可以使用这些选项来适应和对齐内容区域上的动画。

Lottie动画区块的大小控制设置

高级– 这是Gutenberg为元素分配自定义CSS类的默认选项。

完成后，在页面上添加其他内容并点击“发布”按钮以查看Lottie动画的实际效果。

管理Lottie区块

转到“设置 > Kadence Blocks”菜单，然后单击“Lottie Animations”框下的“Manage Lottie Animations”。这会将您带到可以在一个地方查看所有Lottie动画的页面。如您所见，您在Gutenberg编辑器中插入的每个动画实际上都存储为自定义文章类型，名称为“kadence_lottie”。您还可以通过单击“添加新”按钮从此处创建新动画。这些是可重复使用的块，您可以通过搜索它们的名称将它们插入到您网站的任何位置。

在Kadence中管理可重复使用的Lottie区块

如果您正在使用Astra主题或Kadence区块由于任何原因无法正常工作，那么替代选项是使用Ultimate Addon for Gutenberg插件（称为Spectra）。它提供了类似的Lottie Animation区块，但功能有限。激活插件后，转到“设置> UAG”部分并激活“Lottie”选项。确保单击“Regenerate Assets”按钮并清除缓存以使更改生效。