养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure RP 实现 手机滑动解锁效果

时间:2024-11-14 18:32:47

使用“移动”动作,拖动解锁滑块,在碰触滑动区右边界时,触发主页面显示出来。

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

工具/原料

AxureRP软件,4张图片(上面已给出)

方法/步骤

1、拖入图片部件;分别导入4张图片,并放置好位置;如图其中主界面图(带图标的)命名为“首页”,并设置隐藏,放在底层;如图

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

2、拖入矩形部件,设置为灰色,不透明度70%;复制1个,放在手机下部。

Axure RP 实现 手机滑动解锁效果

3、拖入两个文本标签部件,输入时间和日期,文本为白色。拖入一个矩形部件,填充为黑色,线条为灰色,双击添加文本“移动滑块解锁”,文本为白色。如图

Axure RP 实现 手机滑动解锁效果

4、拖入一个矩形部件,填充为灰色,圆角为5;如图拖入一个矩形部件,变形为“箭头”形状,缩小,放在滑块上,如图

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

5、选中“滑块”和“箭头”,右击“转换为动态面板”,命名为“解锁”。如图

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

6、选中“解锁”动态面板,双击“拖动时”事件(有些软件版本为“拖动动态面板时”),打开用例编辑器。单击“移动”,勾选“解锁动态面板”;设置“水平移动”,单击“添加边界”,添加左侧和右侧边界,如图示。(说明:这里的左侧和右侧数值,是滑块左侧和“移动滑块解锁”矩形最右侧X坐标值。拖入标尺可以查看到。如图示。)

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

7、拖入一条垂直线,放在“移动滑块解锁”矩形的最右边线上,并命名为“垂直线”。

Axure RP 实现 手机滑动解锁效果

8、选中“解锁”动态面板,双击“拖动结束时”(有些软件版本为“结束拖动动态面板时”),打开用例编辑器;单击“添加条件”if区域于This接触区域于垂直线,如图设置“显示”,首页,置于顶层。确定。

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

9、F5预览效果

Axure RP 实现 手机滑动解锁效果

Axure RP 实现 手机滑动解锁效果

© 一点知识