简介
有时，由于移动应用中的空间有限，我们需要把一些菜单隐藏到一个按钮里。
在这篇文章中，我们将学习如何使用 Range 触发器，在长按按钮时隐藏和显示悬浮菜单按钮，创建一个很棒的交互。
你将学到什么
创建长按交互
触摸时缩放悬浮按钮
最后，你将能够做出这样的效果！
分步说明
1. 创建长按交互
1. 选择“plus”按钮图层，并添加一个 Long Press 触发器。
2. 选择 Live 菜单按钮，并在 Long Press 触发器中添加一个 Move 响应。我们将使用它当前的 X 和 Y 位置作为 Move 响应的值。
将 X 值设为 114，Y 值设为 685。
💡 我们使用 Live按钮的当前位置，因为它已经处于正确的“显示”位置。
3. 对另外 2 个悬浮菜单按钮执行相同操作。选择这些菜单按钮，在 Long Press 触发器下添加 Move 响应，并使用各自的 X 和 Y 位置作为 Move 响应值。
💡 你可以调整 Move 响应的时间轴来获得有趣的交互。尝试更改缓动、开始延迟和时长，看看它们如何影响这个微交互。
4. 现在我们已经有了 Plus 按钮被长按时 3 个悬浮菜单按钮的“显示”位置。但在初始状态下，我们希望它们是隐藏的。
让我们把这 3 个按钮隐藏到 Plus 按钮下方。你可以手动拖动它们，让它们位于 Plus 按钮后面，或将 X 设为 188，Y 值设为 753。
完成后，你将能够在原型中长按并显示隐藏的悬浮菜单按钮。不过，这还只是交互的一半，因为当你抬起手指时，还需要把它们隐藏起来。
5. 为了隐藏悬浮菜单按钮，选择 Plus 按钮图层并添加一个 Touch Up 触发器。该触发器用于检测手指何时从原型上释放触摸。
6. 然后，重置悬浮菜单按钮的位置。为此，选择每个按钮并添加一个 Reset 响应。
Reset 响应是一个很有用的响应，可以重置对元素所做的所有更改，因此你不必手动操作。记住这一点！
7. 然后……我们完成了！现在你可以使用长按触发器来隐藏和显示组件。接下来进入下一步，让交互更有趣！
2. 触摸时缩放按钮
当手指滑过悬浮菜单按钮上方时，我们将为其添加缩放交互：
1. 首先，创建两个变量来存储手指的位置。把它们命名为 touchX 和 touchY。两个变量都选择第二个选项，添加变量 For This Scene。
2. 在 ProtoPie 5.5 中，你可以在变量中使用公式。我们将捕获触摸位置，然后把它存入刚创建的变量中。
选择 touchX 变量，在右侧面板中勾选 Use Formula 复选框。在公式字段中输入 $touchX。对 touchY 也做同样操作，不过在公式字段中输入 $touchY。
捕获触摸位置并将其存储到变量中
3. 点击变量旁边的“debug”图标，这样你就可以看到 touchX 和 touchY 的值。
4. 在你的原型中试一下。在长按 plus 按钮时，拖动手指，注意随着拖动 X 和 Y 的值会变化。
接下来，当我们将手指拖到悬浮菜单按钮上方时，会放大这些按钮。为此我们需要知道按钮的 X 和 Y“范围”。
X 和 Y 范围是按钮覆盖的屏幕区域。我们可以根据按钮位置减去按钮的高度/宽度来计算。请看下面这个 Live 按钮的示例：
在上图中，Live 按钮大小为 60px x 60px，位置在 (114,685)。
然而，(114,685) 实际上只是指向按钮中心的一个像素。当我们把手指拖到按钮上方时，需要覆盖按钮的整个区域，而不仅仅是中心点。
这就是为什么我们要使用 range 触发器。我们必须计算整个按钮的区域，因此需要扩展“中心”区域。
由于我们从中心开始，只需将 X 减去 30 得到起始值，再将 X 加上 30 得到结束值。Y 值也是同样的做法。
5. 现在概念讲完了，让我们把触发器添加到原型中。在 range 触发器下选择 touchX 变量，因为我们要检测 touchX 的值。
选择 “range between” 图标（第三个图标），在起始值输入 84，结束值输入 144。这样我们就覆盖了 Live 按钮正确的 X 区域。
6. 现在，我们还需要确保也覆盖按钮正确的Y 范围。在刚才的 range 触发器下，添加两个以 touchY 变量为属性的条件：
第一个条件检查 touchY 的值是否大于 655。655 是 Live 按钮的起始范围。
第二个条件检查 touchY 的值是否小于结束范围，即 715。
7. 在条件下添加一个 Scale 响应。当手指位于 Live 按钮上方时，我们希望将其放大。选择 Live 按钮图层并添加 Scale 响应。将 factor 值设为 120%。不过你也可以按喜好调整大小。
💡 这里我们使用的是 AND 逻辑：如果 X 范围匹配并且 Y 范围匹配，那么将按钮缩放到 120%。
这意味着只有两个条件都满足时，按钮才会缩放到 120%。
8. 如果你测试原型，可以看到当你长按并将手指拖到 Live 按钮时会出现缩放交互。不过，当你把手指移开时，它不会缩小回去。
要让它缩小，我们需要再添加一个 range 触发器。但这次要和之前相反。添加一个 Range 触发器，并选择 touchX 变量作为属性。
选择 “smaller and larger than” 范围，也就是右侧的第 4 个图标。将起始值设为 84，结束值设为 144。
9. 选择 Live 按钮图层，并在 Range 触发器下添加一个 Scale 响应。将 factor 值设为 100%。这意味着当手指离开按钮触摸区域时，会将其缩放回 100% 大小。
10. 对 touchY 也做同样的事。添加一个 range 触发器，选择 touchY 变量作为属性，并选择“smaller and larger than”范围。将起始范围设为 655，结束范围设为 715。复制刚才为 touchX 创建的 Scale 响应，并粘贴到 touchY 的 range 触发器下。
💡 当检测手指是否在按钮外部时，我们使用的是 OR 逻辑。也就是说，如果 X 范围不匹配，或者 Y 范围不匹配，那么将按钮缩放到 100%。
当任一条件满足时，就会触发缩放响应。
11. 对另外 2 个悬浮菜单按钮也要应用相同逻辑。试着自己完成！可参考以下 X 和 Y 范围值：
Post 菜单按钮
X 范围起始：158
X 范围结束：218
Y 范围起始：619
Y 范围结束：679
Story 菜单按钮
X 范围起始：230
X 范围结束：290
Y 范围起始：655
Y 范围结束：715
12. 当你完成最后一部分后……大功告成！你刚刚做出了自己的长按菜单交互！
就这些！
你刚刚使用长按和 range 触发器创建了自己的悬浮菜单按钮交互。多试试这个原型，看看它有多好看！
我们很想看到你疯狂的实验。创建你自己的原型，并在 Twitter 或 Instagram 上带上 #MadeWithProtoPie 分享出来。
