网站建设 社群运营 axure动态面板如何实现滑动解锁

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

中企动力企业交流群

编辑导语:当我们给手机进行解锁时,往往需要进行滑动,那么这个功能的设计过程是怎样的呢?本文作者通过实际的操作经验,为我们总结了axure动态面板如何才能实现滑动解锁。

在制作app交互效果的时候,遇到手机滑动解锁,所以特意去学了axure怎么用动态面板实现滑动解锁(也就是拖动)的效果,这里和大家做一个分享。

一、第1步:准备相关的元件并命名

手机图片、手机壁纸(这里为了好看,可忽略)、轨迹矩形、滑块图标、提示文本、变化矩形(尺寸随着滑块的移动而变化),如下图:

建议:第一次建议用矩形,不要用圆角,下图只是为了好看:

二、第2步:调整元件的位置、尺寸、颜色

调整轨迹矩形为半透明状态,且边框去掉;调整变化矩形的初始宽度为1;调整提示文本的颜色为灰色,调整后如下图:

三、第3步:设置交互

1. 选中滑块,将其转化为动态面板

然后添加的交互用例,添加动作,选中当前元件,设置,动画效果可选,这样比较自然,时间可自行设置。

如下图:

2. 添加边界

即滑块从哪里开始,到哪里结束;这里滑块从轨迹矩形的左侧开始,到轨迹矩形的右侧结束;在设置边界前,需点击 fx 添加变量:

添加完局部变量后,点击插入变量或函数,插入刚刚设置的变量,输入左侧[[LVAR1.left]],点击确定:

点击确定后,按照同样的方法添加右侧的边界,输入[[LVAR1.right]],如下图:

3. 设置变化矩形的尺寸

点击,选中元件:

因为它的尺寸是个变量,所以不能是定值,需要点击右侧的fx按钮添加变量,它的宽=滑块左侧的x坐标 – 轨迹矩形左侧的x坐标 ,变量设置如下图所示:

点击确定后,设置锚点为左侧,动画选为,时间设置为与滑块拖动的时间一致即可;如下图所示;

这样设置完动作之后,还需为这些动作添加条件,点击的按钮,出现弹框如下图,选择“符合全部以下条件”,设置的大于等于的时,滑块开始拖动:

下图为设置滑块的变量:

下图为设置轨迹矩形的变量:

下图为添加完变量后,点击确定即可:

点击条件设置的确定后为下图,然后再点击确定即可:

4. 设置

选中即滑块,添加的交互用例,添加动作,元件选择为,设置文本为,然后点击,进入到文本编辑弹框:

以下为文本编辑,输入文本为“解锁成功”,然后点击确定即可:

下图为点击确定后的:

设置完文本后,我们还需要添加一个拖动结束的条件,即当滑块的右侧x坐标=轨迹矩形的右侧x坐标,这里的变量设置可参照上边;

以下为设置完的图:

然后点击确定即可。这里要注意他们的排序,变化矩形要在轨迹矩形之上:

预览地址如下:https://2002sx.axshare.com

下载链接如下:

链接:https://pan.baidu.com/s/15-hbzduJBR83lYPo63BuDw

提取码:5ap2

中企动力企业交流群

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章

以上产品还未完全满足我的所有需求,在下方提交我的专属需求
我的专属需求:
*手机号:
*验证码:
img
咨询报价
现在咨询