Axure RP Pro 7.0手机手势滑动解锁屏幕

用户点击滑动条，拖动到最右边，手机屏幕解锁成功

用户可以通过点击手机屏幕上的滑动条，将其拖动到最右边来解锁手机屏幕。当滑动条拖动到最右边时，手机屏幕会显示解锁成功的信息。

用户点击滑动条，未拖动到最右边，手机屏幕不能解锁成功

如果用户点击了手机屏幕上的滑动条，但未能将其拖动到最右边，手机屏幕将无法解锁成功。用户需要重新尝试将滑动条拖动到最右边才能解锁屏幕。

制作手机界面

为了制作一个可操作的手机界面，我们需要从部件库中拖入一些必要的部件。首先，我们可以拖入一个图片部件，并双击它以浏览并选择手机外壳的图片。我们还可以调整图片的大小和位置。接下来，我们可以再次拖入一个图片部件，用于制作手机的背景桌面。同样地，我们可以调整图片的大小和位置。

在手机界面中添加文字部件

除了图片部件，我们还可以从部件库中拖入一个文字部件。双击该部件以修改文字内容，并将其设置为时间显示格式的文字。我们还可以再次拖入另一个文字部件，并将其设置为日期和星期格式的文字。调整文字的样式和位置以适应手机界面。

制作滑动槽和滑块

为了实现滑动解锁功能，我们需要添加滑动槽和滑块。首先，我们可以从部件库中拖入一个矩形部件，并点击选中该矩形。然后，在工具栏的填充颜色选项中选择渐变颜色，并调整矩形的大小和位置。同样地，我们可以使用相同的方法来制作滑动槽和滑块，并调整它们的位置和大小。

将界面部件转换为动态面板

为了实现滑动解锁屏幕的效果，我们需要将手机界面上的所有部件转换为动态面板。用户可以通过右键单击手机界面上的任意部件，并在弹出的下拉列表中选择"转换为动态面板"。我们可以将该动态面板命名为"解锁"。

设置解锁前和解锁后的状态

双击"解锁"动态面板，打开动态面板状态管理框。在状态管理框中，点击图标以增加一个新的动态面板状态，并将其分别命名为"解锁前"和"解锁后"。

设置滑块动作

在解锁前状态页面中，选择滑块部件，并按照之前提到的方法将其转换为动态面板。将该滑块面板命名为"滑块面板"。然后，在滑块槽的右边拖入一个矩形部件，并调整其大小，将其命名为"右边线"作为参考线。将该右边线部件调整到最底层。

设置解锁后的界面效果

打开解锁后状态页面，在其中添加文字部件，并将其内容修改为"恭喜解锁成功"。点击滑块动态面板中的状态一，并拖入一个矩形部件，放置在滑块的最左边，并命名为"左边线"。将该左边线部件调整到最底层。

设置滑动面板的交互动作

进入解锁前状态页，选中滑动面板，并在右上角的部件交互中双击"拖动面板状态时"的动作，进入用例编辑器。在用例编辑器中，设置移动滑块面板在X轴上的拖动，并点击确定按钮。

设置滑动面板的条件

在用例编辑器中，点击"结束拖放动态面板时"的动作，并进入用例编辑器。在其中，点击"编辑条件"，当左边线接触到右边线时，设置解锁面板状态为"解锁后"。

完成解锁操作的条件设置

在用例编辑器中，再次点击"结束拖放动态面板时"的动作，并进入用例编辑器。在其中，点击"编辑条件"，当左边线未接触到右边线时，设置移动滑动面板到绝对位置（13，361），即滑块的初始位置。

如果本篇文章对你有帮助，请帮我点击左下角的投票或点赞。谢谢！

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。