按钮组件的 Hover 效果教程

本教程将演示如何通过 自定义组件 实现按钮的悬停（Hover）动效。

预备知识

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

步骤详解

第一步：创建按钮组件

1. 选中按钮图层，右键选择 “变成组件”，并输入组件名称。
2. 双击进入组件编辑界面

步骤二：添加 Hover 变形

1. 在组件编辑界面，选中根节点
2. 点击"添加Hover变形"按钮

第三步：创建悬停文本元素

1. 使用Ctrl+D复制文本组件
2. 将新文本的定位方式设置为"绝对定位"
3. 调整Top值，将文本移至蓝色背景区域外

第四步：设置悬停动画

1. 选择"Hover"变形下的文本
2. 在右侧面板点击"+"添加属性
3. 选择"Y轴偏移"属性
4. 设置值为-200%

第五步：微调文本位置

1. 选择下方的文本组件
2. 调整其Top值为17像素

第六步：设置溢出隐藏

1. 选择"默认"根组件
2. 在属性面板中找到"溢出"选项
3. 设置为"隐藏"

第七步：预览效果

您现在可以预览按钮的实际悬停效果了！当用户将鼠标悬停在按钮上时，将看到平滑的文本切换动画。

进阶说明

掌握按钮悬停效果后，您就已掌握了交互动效的核心原理。同样的方法可应用于卡片、导航项等多种组件的悬停效果制作。

组件属性继承规则

• 未修改的属性：Primary 组件的属性会自动继承到其他变形（例如 “溢出：隐藏” 设置）。
• 已修改的属性：如果某个变形中修改过某个属性，则 Primary 组件对此属性的修改不会生效。
• 重置属性：当属性值与 Primary 不一致时，会显示为 蓝色标记。右键点击该属性，选择 “重置”，即可恢复与 Primary 保持一致。