将动画集成到您的 WordPress 网站是让疲惫的页面充满活力并让访问者在整个网站旅程中保持参与的好方法。一种简单有效的方法是使用乐天动画:高质量、轻量级的动画。

Lottie 动画越来越受欢迎的原因有很多,如果您准备加入潮流并美化您的网站,它们可能适合您。

有几种不同的方法可以创建这些动画并将它们顺利地添加到您的 WordPress 网站。

什么是乐天动画?

Lottie是一个适用的库适用于渲染 After Effects 动画并允许将动画数据导出为 JSON 文件而不是典型图像文件类型的 Android、iOS、Web 和 Windows。简而言之,它们使用有趣和引人入胜的东西替换静态资产变得容易。

这个开源解决方案最初是由 AirBnB 的团队推出的,但很快在不同市场的设计师和动画师中流行开来。在您的 WordPress 网站中使用 lottie 动画的一大优势是,与动画 GIF 或 mp4 文件相比,文件大小非常小。此外,灵活的动画格式允许浏览器处理渲染。

使用乐透动画的多种可能性是它们如此受欢迎的原因之一。您可以将彩票动画用作动画标题、按钮、引人注目的图形元素等。您还可以将动画设置为在访问者滚动、悬停或单击网页时触发。它们在 B2C 和 B2B 网站上的多功能性和易用性使其成为一种改变游戏规则的方式,可以提高您的网页设计的质量和整体外观。

创建 Lottie 动画

在考虑是否将彩票动画添加到您的网站时,您首先需要决定是使用库存方法还是自定义方法。每个都有其优点和缺点,因此在决定之前考虑这两个选项是明智的。

对于任何类型的动画,少即是多。考虑到动画在客户旅程中所扮演的角色,将动画元素融入网站重新设计中。

自定义Lottie动画

/ p>

如果您正在为您的网站寻找自定义 Rakuten 动画,您将需要与专门从事 Adob​​e After Effects 动画并熟悉此类动画的动画师或设计师合作。

许多乐透动画都使用插图风格,因此在继续之前,您需要确定这是否符合您网站的品牌和风格。一旦决定了图形元素和动画效果,动画师就需要在 Adob​​e After Effects 中创建自定义动画,并使用 After Effects 扩展将它们导出为 lottie 动画。这会呈现可以轻松实现到您的站点中的高质量动画。

绘制动画的高质量的一个原因是创建过程消除了开发人员或工程师以 Web 格式重新创建设计师的动画的任何需要。它提供了一个随时可用的解决方案,使动画比以往任何时候都更容易。

现货乐天动画

如果您想加快新设计的速度,库存绘制动画是一个很好的选择。您可以找到现有的库存抽取动画,如果需要,可以自定义它们以适合您的品牌。

Lotty Files 是一个股票网站,您可以在其中找到大量免费和付费的乐透动画。该网站还提供了一个编辑工具,您可以在下载前编辑动画的颜色。如果您需要更改动画中的大量颜色,熟练的动画师或设计师也可以使用 Adob​​e After Effects 进行这些更改并更高效地导出动画。

如果您希望在您的网站上实现大量动画,或者如果您有非常特定的网站审美,则可能很难找到风格合适的各种股票期权。在这种情况下,您可以考虑聘请动画师来制作更多适合您的网站并与您已选择的股票期权相匹配的动画。

对于任何类型的库存动画或图形,请牢记库存动画的许可要求,并确保在需要时将动画回馈给原始设计师。

在 WordPress 中添加 Lottie 动画

将 lottie 动画添加到您的 WordPress 网站是一个非常顺利的过程。您可以使用自定义 HTML 小部件将动画代码添加到您的站点,或使用 WordPress 插件添加动画。

自定义 HTML 小部件

熟练的 WordPress 开发人员可以使用小型 JavaScript 库和自定义 HTML 小部件将彩票动画添加到站点。您首先将 lottie.min.js 脚本与动画 .json 文件和任何图像资产一起上传到主题文件夹。然后在widget中添加一小段JS启动Lottie脚本,将.json动画文件加载到需要的容器div中。

这种简化的方法非常适合大多数 WordPress 网站,因为它避免了使用额外的 WordPress 插件给网站带来负担。添加抽奖动画时,还可以控制动画是否循环、循环多少次,以及哪些元素可能触发页面上的动画元素。

大多数在没有开发人员帮助的情况下添加抽奖动画的插件都需要 Elementor 页面构建器,因此如果您使用的是 Elementor 以外的主题或页面构建器插件,则自定义 HTML 方法往往效果更好。

在没有插件的情况下向网站添加元素也有利于网站速度和性能,因为添加越来越多的插件会拖累网站。

WordPress 插件选项

将 lottie 小部件添加到您的网站的另一种选择是使用 WordPress 插件,如果您不想使用开发人员以自定义方式进行操作的话。

Elementor Pro – Lottie Widget

Elementor 是一个具有拖放功能的 WordPress 页面构建器,Elementor Pro 许可证包括一个彩票小部件。使用这个widget,你可以在没有代码的情况下添加一个抽奖动画,并且可以自定义动画Behavior的尺寸大小。该插件方便地与 Lottie Files 库存网站连接,因此您可以轻松选择库存动画选项或直接从该站点上传您自己的作品。

Gutenberg Blocks – 终极插件

如果您在网站上使用 Gutenberg 编辑器,Ultimate Plugin for Gutenberg 插件是一个很好的选择,可以借助该插件添加彩票动画。自 WordPress 5.0 发布以来,Gutenberg 编辑器一直是 WordPress 核心的一部分,但它并不是最受欢迎的。许多网站仍在使用经典编辑器或其他页面构建器,例如 Site Origin、Elementor 或 Beaver Builder,仅举几例。

不过,这是一个可行的选择。 Gutenberg 的 Ultimate Addons 是一个广受好评的插件,提供了许多很棒的功能,包括添加 Rakuten 动画和控制动画速度和触发器等高级选项的选项。

其他 WordPress 插件

在 WordPress 目录中还有其他插件可以添加和自定义乐透动画。请记住,某些插件需要您构建站点并使用 Elementor,例如 Elementor 的 Premium Addons 和 Elementor 的 Elementskit Addon。还有用于其他 WordPress 主题和构建器的插件,例如 Divi 主题或 Gutenberg 块。

是时候制作动画了

拥有 WordPress 网站的任何人都可以轻松访问 Lottie 动画。无论您想要自定义动画还是库存动画、英雄动画或滚动动画,资源都触手可及。

您可以对动画的外观和功能发挥创意,当您开始探索 lotto 动画的可能性时,您将开始意识到它们可以为您的动画质量增加多少网站。