滑动菜单
时长:
指导老师:Axure官网
困难程度:容易
主要内容
本课程学习制作带进行/退出动画的可隐藏和显示的选项菜单,在iPhone应用原型,可以使用这个方法隐藏和显示上传按钮,设置选项,或所有上,下滑动时显示和隐藏的内容。如果不需要动画,用显示/隐藏面板动作快速实现交互效果
一、向上滑动菜单面板
步骤1:添加图片热区
首先,打开AxureiPhoneApp.zip压缩包的iPhoneApp-SlidingMenuTutorial.rp文件。
由于导航按钮是一张图片,在“向上的大姆指”和“向下的大姆指”中间的按钮项上添加一个图片热区组件。另外,因为“Add Bookmark”按钮是用两个部件组合创建的,我们希望按钮的整个区域能够被点击,所以,在“Add Bookmark”按钮上也添加图片热区部件。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤2:将按钮菜单转换为动态面板
用设置面板状态行为,创建菜单滑动效果。首先,选中所有菜单部件,右键快捷菜单,选择“转换->转换为动态面板”,将整个滑动菜单转换为动态面板,命名动态面板标签为“SlideUpMenu”。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤3:将动态面板设为隐藏
将动态面板设为默认为隐藏。将动态面板设为隐藏是由于动态面板可见时,我们不能点击动态面板上的选项,即使状态为空时也不行。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤4:在图片热区添加OnClick事件
现在开始添加OnClick事件交互动作,首先在图片热区添加,双击OnClick事件添加用例。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤5:设置切换面板状态到“Menu”,向上滑动
选择动作“设置面板状态为指定状态”,选择配置SlidingMenu面板。默认选项为Menu状态。在动画下拉选单中,选择“向上滑动”选项。
点击确定,关闭用例编辑器。
注意:设置面板状态动作会自动显示动态面板,所以,不需要再添加显示面板动作。
二、向下滑动面板
步骤1:打开Menu状态页,在按钮上添加OnClick事件
在动态面板管理窗口,双击Menu状态,打开状态页。在之前添加的“Add Bookmark”图片热区上,设置OnClick事件
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤2:切换面板设置为“None”,向下滑动
使用设置面板状态动作,向下滑动动画,隐藏动态面板。如果使用隐藏面板动作,虽然可以隐藏动态面板,但没有滑动动画效果。
选择“设置面板状态为指定状态”动作,选择设置状态为Empty。退出动画选择“向下滑动”选项
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤3:将SlideUpMenu面板移动到合适的位置
最后,移动SlideUpMenu面板到合适的位置,移动时可以按住Shift键,拖动面板,这时面板将在轴线上平行移动。
生成原型测试效果。上传到AxShare在移动端查看原型。
如果隐藏的菜单无法正常交互,再确认一下动作的排列顺序是否有误
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
本课程原创内容来源:Axure官网(www.axure.com) 翻释:陪学网