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，如果在动画未执行完之前再次点击鼠标就可能导致动画混乱，因此我们还要做一些限制，即在动画执行开始时禁用按钮，执行完之后再启用，避免出现这种情况。

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

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
android l 效果,[原]Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的 ...
Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 点击给我投票前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大 ...
python反向缩进_在Pycharm中对代码进行注释和缩进的方法详解
在Pycharm中对代码进行注释和缩进的方法详解一.注释 1. #单行注释 2. """ 多行注释 """ 3. pycharm多行注释快 ...
java中批次号_在一个批次中插入多笔记录的几种方法
插入数据库方法很多,下面Insus.NET列举几种方法,看看你常用的是哪一种: 创建一张表: CREATE TABLE [dbo].[Network_Info] ( [ID] INT NOT NULL ...
lisp画弯箭头_在CAD中直接画箭头的命令的一个方法
在CAD中直接画箭头的命令的一个方法!!! 众所周知,在天正中可直接绘制箭头,而在AutoCAD中不得.最近我发现一个在命令行直接输入命令就可画出你想要的尺寸的箭头的方法,具体实施如下: 1.首先拷贝 ...
python中常见的三种选择结构_在Python中,实现多分支选择结构的最佳方法是
在Python中,实现多分支选择结构的最佳方法是答:if-elif-else 绘制建筑平面图时,被剖切的墙用线绘制,定位轴线用线绘制答:粗实细点画智慧职教: 下列关于书写住院病历的叙述不正 ...
python 读取图片转换为一维向量_对Python中一维向量和一维向量转置相乘的方法详解...
对Python中一维向量和一维向量转置相乘的方法详解在Python中有时会碰到需要一个一维列向量(n*1)与另一个一维列向量(n*1)的转置(1*n)相乘,得到一个n*n的矩阵的情况.但是在pyth ...
python同时打开两个文件_在python中使用with打开多个文件的方法
虽然初恋是java, 可是最近是越来越喜欢python, 所以决定追根溯源好好了解下python的原理,架构等等．小脑袋瓜不太好使,只能记录下慢慢进步吧使用with打开文件的好处不多说,这里记录一下 ...

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

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

最新文章

热门文章