axure 元件_在Axure中实现波纹点击特效按钮的方法

一般按钮都会设计一个点击动画作为反馈，提醒用户点击成功了。下面是一种波纹动画效果，接下来我们看一下在Axure中怎么实现这种点击效果。

基本原理就是设计一个隐藏的半透明的圆，在鼠标点击的时候将其移动到鼠标的位置，然后逐渐变大和消失。下面为具体步骤：

1、首先拖入一个矩形框，设置背景色和圆角；

2、拖入一个圆，设置为半透明色，然后大小设置为2（尽量小即可），然后设置为隐藏；

3、下面就可以设置交互了，单击按钮后动作顺序依次为：

移动圆到鼠标位置→显示圆→逐渐放大圆同时让圆逐渐消失→隐藏圆。

1）移动圆到鼠标点击位置，鼠标的位置可以通过鼠标指针位置变量[[Cursor.x]]和[[Cursor.y]]获得；

2）继续添加一个动作，显示圆；

3）继续添加一个设置尺寸的动作，在500ms内将圆放大至300（这个值可以自定义，足够大就行）；

4）同时再添加一个动作，让圆逐渐隐藏；

5）最后我们需要将圆恢复原来的大小，AXURE中同一个事件下设置的动作默认是同时执行的，而将圆恢复原来的大小必须要在前面的动作都完成以后才能进行，因此我们要先添加一个等待动作，持续为500ms然后再将圆设置为原来的大小。

6）效果如下，可以看到圆放大以后的阴影在按钮框外也能看到，所以我们要想办法隐藏超出按钮框外的圆。在Axure中动态面板可以实现这一功能，将动态面板大小设置为和按钮一样大（包括圆角），然后将按钮和圆一起复制到动态面板中。

7）当元素位于动态面板中时，移动元件的坐标系远点在动态面板的左上角，而不是全局坐标系。所以要将第一步中的鼠标位置减去动态面板在全局坐标系的位置，如下所示。如果将上面的有的单击事件设置为单击动态面板时执行，则动态面板的坐标可以直接用This.x和This.y表示。

经过以上设置即可实现波纹点击动画效果，但还有一个小问题，由于整个过程执行需要500ms，如果在动画未执行完之前再次点击鼠标就可能导致动画混乱，因此我们还要做一些限制，即在动画执行开始时禁用按钮，执行完之后再启用，避免出现这种情况。