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

 时间:2024-10-17 01:56:57

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 实现 手机滑动解锁效果
  • Axure RP中继器实例绑数据,选中,删除
  • C4D管道模型怎么改成平面圆圈?
  • C4D制作子弹击穿效果
  • C4D 造型工具组之晶格工具
  • C4D 记录活动对象不能记录对象的缩放?
  • 热门搜索
    扫黑除恶手抄报 春节手抄报内容文字 清明手抄报图片 五年级数学手抄报 关于元旦的手抄报 预防病毒手抄报 六一手抄报内容 法律手抄报 我的梦想手抄报 五四青年节手抄报