动画师评论：点击式 WordPress 动画插件（无代码）

想要为您的 WordPress 网站添加醒目的滚动和基于时间的动画吗？

如果您是 CSS 专家，您可以自己设置这些动画。 但是对于我们其他人来说，WordPress 并没有提供任何简单的方法来向内容添加动画。

Animator 是来自 CSS Hero 团队的一个新的独立插件，它改变了这一点，让您可以访问一个简单的点击界面来在您的 WordPress 网站上设置所有不同类型的动画，无论您使用的是本机编辑器还是页面构建器插件。

如果您不是技术人员，这使您仍然能够在您的网站上设置动画。 即使您能够编写自己的 CSS，Animator 仍然可以通过其界面加快您的工作流程。

在我们的 Animator 实践评论中，我们将更深入地了解这个插件提供的功能，并向您展示如何使用它来设置 WordPress 动画。

动画师评论：插件提供什么？

Animator 的高级好处是它可以让您向站点添加大量不同的动画，而无需任何 CSS、JS 或其他深入的技术知识。

相反，您可以通过点击界面完成所有操作，并配有动画时间轴来帮助您控制动画。

Animator 与流行的 CSS Hero 插件来自同一个团队，如果您熟悉的话。 简而言之，Animator 之于动画就像 CSS Hero 之于一般的 CSS 样式。

让我们更详细地介绍一些最重要的功能。

点击界面

为了帮助您管理动画，Animator 提供了一个简单的点击界面。

有两个主要部分：

1. 您网站的全宽视觉预览– 添加动画时，您可以立即在实时预览中看到它们的外观。 这非常方便，您可以进行小幅调整，而无需不断重新加载单独的预览。
2. 动画时间线——您可以使用时间线根据用户的滚动行为或时间设置一个或多个动画。 您可以四处拖动并调整设置以获得完美的效果。

您将在动手操作部分更详细地了解该界面……但总的来说，它非常易于使用。

3+ 具有大量动画属性的高级动画模式

为了帮助您设置动画，Animator 提供了三种高级模式：

• 视差——基于元素在视口中的百分比位置的“补间”动画。 Tween 是 inbetween 的缩写——这里的基本思想是它可以让你创建视差滚动效果。
• 滚动——在用户滚动特定数量的像素后触发特定的 CSS 样式或动画。 例如，当用户向下滚动页面时，您可以将特定于状态的样式应用于页眉。
• 定时– 创建按设定时间表发生的基于时间的动画。 例如，为元素添加浮动动画，使其弹出。

以下是 Animator 中的一些通用示例，展示了不同的动画模式：

除了高级动画模式之外，您还可以为大量 CSS 属性设置动画，包括以下内容：

• 背景颜色
• 背景位置
• 框影
• 字体大小
• 字母间距
• 不透明度
• 看法
• 旋转 X、Y 或 Z
• 规模
• 倾斜 X 或 Y
• 宽度
• …更多

为了简化事情，Animator 包含了很多这样的预设：

但是，您也可以选择创建自己的动画，这样您就可以在需要时超越这些预设。

与本机编辑器、主题和页面构建器一起使用

除了与本机 WordPress 编辑器一起使用外，Animator 还与第三方主题和页面构建器插件一起使用。

这包括但不限于以下工具：

• 元素者
• 海狸生成器
• 迪维
• WPBakery 页面生成器
• 阿瓦达
• 阿斯特拉
• 氧

基本上，Animator 应该在您网站上的任何元素上工作，无论该元素来自何处。

例如，也许您喜欢 Beaver Builder 的设计，但您觉得 Beaver Builder 的动画选项对于您的需求来说太有限了。

通过将 Animator 与 Beaver Builder 一起安装，您将能够为您的 Beaver Builder 设计添加更多高级动画。

手动编辑或导出动画（适用于更高级的用户）

虽然 Animator 的构建是为了让非技术用户可以使用点击界面创建动画，但如果您想直接进行编辑，更高级的用户可能会欣赏 Animator 仍然允许您访问底层代码。

如果需要，您还可以导出应用程序数据。

完全独立的插件

虽然 Animator 确实来自 CSS Hero 团队，但您无需安装 CSS Hero 即可使用 Animator。

也就是说，Animator 是一个完全独立的插件。

话虽这么说，Animator 仍然可以很好地与 CSS Hero 配合使用，因此如果您希望以无代码的方式控制您网站的样式，您可以完全自由地使用这两者。

如何使用 Animator 插件创建 WordPress 动画

现在您了解了 Animator 提供的功能，让我们深入了解在您的网站上实际使用 Animator 的感觉。

下面，我将逐步向您展示如何使用 Animator 以及我使用 Astra 主题和本机 WordPress 编辑器创建的演示站点来设置 WordPress 动画。

1.在要动画的页面打开Animator界面

首先，您需要在包含要制作动画的内容的页面上打开 Animator 界面。

如果您想为全站元素（如页眉）设置动画，您只需打开包含页眉的任何页面即可。 您设置的任何动画都将自动应用于该标头的所有实例。

要启动 Animator 界面，您只需在查看相关页面时单击 WordPress 工具栏上的Hero Animator选项。

2. 选择你想要动画的元素

打开 Animator 界面后，您应该会看到页面的可视化预览，以及底部的 Animator 界面。

首先，您需要通过在实时预览中单击元素来选择要制作动画的元素。

