如何利用Axure RP 8设计工具控制图片显示和隐藏

 时间:2026-02-13 11:48:58

1、第一步,打开Axure RP 8设计软件,在元件库中找到图片元件,拖曳到编辑区域,设置图片元件宽度为400,高度为200,并将图片元件放置在画布中心位置,如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

2、第二步,选中图片元件,导入图片,并设置图片宽度为400、高度为200,让图片刚好充满图片元件,如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

3、第三步,在图片下方添加两个按钮,分别为显示、隐藏,用于控制图片显示和隐藏,两个按钮分别对齐图片左右两边,如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

4、第四步,选中“显示”按钮,添加鼠标单击时用例,设置动画效果,

可见性:显示

动画:逐渐

时间:2000毫秒

置于顶层

更多选项:弹出效果

如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

5、第五步,选中“隐藏”按钮,添加鼠标单击时用例,

可见性:隐藏

动画:逐渐

时间:2000毫秒

拉动元件

方向:下方

动画:摇摆

时间:2000毫秒

如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

6、第六步,设置显示和隐藏按钮鼠标单击事件,两个按钮出现了数字1和2,这代表按钮绑定了用例,如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

7、第七步,预览该原型页面,单击“隐藏”按钮,图片隐藏消失;单击“显示”按钮,隐藏的图片显示出来,如下图所示:

如何利用Axure RP 8设计工具控制图片显示和隐藏

  • 如何用Axure制作动态倒计时
  • Axure RP 如何实现下拉框二级联动效果
  • Axure制作:鼠标拖拽控件移动
  • C4D-制作圆饼模型建模
  • Axure怎么实现页面载入时元素旋转效果
  • 热门搜索
    内蒙古大学怎么样 刘翔简介 香蕉减肥法 什么菜可以减肥 专业技能怎么写 搬家公司费用怎么算 怎样快速减肥 俞敏洪简介 宽窄巷子攻略 浙江大学城市学院怎么样