|
|
|
下面通过实际案例讲解两个触发事件，先看一下案例截图，如下图所示。
|
|
|
|
|
|
|
|
上图的上图是默认的状态，当点击任何一个查看按钮时会显示相应的图片。
|
|
|
|
需要注意的是，除了图片显示出来了，按钮颜色也改变了。而且当再次点击这个按钮时，刚刚显示出来的图片会消失，并且按钮也恢复之前的颜色，如下图所示。
|
|
|
|
|
|
|
|
如果不是再次点击相同的按钮，而是点击另外一个“查看”按钮，会显示对应的图片，并且被点击的“查看”按钮也改变了颜色。而之前点击的按钮的颜色则恢复了初始颜色，并且对应的图片也消失了。
|
|
|
|
也就是说，点击同一个“查看”按钮可以切换显示或隐藏对应的图片，并且切换被点击按钮的颜色；当点击不同的“查看”按钮时，只能显示被点击按钮对应的图片，改变被点击按钮的颜色，其他图片和按钮会恢复初始状态。
|
|
|
|
|
|
①除了背景图片以外，所有图片的初始状态都是隐藏的，显示时在背景图片上层显示。
|
|
|
|
②每个“查看”按钮都有两种颜色，默认状态的颜色和点击后的颜色。
|
|
|
|
|
|
|
|
⑤每个“查看”按钮恢复初始状态时都能隐藏对应的图片。
|
|
|
|
⑥所有的“查看”按钮只能有一个改变颜色，并且只能将改变颜色的按钮对应的图片显示出来。
|
|
|
|
分析完实现的思路之后，根据思路把这个案例一步步制作出来。
|
|
|
|
|
|
拖入一个矩形，设置其圆角角度，并输入文字“查看”；也可以在样式中单击“文字阴影”按钮，勾选“阴影”选项即可，如下图所示。
|
|
|
|
|
|
|
|
然后，拖入一个图片元件，双击导入图片，作为背景图片，并在背景图片上层再拖入一个图片元件，命名为img，导入首张查看时显示图片。最后将图片元件img设置为隐藏。
|
|
|
|
|
|
颜色在“元件”属性的“交互样式”设置中进行“选中”时样式的设置，如下图所示。
|
|
|
|
|
|
|
|
|
|
“鼠标单击时”通过“切换选中状态”动作切换“当前元件”的选中状态。这样能实现多次点击“查看”按钮时让按钮在两种颜色之间相互切换，如下图所示。
|
|
|
|
|
|
|
|
|
|
为“查看”按钮的“选中时”添加交互，设置为“显示”图片元件img，并且加上“逐渐”的动画效果，如下图所示。
|
|
|
|
|
|
|
|
（5）实现按钮变为未选中状态时，对应的图片重新隐藏
|
|
|
|
这里为“查看”按钮的“未选中时”添加交互，设置为“隐藏”图片元件img，也加上“逐渐”的动画效果。这里介绍的是两个触发事件中另一个触发事件“未选中时”。如下图所示。
|
|
|
|
|
|
|
|
|
|
将刚刚做好的所有内容全选，进行复制。复制完成之后，双击每个img图片元件，导入不同的图片。然后进行预览，发现单击所有的“查看”按钮时都能够显示或者隐藏与按钮对应的图片，如下图所示。
|
|
|
|
|
|
|
|
那么，如何才能只让一个按钮改变颜色，并且只显示与改变颜色按钮相对应的图片呢？这就需要用到关键的一步了：选中所有的“查看”按钮，在属性中将“设置选项组名称”设置为button，如下图所示。
|
|
|
|
|
|
|
|
当设置了选项组名称之后，就能够实现想要的交互效果了。为什么加了一个名称就能够实现效果？这是Axure软件内置的规则，凡是添加了同一组名称的元件，在选中时只能唯一选中最新选中的一个元件，其他元件自动恢复未选中状态。
|
|
|
