Axure如何实现上拉列表交互动画效果

2024-10-31 03:09:19

Axure可以实现很多的交互原型的效果,事件的选择可以实现很多元件之间的联动,下面就来看一下如何使用Axure来实现上拉列表交互的动画效果吧!

Axure如何实现上拉列表交互动画效果

2、双击列表框,添加多项,如下图所示,完成之后点击确定即可,将列表框设置为隐藏,同时选中矩形和icon小图标,按下Ctrl+G键进行编组。

Axure如何实现上拉列表交互动画效果

二、设置事件

1、选中矩形,添加用例事件,鼠标单击时,设置显示事件和旋转事件,显示事件针对矩形,旋转事件针对icon。

Axure如何实现上拉列表交互动画效果

2、选中列表框,添加选项改变时事件,分别为针对矩形的文本,针对列表框本身的隐藏,和针对小水滴的旋转三个事件。

Axure如何实现上拉列表交互动画效果

3、需要注意的是,小水滴的旋转在设置矩形事件的时候是顺时针,这里可以设置成为逆时针,同时需要注意的是,都是需要设置成为绝对位置,否则就不会旋转。

Axure如何实现上拉列表交互动画效果Axure如何实现上拉列表交互动画效果

3、选择列表框当中的某个元素,这里是省份,该元素就会添加到矩形当中,同时列表框会隐藏,小水滴同步进行旋转。

Axure如何实现上拉列表交互动画效果
猜你喜欢