回收活动

您可以在网站的其他部分使用之前生成的活动。当处理重复布局或具有相同结构的组件时，这很有用，因为您希望使用相同的活动。

Webflow 的活动中有两个主要控制措施来协助活动的再利用：

1. 触发器配置—此时，您可以选择触发器是否仅与特定元素（所选元素）有关，或与具有相同分类的所有元素有关
2. 行动目标 — 在这种情况下，你可以确定动画中的动作是否影响特定元素、一组元素或交互触发器本身

重要的： 目前，无法重复使用页面活动。您需要为每个页面分配页面触发器。不过，您可以分配动画以定位元素的类别，以便在每个页面上重复使用它们。为此，请在第一个页面上设置页面触发器并创建动画。确保定位类别而不是所选元素。然后，导航到每个页面，安装页面触发器并指定您之前设计的动画。

在本教程中，我们将指导您完成两个可重复使用的动画： 

1. 如何制定按钮箭头移位活动
2. 如何在视图活动中创建滚动

如何开发按钮箭头移位活动

在此示例中，您将了解如何在所有具有相同类别的按钮上启动相同的“箭头移出”动作。您还将了解如何确保动画仅影响访问者当前悬停的按钮箭头。

如何制作自定义按钮

首先，您需要制作一个包含文本和箭头的自定义按钮（即您随后将在其上应用动画）。您需要将箭头图像上传到“资源”面板以在按钮中使用。要塑造自定义按钮，请执行以下操作：

1. 前往 插入面板 > 基本的
2. 放下 链接块 Webflow 画布上
3. 导航 样式面板 > 样式选择器 并为链接块分配分类（例如“按钮框”
4. 去 插入面板 > 排版
5. 添加 文本块 在链接块内
6. 继续 样式面板 > 样式选择器 并为文本块分配分类（例如“按钮文本”）
7. 访问 资源面板
8. 将箭头图像拖到链接块中
9. 导航 样式面板 > 样式选择器 并为箭头图像分配一个分类（例如“按钮箭头”）
10. 选择链接块（即“按钮框”）
11. 前往 样式面板 > 布局 并设置 展示 到 弹性盒子

现在您已经设计好了按钮！您可以添加边距和填充、边框、悬停状态或任何其他样式。您还可以复制按钮以进行后续测试，以确认您的活动已应用于所有按钮。

专家建议： 为自定义按钮的组件（即链接块、文本块和箭头图像）分配分类可让您在具有相同分类的其他元素上重复使用活动。例如，如果您希望回收自定义按钮并使用相同的活动，这将非常有用。

如何开发自定义按钮活动

现在，您可以建立按钮箭头移位活动，这样当网站访问者将鼠标悬停在按钮上时，箭头就会向右移动。要构建该活动，您需要： 

1. 制作自定义按钮活动触发器
2. 建立动画以在悬停时移动按钮的箭头
3. 建立动画以重置悬停时箭头的定位
4. 将触发器应用于具有相同分类的所有元素
5. 评估自定义按钮

制作自定义按钮活动触发器

触发器是网站访问者与按钮交互时触发动画的因素。在此场景中，您将设置鼠标悬停触发器，这样当网站访问者将鼠标悬停在按钮上时，动画（即箭头移动）就会发生。

1. 选择链接块（例如“按钮框”）
2. 访问 活动面板
3. 点击“加”图标旁边 元素触发器
4. 选择“鼠标悬停”

建立动画以在悬停时移动按钮的箭头

在此步骤中，您将在按钮的箭头上安排悬停动画，以便当网站访问者将鼠标悬停在按钮上时，它会稍微向右移动。

1. 选择链接框（即“按钮框”）
2. 点击旁边的“选择动画” 行动 在里面 悬停时 部分
3. 选择“开始动画” 自定义动画
4. 点击“加”图标旁边 定时动画
5. 为动画指定一个名称（例如“箭头移出”）
6. 选择按钮的箭头（即“按钮箭头”）
7. 点击“加“ 旁边 操作
8. 选择 移动 在下面 转换
9. 在 x 轴上设置一个像素值（例如 6 像素） 移动
10. 如果需要，调整缓和和持续时间
11. 选择“仅限此分类的儿童”旁边 班级
12. 轻敲 节省

重要的： “仅限具有此分类的子元素”适用于触发元素（即“按钮框”链接块）及其具有该分类的子元素（即“按钮箭头”箭头）。如果您不将动画限制为影响“仅限子元素”，则当网站访问者将鼠标悬停在其中一个自定义按钮上时，您网站上的每个箭头实例都会移动。

假设您已根据链接块的分类（即“按钮框”）设置了触发器，并将动画设置为仅影响具有箭头分类的子项（即“按钮箭头”），则该活动将影响您网站上自定义按钮的每个实例 - 只要自定义按钮同时包含“按钮框”分类和“按钮箭头”分类。

建立动画以重置悬停时箭头的定位

此时，让我们配置悬停。在按钮悬停过渡期间，在箭头上实现动画，以便当网站访问者将光标从按钮上移开时将其返回到原始位置。

