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

Γ!?γj∣uιιιι vx≡ Γ!?γj∣uιιιι v x≡ ?? 一般按钮都会设计一个点击动画作为反馈，提醒用户点击成功了。下面是一种波纹动画效果, 接下来我们看一下在AXUre中怎么实现这种点击效果。 基本原理就是设计一个隐藏的半透明的圆，在鼠标点击的时候将其移动到鼠标的位置，然后 逐渐变大和消失。下面为具体步骤： 1、 首先拖入一个矩形框，设置背景色和圆角； 2、 拖入一个圆，设置为半透明色，然后大小设置为 2 （尽量小即可），然后设置为隐藏; PlILMi 1 H. PlILMi 1 H. AOa SΛU ?a ■ ■= *ft Io NI 3、下面就可以设置交互了，单击按钮后动作顺序依次为： 移动圆到鼠标位置 →显示圆→逐渐放大圆同时让圆逐渐消失 →隐藏圆。 1）移动圆到鼠标点击位置，鼠标的位置可以通过鼠标指针位置变量 [[Cursor.x]]和[[Cursor.y]] 获得； HQ V f?α Y 3?M ? A TU H S媲充；■ ■ Ot?c* I M Iφ .1QQ∣0tβθ S 媲充；■ ■ O t?c* I M I φ .1QQ∣ 0 tβθi IIti [?oo I 13PO L I 衣 亜互 邮 ??fi1 叱 2） 继续添加一个动作，显示圆； 3） 继续添加一个设置尺寸的动作，在 500ms内将圆放大至300 （这个值可以自定义，足够大 就行）； ▼第击时 移动 阖形）驾达[[[Cursor. X）JH SC UrSOr yJ]J ▼单击时 移动 （El形]?l?? f[[fursoF ）ψJ [匸 ur?oι^vm 显示個S 显TE （圖物 ?≡R^r （园肠为300?M300≡锚点届中应退出500≡b 显示/想權 Γ洒加旨标 目無 （園形） π 0 0 显Tn UJ1? ≡ 吕OO W 更参证顷A 取? ■ 确宦 5）最后我们需要将圆恢复原来的大小， AXURE中同一个事件下设置的动作默认是同时执行 的，而将圆恢复原来的大小必须要在前面的动作都完成以后才能进行，因此我们要先添加一 个等待动作，持续为500ms然后再将圆设置为原来的大小。 爾尺寸 额目第 : C画脇为2Hx 2ra胃手居R I - : :上 h Λ :?5s None 6）效果如下，可以看到圆放大以后的阴影在按钮框外也能看到，所以我们要想办法隐藏超 出按钮框外的圆。在 AXUre中动态面板可以实现这一功能，将动态面板大小设置为和按钮一 样大（包括圆角），然后将按钮和圆一起复制到动态面板中。 7）当元素位于动态面板中时，移动元件的坐标系远点在动态面板的左上角，而不是全局坐 标系。所以要将第一步中的鼠标位置减去动态面板在全局坐标系的位置，如下所示。如果将 上面的有的单击事件设置为单击动态面板时执行，则动态面板的坐标可以直接用 This.x和 This.y 表示。 审单击肘 P ?? M券■ ?S≡∕√- - ^J1≤ ([kLUΓjt?? X-IZaJj i[^LUΓ Srclr.y-12 OJ]) ?i≡IJI) 到达 [[Cursor ^125J[ A ? [[Cur≡or.γ-120]] V H hJo∩e ?S?H?* B? 经过以上设置即可实现波纹点击动画效果，但还有一个小问题，由于整个过程执行需要 500ms,如果在动画未执行完之前再次点击鼠标就可能导致动画混乱，因此我们还要做一些 限制，即在动画执行开始时禁用按钮，执行完之后再启用，避免出现这种情况。 样式 交互? 说明 j?J^^ ZL≠?τ? tit ”单击时 1 到达([[Cursor.x-125]].[[Cursor.y-120]]) I颐目标I 启用廛用 1 设置尺寸 1 ? 30θKx盹O髙盛点居中缰嵋退出500≡? 隐藏1逐渐随。毫秒 500 ms 设置甩寸 ι? ZSx 誉点居中 启用虎用 启用1