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

1、!ju vx一般按钮都会设计一个点击动画作为反馈，提醒用户点击成功了。下面是一种波纹动画效果, 接下来我们看一下在AXUre中怎么实现这种点击效果。基本原理就是设计一个隐藏的半透明的圆，在鼠标点击的时候将其移动到鼠标的位置，然后逐渐变大和消失。下面为具体步骤：1、首先拖入一个矩形框，设置背景色和圆角；2、 拖入一个圆，设置为半透明色，然后大小设置为2 （尽量小即可），然后设置为隐藏;PlILMi 1 H.AOaSUa =*ftIo NI3、下面就可以设置交互了，单击按钮后动作顺序依次为：移动圆到鼠标位置 显示圆逐渐放大圆同时让圆逐渐消失 隐藏圆。1）移动圆到鼠标点击位置，鼠标的位置可以通过鼠标

2、指针位置变量Cursor.x和Cursor.y获得；HQ V f Y 3M A TU HS媲充；Otc* I M I .1QQ0tiIIti oo I13POL I衣亜互邮整击旳.rJS a7. 32*lfi1 叱2）继续添加一个动作，显示圆；3） 继续添加一个设置尺寸的动作，在500ms内将圆放大至300 （这个值可以自定义，足够大 就行）；第击时移动阖形）驾达Cursor. X）JH SC UrSOr yJJ单击时移动（El形l ffursoF ）J 匸 urovm显示個S显TE （圖物½Rr（园肠为300M300锚点届中应退出500b' 显示/想權洒加旨标目無（園形）&

3、lt;>00显TnUJ1<吕OOW更参证顷A取 确宦5）最后我们需要将圆恢复原来的大小，AXURE中同一个事件下设置的动作默认是同时执行的，而将圆恢复原来的大小必须要在前面的动作都完成以后才能进行，因此我们要先添加一 个等待动作，持续为500ms然后再将圆设置为原来的大小。爾尺寸额目第:C画脇为2Hx 2ra胃手居RI-:上h :5sNone6）效果如下，可以看到圆放大以后的阴影在按钮框外也能看到，所以我们要想办法隐藏超 出按钮框外的圆。在 AXUre中动态面板可以实现这一功能，将动态面板大小设置为和按钮一 样大（包括圆角），然后将按钮和圆一起复制到动态面板中。7）当元素位于动态面

4、板中时，移动元件的坐标系远点在动态面板的左上角，而不是全局坐 标系。所以要将第一步中的鼠标位置减去动态面板在全局坐标系的位置，如下所示。如果将 上面的有的单击事件设置为单击动态面板时执行，则动态面板的坐标可以直接用This.x和This.y 表示。审单击肘P M券S- - J1 (kLUjt>? X-IZaJj iLUSrclr.y-12 OJ)iIJI>)到达Cursor 125JA Curor.-120V HhJoeSH*B经过以上设置即可实现波纹点击动画效果，但还有一个小问题，由于整个过程执行需要 500ms,如果在动画未执行完之前再次点击鼠标就可能导致动画混乱，因此我们还要做一些 限制，即在动画执行开始时禁用按钮，执行完之后再启用，避免出现这种情况。样式交互说明jJ ZLtit”单击时1 到达(Cursor.x-125.Cursor.y-120)I颐目