Axure简单使用教程之二:动态面板的入门用法

 时间:2024-11-08 11:03:51

今天跟大家交流一下动态面板的简单入门用法,我们来做一个简单的隐藏现实的动态效果好了。

工具/原料

axure

电脑

方法/步骤

1、首先我们新建一稍僚敉视个axure文件,在里面随意放一个列表框,2个标题:一个是列表一个是图片,我们要实现点击不同的标题,显示不同的内容。

Axure简单使用教程之二:动态面板的入门用法

2、然后我们从左边元件库中选择动态面板拖动到右边。

Axure简单使用教程之二:动态面板的入门用法

3、调整动态面板的大小,刚好盖住表格就可以。这时候这个动态面板默认是可见的。

Axure简单使用教程之二:动态面板的入门用法

4、我们右键单击,选择把动态面板设置为默认隐藏状态。

Axure简单使用教程之二:动态面板的入门用法

5、然后双击一下这个动态面板,跳出来一个属性框,我们把标题改一下,以便以后的使用。烂瘀佐栾这里我们改成:列表图片切换。

Axure简单使用教程之二:动态面板的入门用法

6、然后我们在右下角的元件管理找到这个‘’列表图片切换‘’的面板,双击下面的‘’state1‘’。

Axure简单使用教程之二:动态面板的入门用法

7、打开了动态面板的编辑框,我们可以在此处编辑任何内容,这里的东西不会影响主页面上的任何元件。

Axure简单使用教程之二:动态面板的入门用法

8、为了演示图片,我们把背景用一个矩形框填满,然后拖三个图片元件放在这里。

Axure简单使用教程之二:动态面板的入门用法

9、然后回到主界面,点选‘’图片‘’标题,然后双击右边的‘’鼠标单击时‘’以打开动作编辑器。

Axure简单使用教程之二:动态面板的入门用法

10、然后依照以下步骤选取动作,并把动态面板的显示状态改成‘’显示‘’。

Axure简单使用教程之二:动态面板的入门用法

11、同样的方法把列表标题也设置缬方焱蜱一下,这回要达到的效果是点击文字,图片就隐藏了,因此这里要把动态面板的显姨胀兽辱示状态改成‘’隐藏‘’。至此,通过点击不同的标题,可以切换不同的显示效果就做好了,可以运行起来预览一下效果了。

Axure简单使用教程之二:动态面板的入门用法

keep如何隐藏关注和粉丝 如何查看历史价格 手机QQ的仅聊天功能怎么开启 如何巧妙的运用绳子? 漫播怎么关闭推送开播消息功能
热门搜索
热血高校动漫 图片美化 私人飞机图片 小说动漫 撸图片