Adobe XD交互动效教程|用蒙版制作网页按钮悬停交互动画效果
时间：2023-07-24 14:00:01 | 来源：网站运营
时间：2023-07-24 14:00:01 来源：网站运营
Adobe XD交互动效教程|用蒙版制作网页按钮悬停交互动画效果：我们本次教程目标效果如下图，一个向左推拉的网页按钮悬停动画：
Step 1新建描边矩形和文字，字体和参数大家可以根据自己的爱好来设置。把矩形和文字编成为一组。
Step 2在镂空按钮组上面右键→复制，我们得到一个新的组，重命名为悬停。
此时我们的画板上有两个镂空按钮堆叠在一起，为了看清楚，我们可以把下面的镂空按钮组给隐藏。
Step 3修改悬停按钮组的视觉参数。由于白色在视觉上有放大的效果，所以字号要缩小一些，字重也要变细一点。这里我把字号缩小了5pt，字重从heavy调为bold。
因为悬停按钮是在镂空按钮之后出现，我们可以把两组的位置调换一下。
Step 4制作蒙版。我们从之前的组内直接复制一个矩形，并把矩形拖拽到两组之上。此时矩形覆盖住两个按钮。
同时选中矩形和两个按钮→右键→制作带有形状的蒙版。
此时所有的元素将合成为一个蒙版组，我们可以看到两个按钮露出在蒙版外面。
Step 5制作按钮组件。我们来到右侧面板，选中蒙版组之后，点击组件面板的添加按钮，把蒙版组转化为一个按钮组件的“默认状态”。
之后，我们点击默认状态后的添加按钮，来生成按钮组件的悬停状态。
到这里，我们的所有准备工作就做好了，文件应该如下图状态：
Step 6下面我们就开始调整组件在两个状态下的不同外观，要注意的是一定要对元素进行对应调整，我们可以理解为制作动效前后的两个关键帧。
首先我们把按钮组件切换到
默认状态。在默认状态下，按钮是镂空的，所以我们将镂空组保留在原地，把悬停组向右移动到蒙版的边界外，这样在默认状态下则看不见悬停组。
然后我们可以把“Register”的在默认状态下的不透明度调为0，这样文字在过渡时会有一个渐入效果。当然如果不调整的话会是另一种效果，同学们可以自行设计。
然后我们把按钮组件切到悬停状态，同理，我们这次把镂空组向左推到蒙版边界之外，把悬停组推进蒙版边界内，同时把“Register”的不透明度调回100。此时我们的设计步骤全部完成。
Step 7我们切换到XD的原型制作界面，把组件切到
默认状态，此时我们可以看到XD已经把原型动作设置好了。注意：有不少同学说软件没有自动设置，通常都是因为忘记切换到默认状态。
在交互面板，前三项不需要调整。缓动和持续时间可以根据自己的爱好来个性化调整。
现在大家可以点击软件右上角的桌面预览按钮，我们的按钮悬停动效就制作好了。
同学们可以举一反三，自己尝试制作类似原理的蒙版按钮：
在线咨询
