波纹点击按钮的实现 获赏10金币 基础教程

lsyjohn 普通用户 3月前 455

一般按钮都会设计一个点击动画作为反馈,提醒用户点击成功了。下面是一种波纹动画效果,接下来我们看一下在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,如果在动画未执行完之前再次点击鼠标就可能导致动画混乱,因此我们还要做一些限制,即在动画执行开始时禁用按钮,执行完之后再启用,避免出现这种情况。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (3)
  • 安风 普通用户 8天前
    0 引用 4
    6
  • 真以航(熊岳南京) 普通用户 2月前
    0 引用 3
    感谢分享
  • 沈十三 管理员 3月前
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城