编者按:我们解锁手机时，经常需要滑动，那么这个功能的设计过程是怎样的呢？本文作者通过实际操作经验，总结了如何实现轴动态面板的滑动解锁。

制作app的交互效果时遇到了手机滑动解锁，所以专门学习了axure如何使用动态面板实现滑动解锁(即拖拽)效果。在这里我想和大家分享一下。

1.第一步:准备相关组件并命名

手机图片，手机壁纸(这里好看可以忽略)，轨迹矩形，滑块图标，提示文字，改变矩形(大小随滑块移动而改变)，如下图:

建议:第一次建议用矩形代替圆角。下图只是为了好看:

第二步:调整组件的位置、大小和颜色

调整轨迹矩形为半透明，去掉边框；将更改矩形的初始宽度调整为1；将提示文本的颜色调整为灰色，调整后如下图所示:

3.第三步:建立互动

1.选择滑块并将其变成动态面板

然后添加【拖动】的交互用例，添加【移动】动作，选择当前组件，设置【水平拖动】。动画效果可以选择为【线性】，比较自然，时间可以自行设定。

如下图:

2.添加边界

也就是滑块开始和结束的地方；这里，滑块从轨道矩形的左侧开始，到轨道矩形的右侧结束。设置边界前，单击fx添加变量:

添加局部变量后，点击插入变量或函数，插入刚刚设置的变量，在左边输入[[左1 .左]]，点击确定:

点击【确定】，同样在右侧添加边界，输入[[LVAR1.right]]，如下图:

3.设置更改矩形的大小

单击[设置文本]并选择组件[更改矩形]:

因为其大小是可变的，[宽度]不能是固定值。你需要点击右边的fx按钮来添加一个变量。它的宽度=滑块左侧的x坐标& # 8211；轨迹矩形左侧的x坐标，变量设置如下图所示:

单击确定后，将锚点设置在左侧，选择[线性]进行动画，并将时间设置为与滑块拖动的时间一致。如下图所示；

以这种方式设置动作后，需要为这些动作添加条件。单击添加条件，弹出如下所示的对话框。选择满足以下所有条件。当滑块左侧的值大于或等于轨道左侧的值时，滑块开始拖动:

下图显示了用于设置滑块的变量:

下图显示了用于设置轨迹矩形的变量:

下图显示添加变量后，单击确定:

单击确定设置如下所示的条件，然后单击确定:

4.设置[拖动结束时]

选择【动态面板】，即滑块，在拖动结束时添加交互用例，添加动作【设置文本】，选择元素为【滑动解锁文本标签】，将文本设置为【富文本】，然后点击【编辑文本】，进入文本编辑弹出框:

以下是文字编辑。输入文本“解锁成功”，然后单击“确定”:

下图显示了点击确定:

设置好文本后，我们还需要添加一个拖动结束条件，即当滑块的右X坐标=轨迹矩形的右X坐标时，这里的变量设置可以参考上面；

以下是设定图片:

然后点击确定。这里我们要注意它们的顺序，变化矩形应该在轨迹矩形之上: