按钮 Hover 动效制作教程

本教程将演示如何使用自定义组件，为按钮制作流畅的 Hover（鼠标悬停）动效。

前置知识

• 掌握基本的图层操作
• 了解组件的基础概念
• 熟悉属性面板的布局

分步教程

步骤 1：创建按钮组件

1. 选中按钮图层，右键单击并选择 “创建组件”。
2. 输入组件名称，然后双击打开组件编辑器。

步骤 2：添加 Hover 变体

1. 在组件编辑器中选中根节点。
2. 单击 “添加 Hover 变体”。

步骤 3：创建悬停状态的文字元素

1. 复制文字组件（Ctrl+D / Cmd+D）。
2. 将新文字的位置模式设置为绝对定位。

3. 调整 Top 值，让文字位于蓝色背景区域之外。

   

步骤 4：设置 Hover 动画

1. 选中 Hover 变体中的文字元素。
2. 在右侧面板中单击 “+ 添加属性”。
3. 选择 Y 轴偏移。
4. 将数值设置为 200%。

步骤 5：微调文字位置

1. 选中下方的文字组件。
2. 将它的 Top 值调整为 17px。

步骤 6：隐藏溢出内容

1. 选中 Default 根组件。
2. 在属性面板中找到 Overflow 设置。
3. 将它设置为 Hidden。

步骤 7：预览效果

现在可以预览 Hover 效果了。当用户将鼠标悬停在按钮上时，文字会通过平滑的滑动动画完成切换。

进阶说明

掌握按钮 Hover 动效后，你还可以将相同的原理应用到卡片、导航项和其他组件中。

组件属性继承规则

• 未修改的属性：Primary 组件的属性会被所有变体继承，例如 Overflow: Hidden。
• 已修改的属性：如果某个属性在变体中被修改，之后对 Primary 组件中该属性的更新不会覆盖这个变体。
• 重置属性：与 Primary 不同的属性会显示蓝色指示标记。右键单击该属性并选择 “重置”，即可恢复一致。