今天跟大家交流一下动态面板的简单入门用法,我们来做一个简单的隐藏现实的动态效果好了。
工具/原料
axure
电脑
方法/步骤
1、首先我们新建一稍僚敉视个axure文件,在里面随意放一个列表框,2个标题:一个是列表一个是图片,我们要实现点击不同的标题,显示不同的内容。
2、然后我们从左边元件库中选择动态面板拖动到右边。
3、调整动态面板的大小,刚好盖住表格就可以。这时候这个动态面板默认是可见的。
4、我们右键单击,选择把动态面板设置为默认隐藏状态。
5、然后双击一下这个动态面板,跳出来一个属性框,我们把标题改一下,以便以后的使用。烂瘀佐栾这里我们改成:列表图片切换。
6、然后我们在右下角的元件管理找到这个‘’列表图片切换‘’的面板,双击下面的‘’state1‘’。
7、打开了动态面板的编辑框,我们可以在此处编辑任何内容,这里的东西不会影响主页面上的任何元件。
8、为了演示图片,我们把背景用一个矩形框填满,然后拖三个图片元件放在这里。
9、然后回到主界面,点选‘’图片‘’标题,然后双击右边的‘’鼠标单击时‘’以打开动作编辑器。
10、然后依照以下步骤选取动作,并把动态面板的显示状态改成‘’显示‘’。
11、同样的方法把列表标题也设置缬方焱蜱一下,这回要达到的效果是点击文字,图片就隐藏了,因此这里要把动态面板的显姨胀兽辱示状态改成‘’隐藏‘’。至此,通过点击不同的标题,可以切换不同的显示效果就做好了,可以运行起来预览一下效果了。