×

介绍下实现WordPress 动画网站的最简单方法:BeBuilder + Lottie

作者:Web前端之家2022.05.11来源:Web前端之家浏览:156评论:0
微信公众号

微信公众号

500.jpg

动画不像其他来来去去的网页设计趋势。在过去的几年里,这种趋势已经证明它在改善用户体验方面是多么有用。从参与到娱乐,网站上的动画可以做很多事情。

网页设计师目前有多种方法可以为 WordPress 网站制作动画,例如 CSS 动画和嵌入式 GIF。那么,为什么 BeTheme 在其 BeBuilder 中添加了新的 Lottie 动画功能?

与其他方法相比,使用 Lottie 创建动画有很多优点。在这篇文章中,我们将探讨为什么 Lottie 是当今创建有吸引力和引人入胜的动画的最佳方式,以及它与BeBuilder和BeBuilder的集成如何使 WordPress 用户更容易访问它。

为什么 Lottie Animation 是动画 WordPress 网站的最佳方式

Lottie 是为您的 WordPress 网站创建动画的最新、最有效的方法之一。究竟是什么让它比其他动画方法更好?让我们来看看 Lottie 动画的核心优势。

1. 无需代码即可使用 Lottie

看它你永远不会知道,但你不必编写一行代码来创建 Lottie 动画。例如,这是BeLottie预建网站上 Lottie 动画的样子。你可以打开这个地址:https://themes.muffingroup.com/be/lottie/  去看看首页动画。

对于初学者,您无需了解如何使用 Adobe After Effects 创建或编辑 Lottie 动画文件。您可以从LottieFiles【https://lottiefiles.com/】和IconScout【https://iconscout.com/】等来源获得预制的 Lottie 动画。

一旦你有了 Lottie 动画,BeBuilder 就可以很容易地将它们添加到你的 WordPress 网站中。

image.png

只需从 UI 元素列表中找到 Lottie 元素。将其拖放到可视化构建器中。然后,使用左侧的内容设置将 Lottie 文件上传到您的 WordPress 媒体库或从外部链接中提取动画。

无需学习 HTML、CSS 或 After Effects 即可为 WordPress 创建高级动画。BeBuilder的无代码页面构建器和 Lottie 动画功能使设计师和非设计师都可以使用直观的工具轻松创建动画。

2. Lottie 动画易于定制

您可能想要自定义 Lottie 动画的原因有很多。首先,您希望动画与您网站的品牌相匹配。

如果您从 LottieFiles 获得 Lottie,它带有一个编辑器,可让您自定义:

  • 动画速度

  • 背景颜色

  • 图层颜色

  • 交互性

image.png

因此,您可以直接从源代码编辑 Lottie 动画的内容。

此外,您可以使用 BeBuilder 的设置来自定义 Lottie 动画的工作方式。例如,您可以调整与以下相关的设置:

  • 动画触发器

  • 起点和终点

  • 前进或后退方向

  • 结盟

  • 背景

  • 响应可见性

Lottie 变得与 BeTheme 中的所有其他 UI 元素一样易于编辑。

3. Lottie 性能更好

有时,当我们为网站制作动画时,我们必须以牺牲其他东西为代价。

例如,一些动画方法是资源密集型的,会导致网页加载速度比其他方法慢。其他动画方法可能会导致出现故障或颗粒状的动画,从而影响网站的整体外观。

Lottie 是一个基于 JSON 的动画文件。它与 SVG 很像,两者都是矢量文件格式——尺寸和重量都很小,同时也完全可扩展。这使得 Lottie 成为理想的性能动画文件格式。

让我们看一个简单的例子。这是免费资源网站上提供的 JPG“下载”按钮。

在 LottieFiles 上可以找到一个类似设计的按钮,只是它是动画的。效果地址:https://lottiefiles.com/4342-download-button


这两个文件之间的区别超出了美学。Vecteezy 的 JPG 为 57KB。LottieFiles 的 JSON 为 15KB。

当然,其他因素会影响文件的大小,例如输出大小。然而,这些是相似的图形,尽管 Lottie 中有动画,但它的重量要轻得多。

此外,Lottie 与WordPress 最快的页面构建器BeBuilder无缝集成。因此,当您将两者一起使用时,您不必担心缓慢的主题或页面构建器插件会干扰 Lottie 的本机速度和质量。

4. Lottie 反应灵敏

尽管 BeBuilder 为用户提供了在某些设备上隐藏其 Lottie 元素的选项,但您无需使用此设置。

Lottie 文件是基于矢量的,这意味着它们可以缩放到任何尺寸的屏幕。例如,假设我们在BeFoodTruck 2的主页中嵌入了一个步行 ta

当我们打开响应模式并将视图从桌面切换到平板再到移动时,动画文件会相应地响应新的屏幕尺寸。您无需调整即可调整 Lottie 的大小或重新定位。

考虑到响应式设计对当今品牌和消费者的重要性,Lottie 是响应式设计中非常有用的动画工具。当您将它与 BeTheme 的响应式预建网站以及 BeBuilder 的响应式页面构建器配对时,您将拥有完整的 WordPress 响应式强大功能。

5. Lottie/BeTheme 组合提升了用户体验

步行 taco 动画肯定很有趣,但我们可以用动画做更多的事情,而不仅仅是娱乐游客。通过对微动画进行编程以在正确的地点和正确的时间响应访客,我们可以激励他们采取行动。

让我们以BeCarRental3网站上的号召性用语块为例。

打开地址:https://themes.muffingroup.com/be/carrental3/

在“客户友好型公司”字样旁边有一个绿色汽车/笑脸图标,就在号召性用语按钮上方。虽然这个信任标记很醒目,但一些访问者可能会滚动过整个静态部分而太快而没有注意到它。

您可以做的是向该部分添加动作。一种选择是将Book a car按钮换成动画 Lottie。这个微动画会直接将访问者的注意力吸引到按钮上,并让更多人停下来考虑“预订汽车”的邀请。

另一种选择是用滚动触发的 Lottie 图形替换信任标记。

在这里,我们看到当汽车保险提供加载页面动画【https://lottiefiles.com/93387-car-insurance-offers-loading-page】被重新用于我们的号召性用语块时会发生什么。

与 Lottie 循环播放不同的是,动画会放慢速度并与游客的动作同步移动。我们可以通过更改 BeBuilder 内部的一个设置,将Trigger从default更新为on scroll来做到这一点。

虽然按钮保持不变,但在此部分添加移动 - 并直接位于按钮上方 - 将有助于增加参与度。

Lottie 动画只是让 BeTheme 成为您首选 WordPress 主题的另一个原因

在网站动画方面,Lottie 是一个重要的游戏规则改变者。这只是靠它自己。

当您将 Lottie 与BeTheme【https://be-theme.com/】和BeBuilder【https://be-theme.com/be-builder】集成时,您将拥有将您的设计和用户体验提升到新水平所需的所有工具。此外,您无需增加成本、启动时间或为 BeTheme 网站制作动画所需的工作量。一切都尽可能为您提供直观和无缝的体验。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/BeBuilderLottie.html

网友评论文明上网理性发言已有0人参与

发表评论:

最新留言

  • sasa

    谢谢,刚好遇到,解决了。...

  • steven

    现在不是都在搞windows11了吗?...

  • 2sdf

    不错啊...

  • 啊啊啊

    你给我低调点好吧...

  • 啊啊啊

    靠北啊...

  • 啊啊啊

    方法描述concat()连接两个或更多的数组,并返回结果。join()把数组的所有元素放入...

  • 访客

    阿斯顿...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2