1. 选择链接块（例如“按钮框”）
2. 导航至 交互面板
3. 选择触发元素作为 鼠标悬停
4. 点击旁边的“选择动画” 行动 在里面 悬停时 部分
5. 选择“开始动画” 自定义动画
6. 选择“三个披露点” 靠近现有动画（例如，“箭头移出”）
7. 挑选 复制
8. 选择“齿轮”重复动画旁边的图标
9. 改变 动画的名称（例如“箭头向后移动”）
10. 在时间线上选择箭头的移动动画
11. 将 x 轴调整为 0px 移动
12. 点击 节省

将触发器扩展到共享同一类的所有元素

默认情况下，触发器仅适用于所选元素（例如链接块），但为了获得通用效果，请修改触发器以覆盖具有相同类的所有元素（例如“按钮框”），从而允许交互在该类的所有实例上统一发生。这种方法允许在整个网站上复制自定义按钮，并确保这些重复项上的交互也统一。

将触发器扩大到具有相同类的所有元素：

1. 选择链接块（即“按钮框”）
2. 访问 交互面板
3. 选择 鼠标悬停 元素触发器
4. 选择 班级 在 触发器设置

现在，交互将涵盖共享该类的所有元素（即“按钮框”）。在画布上复制自定义按钮后，继承相同类的复制按钮将显示与原始自定义按钮相同的箭头移动交互。

测试自定义按钮

通过将鼠标悬停在您的自定义按钮和任何重复按钮上来验证您网站的功能，以确认交互无缝应用于继承该类的所有按钮。

创建滚动激活交互

在建立可重复使用的滚动效果时，以触发元素本身为目标会很有利。在这里，我们将演示如何设计一个交互，让网站标题向右滑动，并在滚动到视图中时增加不透明度。

为了发展这种互动，您将：

1. 建立滚动到视图触发器
2. 将滚动制作成视图动画
3. 明确行动目标

建立滚动到视图触发器

要启动交互，首先，在用于动画的父元素（即 div 块）上设置“滚动到视图”触发器。

1. 选择 div 块 – 例如，为 div 块分配一个“内容包装器”类
2. 导航至 交互面板
3. 单击“加”图标旁边 元素触发器
4. 选择“滚动到视图”

若要在具有相同类的元素之间重复使用此交互，请在类级别应用触发器。选择 班级 在下面 触发器设置 确保每当具有该类（例如“内容包装器”）的元素滚动到视图中时，动画就会激活。

将滚动制作成视图动画

滚动到视图动画包含两个阶段：

• 初始状态 — 将元素定位到左侧 50px，并将不透明度设置为 0%
• 滚动进入视图 state — 将元素转换为 100% 不透明度并将其返回到 x 轴原点

首先定义 div 块的初始状态，将其放置在左侧 50px 处，并在滚动到视图之前将不透明度设置为 0%：

1. 选择 div 块（例如“内容包装器”）
2. 访问 交互面板
3. 选择 滚动到视图中 元素触发器
4. 点击旁边的“选择动画” 行动 在里面 当滚动到视图中时 部分
5. 选择“开始动画” 自定义动画
6. 选择“加”图标附近 定时动画
7. 为动画指定一个名称（例如“内容包装动画”）
8. 单击“加”图标附近 操作
9. 选择 移动 在下面 转换
10. 指定 x 轴的值（例如 -50px） 移动
11. 勾选“设置为初始状态”下的checkbox 定时
12. 单击“加”图标附近 操作
13. 选择 不透明度 在下面 风格
14. 设置 不透明度 设置为某个值（例如 0%）
15. 勾选“设置为初始状态”下的checkbox 定时

接下来，定义标题滚动到视图中时的操作：

1. 单击“加”图标附近 操作
2. 选择 移动 在下面 转换
3. 指定 x 轴的值（例如 0px） 移动
4. 取消选中“设置为初始状态” checkbox 定时
5. 单击“加”图标位于您刚刚指定的操作旁边（例如，“内容包装器” 0px 移动 动作）——这将确保动作与航向在 x 轴上返回到 0px 同时发生。
6. 选择 不透明度 之内 风格
7. 指定百分比值 不透明度 （例如，100%）
8. 按 节省

现在，有必要确保动画仅影响触发它的元素（例如“内容包装器”div 块）。

确立行动目标

配置操作目标，以便操作影响交互触发器：

1. 选择 div 块（例如“内容包装器”）
2. 导航 交互面板
3. 选择 滚动到视图中 元素触发器
4. 按 ”齿轮” 之前设置的动画旁边的“内容包装动画”
5. 选择动画时间轴中的所有动作（按住 命令 （在 Mac 上）或 控制 （在 Windows 上）并单击所有时间线操作）
6. 在“互动触发器”中选择 影响 落下
7. 打 节省

这样，操作将仅影响交互触发器，而不是您最初在创建动画时选择的特定元素。这种方法允许动画的可重复使用性，用新交互的触发元素替换操作的先前目标元素。