Axure可以实现很多的交互原型的效果,事件的选择可以实现很多元件之间的联动,下面就来看一下如何使用Axure来实现上拉列表交互的动画效果吧!
工具/原料
Axure原型设计工具
一、交互前的准备工作
1、首先,新建一个原型,在画布当中加入三个元件,一个是列表框,一个是矩形、一个是小水滴icon,分别为这三个元件命名为:lb,jx,icon。
2、双击列表框,添加多项,如下图所示,完成之后点击确定即可,将列表框设置为隐藏,同时选中矩形和icon小图标,按下Ctrl+G键进行编组。
二、设置事件
1、选中矩形,添加用例事件,鼠标单击时,设置显示事件和旋转事件,显示事件针对矩形,旋转事件针对icon。
2、选中列表框,添加选项改变时事件,分别为针对矩形的文本,针对列表框本身的隐藏,和针对小水滴的旋转三个事件。
3、需要注意的是,小水滴的旋转在设置矩形事件的时候是顺时针,这里可以设置成为逆时针,同时需要注意的是,都是需要设置成为绝对位置,否则就不会旋转。
3、运行测试
1、我们选择预览,即可看到实际的运行效果,具体如下图所示,可以看到刚开始仅仅显示矩形和水滴icon。
2、单击矩形或者小水滴时,列表框就会展示出来。这里需要注意的是,这两个元素已经提前设置编组了,所以点击的时候实现的效果是一样的。
3、选择列表框当中的某个元素,这里是省份,该元素就会添加到矩形当中,同时列表框会隐藏,小水滴同步进行旋转。