1. 主页 > 行业资讯 > 设计文章 >

如何实现axure动态面板的滑动解锁

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

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

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

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

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

axure动态面板实现滑动解锁axure动态面板实现滑动解锁

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

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

axure动态面板实现滑动解锁

3.第三步:建立互动

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

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

如下图:

axure动态面板实现滑动解锁

2.添加边界

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

3.设置更改矩形的大小

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

4.设置[拖动结束时]

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

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

下图显示了点击确定:

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

以下是设定图片:

axure动态面板实现滑动解锁

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

axure动态面板实现滑动解锁

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://www.ffjianzhan.cn/a/sjwz/499.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息