原因和动议

如何在特定断点处提示动画

如果您希望在某些断点处启动动画，则可以验证希望动画发生的断点。默认情况下，动画会在所有断点（桌面及更高版本、平板电脑、手机横向和手机纵向）上触发。

例如，如果您希望鼠标点击交互仅发生在桌面和断点之上，那么这将非常有用。在这种情况下，访问者将能够使用鼠标激活交互。

如何在所有具有相同类的元素上启动动画

如果您选择在共享同一类的所有元素上开始动画，则可以在具有该类的一个元素上实现交互，然后将其应用于整个类。

要在具有该类的所有元素上建立动画：

1. 在元素上设置动画
2. 继续 触发器设置 并选择 班级
3. 从中选择你打算应用动画的类 班级 落下

了解有关重复使用交互的更多信息。 

附加动画配置

滚动偏移

对于许多页面滚动触发器（例如，“滚动到视图”、“在视图中滚动时（连续）”等），您可以选择设置 抵消。这会推迟交互的启动，直到达到页面的某个滚动百分比——滚动偏移量越大，访问者在交互开始之前滚动的时间就越长。

延迟

您可以定义动画 延迟，使得动画仅在指定的时间延迟过去后才会发生。

平滑

您还可以修改 平滑 动画的平滑度。平滑度决定了动画响应鼠标移动的速度。

如何配置动画

要根据刚刚设置的触发器配置动画，您可以生成 自定义动画 或选择预先存在的动画（例如淡入淡出、缩小、果冻等）。

如何设置预先存在的动画

现有的动画包括 出现和消失 和 强调 动画在设计器中预先配置。可以选择这些动画作为单独构建动画每个组件的更快速的替代方案。

笔记： 预先存在的动画只能为元素触发器建立 - 而不是页面触发器。

要配置预先存在的动画：

1. 发起 元素触发器 （例如，鼠标悬停、滚动到视图中等）
2. 展开 行动 从开始操作段下拉菜单（例如，如果您选择鼠标悬停元素触发器，则会揭开 行动 下拉菜单 悬停时 部分）
3. 选择以下任一操作 出现与消失 category 或 强调 category

随后，您可以自定义方向和延迟 出现与消失 动画，或者 强调 动画。

如何配置自定义动画

要配置自定义动画：

1. 建立 元素触发器 （例如，鼠标悬停、滚动到视图中等）或 页面触发器 （例如，页面加载、页面滚动等）
2. 揭开 行动 初始操作部分的下拉菜单（例如，如果您选择鼠标悬停元素触发器，则会显示 行动 下拉菜单 悬停时 部分）
3. 点击下方的“启动动画” 自定义动画
4. 点击 ”加”毗邻 定时动画
5. 姓名 交互面板上的动画
6. 按 ”加” 右侧 操作
7. 选择 全局变量，变换, 风格， 或者 各种各样的 下拉菜单中的动画

接下来，您将在 动画时间轴.

如何操作动画时间轴

无论您是创建新动画还是修改现有动画，您都可以在动画时间轴上使用关键帧来为各种元素制作动画。

要将动作附加到动画时间轴，首先导航到 动画时间轴。随后，您可以通过以下两种方法之一添加操作：

• 点击“加”时间线上的图标
• 点击 ”加”图标可在时间轴中现有操作之前、之中、之中或之后插入内联操作

插图

例如，让我们为“页面滚动时”页面触发器构建一个动画。当您向下滚动页面时，您可以让英雄部分文本水平移动并降低不透明度。动画时间轴中的绿色播放头指示页面的当前位置（0% – 100%）。

定时动画经常使用其他触发器（毫秒、秒等），但此实例使用百分比来表示页面的当前滚动位置。这里，0% 表示页面顶部的滚动位置，100% 表示页面底部的滚动位置。 

现在，您可以在页面上的不同点集成各种操作。例如，您可以在 0% 滚动位置包含 4 个程序：

• 文本背景 — Shift 0px
• 文本背景 — 透明度 100% (fullyvisible)
• 文本前景 - Shift 0px
• 文本前景 - 透明度 100%

这些步骤将文本背景和文本前景定位在 0px（无移动）处，并将其透明度设置为 100%（完全可见）。当访问者到达页面顶部时，文本背景和前景将完全可见并保持在原始位置。

您还可以在100%滚动位置引入4种方法：

• 文本背景 — Shift 900px
• 文字背景 — 透明度 0%（完全透明）
• 文本前景 - Shift 900px
• 文本前景 - 透明度 0%

在此例中，每个元素向任意方向移动 900px，透明度设置为 0%。让我们回顾一下滚动动画的最终操作：

这些步骤将文本背景和文本前景的位置调整为 900px（向任一方向移动 900px），并将其透明度设置为 0%（完全透明）。当访问者到达页面底部时，文本背景和前景将完全透明，并从其原始位置向页面的右侧或左侧移动 900px。

专家提示： 有两种方法可以在动画时间线上选择多个动作。要选择多个 连续的 动作，按住 转移 并选择这些操作。要选择多个， 非连续的 行动、新闻 命令 （在 Mac 上）或 控制 （在 Windows 上）并选择操作。

关于行动目标

默认情况下，您添加到动画时间轴的每个动作都会影响所选元素。但是，您可以通过以下两种方式之一修改动作的焦点：

• 替换受操作影响的目标元素
• 确定该操作是否仅影响所选元素、共享相同 category 的所有元素，还是交互触发器本身

修改目标元素

要修改受操作影响的元素：

1. 右键单击动画时间轴中的某个动作
2. 点击 更改目标
3. 在画布上选择其他元素以应用操作

重要的： 动画时间轴内的任何修改都会影响激活动画序列的所有交互。

确定操作如何影响单个元素、元素的 category 或交互触发器

创建操作后，您可以选择此操作是否影响：

• 仅有的 选定的元素
• 所有元素与所选元素共享相同的 category
• 交互触发器本身

仅针对所选元素

所选元素是您形成的任何动画操作的标准目标。任何设置为影响所选元素的操作都将 稳步 影响该精确元素。因此，如果您重复使用动画，并执行影响所选元素的操作，则无论触发元素是什么，该操作都会持续影响该元素。

将所有与所选元素具有相同 category 的元素作为目标

您可能还希望定位 category 所选元素。这将导致动画操作影响与所选元素共享相同 category 的所有元素。

当您希望多个元素在页面加载时同时移动时，此选项非常有用。为此，请为所有元素分配相同的 category，并使用组合类别将它们移动到页面上的不同位置。随后，您可以在基础 category 上使用相同的动画操作，允许每个元素以类似的方式移动，但从不同的初始位置移动。

您还可以将受影响的元素限制为仅与交互触发器共享同一 category 的子元素、同级元素或父元素。

针对与所选元素共享相同 category 的儿童、兄弟姐妹或父母

您可以通过指定它们是触发元素的子类、兄弟类还是父类来定义哪些类会受到某个操作的影响。

此选项非常有用，例如，当您希望按钮元素内共享相同 category 的所有箭头在悬停时进行动画处理时。如果您将动画操作集成到具有相同 category 的所有元素，则在悬停在 1 个按钮上时，您会观察到该页面上每个按钮内的所有箭头都会进行动画处理。要将动画操作限制为当时悬停的按钮，请访问 影响 菜单并选择“类别”。随后，选择 类别 从下拉菜单中选择“仅限此 category 的孩子”。

当您要动画的元素是触发元素的兄弟元素（例如菜单下拉菜单或弹出模式）时，“仅具有此类的兄弟元素”选项非常有用。同样，当要动画的元素是触发元素的父元素时，您可以使用“仅具有此 category 的父元素”选项。

笔记： 在形成基于类的动画之前，请确保将 category 归因于元素。“category”选项不适用于应用于不包含特定类的元素的操作。

针对互动触发点的策略

您还可以建立以下操作： 独特 影响 互动触发。随后，对于您重复使用动画的任何后续交互，动画将用新交互的触发元素替换先前的目标元素。这有助于将相同的动画快速应用于任何元素，而无需创建新的动画。

评论： “交互触发器”选项仅在对交互的触发元素执行操作时可用。因此，在由页面触发器提示的动画中不提供此选项。

修改活动动画

您可以通过导航到“交互”面板并选择动画来修改现有动画以显示其配置。因此，将鼠标悬停在动画标题上，然后点击设置图标“齿轮”位于动画标题的右侧。此操作将显示该特定动画的动画时间线。

替代来源

• 扩展您对采用交互的了解
• 深入研究插值、缓和和平滑
• 了解设置连续动画的过程，该动画会在您滚动时水平移动和淡入淡出元素

消除并丢弃未使用的触发器和动画

删除触发器和动画的程序

从“交互”面板中，可以消除触发器或动画。这样，触发器或动画将不再链接到其特定目标元素或页面操作。要消除触发器或动画，请执行以下操作：

1. 继续 交互面板
2. 将鼠标悬停在要删除的动画或触发器上
3. 选择“垃圾” 触发器名称旁边的图标

评论： 当您从交互面板中删除触发器时，之前与其关联的动画不会被删除。它只是将动画与该特定触发器分离。随后，您仍然可以在配置新触发器时使用该动画。

从您的网站消除触发器和动画的过程

如果删除了动画，或者从“交互”面板中删除了缺少连接动画的触发器，它不会完全从您的 地点。这是因为可以在替代元素或页面触发器上重复使用以前创建的动画。尽管如此，您可能还是会考虑清理未使用的触发器或动画，以增强网站优化并提高性能。 

在清除未使用的交互时，您可能无法选择要消除哪些触发器，但您可以决定保留或丢弃哪些动画。在未使用的交互的清理过程中，所有未使用的触发器都会被删除。

提示： 仅当动画未链接到元素或页面触发器时，才可以选择完全删除（清理）动画。首先，从交互面板中的任何元素或页面触发器中删除动画，然后继续从您的网站中删除动画。

要清除未使用的触发器和动画：

1. 访问 交互面板
2. 按 清理 位于面板顶部
3. 确定您要丢弃/保留的动画
4. 点击 删除