快好知 kuaihz

Axure RP 9 教程:页面三级拖动

本期效果是一个三级拖动,第一次点击弹出部分列表,向上拖动时显示完整的列表,向下拖动时显示最低级的列表。一起看看怎么操作~

本期效果:

本期效果是一个三级拖动,第一次点击弹出部分列表,向上拖动时显示完整的列表,向下拖动时显示最低级的列表,效果非常简单,大家先看看效果图:

实现逻辑

我们使用一个动态面板,为其添加三种状态下的页面,在不同的状态,页面拖动结束时,动态面板切换到目标页面,并且移动到合理的位置,就轻松的实现了一个页面拖级拖动的效果。

实现步骤

第一步,我们添加一个手机的框架。第二步,我们添加一个动态面板,里面添加三个状态,分别为一级,二级,三级,为三级创建内容,并创建为动态面板,内容如图所示:

第三步:标记出上边三个动态面板的状态单独放置在页面上时Y轴的位置,如图所示:

第四步:选中动态面板第一个状态,也就是上图中最小的一个状态设置交互:

解释:鼠标单击时,让动态面板切换到二级状态,且让动态面板在150ms内移动到(0,264)的位置。第五步:选中动态面板第二个状态,也就是二级状态设置交互:

解释:向上拖动结束时,让动态面板状态切换为三级,让动态面板在150ms内移动到(0,0)位置;向下拖动时,让动态面板切换到一级状态,然后让动态面板在150ms内移动到(0,662)位置。第六步:选中动态面板的第三个状态,设置交互:

解释:向下拖动结束时,动态面板切换到状态二,动态面板在150ms内移动到(0,264)位置。此时就实现了简单的三级拖动的效果了。

结语

原型文件下载链接:https://pan.baidu.com/s/1OcpCP91tRP1Jqw3MJsUrcA

提取密码:m1ej

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:拖动  拖动词条  三级  三级词条  页面  页面词条  教程  教程词条  Axure  Axure词条  
原型

 Axure 教程:web网站原型...

分享个人在绘制PC端web网站交互原型中一些设计技巧,enjoy~技巧一:搭建导航框架页面当自己还是一个小白时,开始着手设计web界面时,最容易犯的一个错误就是...(展开)