当您将鼠标悬停在实时预览上时，Animator 将显示有关每个元素的一些附加信息，这有助于您选择正确的元素。

例如，要在我的测试设计中对图像进行动画处理，我只需要选择它：

您还可以手动输入 CSS 类或 ID，这对于某些背景图像可能是必需的。

例如，我很难使用点击方法在我的测试站点上选择英雄图片。 这似乎与 Astra 演示站点如何在其特殊容器块中将图像设置为容器背景有关，因为我没有遇到使用点击选择任何其他图像的问题。

3. 选择你的动画模式

选择要设置动画的元素后，您希望使用“相对于”框选择动画模式。

同样，您有三个选择：

1. 视口高度（又称视差）
2. 滚动像素
3. 时间

你基本上是在做一个声明性的陈述——例如“我想为[这个元素]设置相对于[这个动画模式]的动画”。

对于此示例，我已将其设置为相对于循环计时器为我的站点图像设置动画。

注意——您可以向单个元素添加多种类型的动画。 例如，您可以同时添加基于时间的动画和视差动画（视口高度）。

4. 使用时间轴设置动画

现在您已经选择了要制作动画的内容，您已经准备好使用时间轴实际设置动画。

为此，请单击加号图标以添加动画：

这将打开一个弹出窗口，其中包含您可以在该动画模式下使用的不同类型的动画。

例如，对于基于时间的动画，一些预设选项包括：

• 弹跳
• 坠落
• 漂浮
• 字母空间模糊
• 跑马灯
• 暗影脉冲
• 收缩跳跃
• 简单旋转

您可以看到该动画可能看起来的动画预览，这对于选择正确的动画非常有用。

如果您想制作不在预设列表中的不同类型的动画，您也可以创建自己的动画类型。

当您选择动画时，它会显示在时间轴上。 动画也将应用于实时预览，因此您可以准确地看到它在您网站上的样子。

对于基于时间的动画，当动画完成时，您会看到一条线在时间轴栏中移动，这非常方便。

如果您想使动画变长或变短，只需拖动时间轴上的条即可。

您还可以单击三点图标以访问更高级的设置，例如是否循环动画（如果是，循环多长时间）。

如果要添加多个动画，可以重复这些步骤来添加不同的动画。

然后您可以在时间轴上安排这些动画以达到您想要的效果。

如果您想使用多个基于时间的动画，请确保关闭无限循环。

您也不限于创建相同类型的动画。 例如，您可以在技术上将基于时间和基于滚动的动画添加到同一元素。

对于视差滚动元素，Animator 还允许您控制 LERP（线性插值）以平滑元素的滚动行为。

要对此进行调整，您可以使用界面左侧的Lerp下拉菜单。

5. 发布你的动画

当您对动画感到满意时，您需要做的就是单击“保存”按钮使它们在您的站点上生效。

还有一个方便的选项，让您选择是否将动画发布到您网站的移动版本。

探索其他一些动画模式

不同的动画模式在时间轴上的界面会略有不同。

例如，如果您选择视口高度动画，时间轴将从秒变为相对百分比视口高度。

例如，您可以看到它从 150% 开始，一直到 -50%。

如果你正在为背景颜色之类的东西设置动画，你可以根据相对滚动深度选择不同的颜色：

对于滚动像素动画，您将看到特定的像素数而不是相对百分比。

例如，如果您将动画步长设置为 600 像素，则动画将在用户滚动恰好 600 像素时发生。

如何直接编辑、导出或操作您的代码

对于更高级的用户，Animator 还允许您查看动画的原始 JSON 数据。 您可以使用它来重新编辑您的动画，或将其复制/粘贴到文本文件以获得当前动画的完整快照。

还有一个针对更多技术用户的操作面板，可让您以编程方式操作插件的数据 JSON 对象，添加您自己的 javascript 代码。 我不是开发人员，所以我不完全确定这增加了哪些机会，但我想开发人员会喜欢这种级别的控制。

您可以通过单击“保存”按钮旁边的三点图标并选择“导出数据”来访问这些选项。

动画师定价

Animator 仅提供高级版本，但它提供的功能价格实惠。

以正常价格，您将花费 49 美元在无限站点上使用以及一年的支持和更新。

然而，为了庆祝它的发布，在我们撰写 Animator 插件评论时，该插件目前的价格仅为 29 美元。

如果您以 29 美元的价格购买它，如果您想在第一年后继续获得支持和更新，则可以锁定该价格进行续订。

如果您想在购买前测试插件，Animator 可以让您启动动画界面的全功能演示。 您可以在此页面上或通过单击 Animator 主页上的试用演示按钮来访问它。

还有 30 天退款保证，因此您可以在自己的网站上进行测试，不会对您的钱包造成风险。

关于动画师的最终想法

总的来说，Animator 实现了提供简单的点击动画的承诺。

我当然不是开发人员，但我能够非常快速地启动和运行。

基于时间线的界面使组织动画和管理动画设置变得容易。 能够在视觉预览中立即看到这些动画的外观，而无需刷新页面，这也非常有帮助。

虽然 Animator 对于非技术用户来说足够简单，但我认为高级用户可能仍然会受益，因为它可以加快速度。 因此，即使您能够编写自己的 CSS，您仍然可能更喜欢使用 Animator 来节省时间。

如果你想自己尝试 Animator，你可以使用下面的按钮开始：