Axure 9 实战案例，交互事件的应用 4，点击按钮显示波纹特效_axure按钮点击事件

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

在年前（2020年）小默曾绘制过一个Axure作品，里边有一个点击按钮显示波纹特效（点击了解更多），有不少同学询问如何实现。那么本篇我们就来讲解一下这里用到的交互事件，以显示隐藏事件与等待事件的应用，绘制按钮的波纹特效。

点击按钮显示波纹特效

我们先来看看完整效果图，大家可以看到按钮点击效果主要组成包括（由于整个作品比较复杂，这里我们只拆解按钮点击效果这部分交互）：
①点击右下角的圆形时，以波纹特效打开菜单；
②波纹扩大时，中心的＋号会旋转；
③波纹只能填充满手机框，不会溢出框外。

下面就来给大家讲解一下，如何绘制按钮波纹特效的步骤。

第一步：设计波纹草图

首先拖入一个圆形，命名为按钮，再设置大小为50×50，边框为0，填充单色颜色为绿色；然后在圆形中输入文字＋号，并设置大小为36，字体颜色为白色。

拖入一个圆形，设置为50×50，边框为0，填充为单色绿色

在圆形中输入文字＋号，设置大小为36，字体颜色为白色

接着再拖入一个圆形，命名为圆形1，再设置大小为100×100，边框为0，填充径向颜色为两种绿色；然后在圆形中输入文字×号，并设置大小为36，字体颜色为白色。

再拖入一个圆形，设置为100×100，边框为0，填充为径向绿色

在圆形中输入文字×号，设置大小为36，字体颜色为白色

再接着将圆形1复制粘贴4份，分别命名为圆形2~5，再分别设置大小为200×200、350×350、550×550、800×800（6个圆形大小间隔分别是50、100、150、200、250）；然后修改圆形2和4的文本为＋号。

将圆形1复制4份，命名为圆形2~5，直径为200、350、550、800，修改圆形2和4的文本为＋号

最后选中全部元件，设置为居中对齐和中部对齐；然后在左侧栏的概要中，将元件的排序拖拽为按钮、圆形1~5。

选中全部元件，设置为居中对齐和中部对齐

将元件的排序拖拽为按钮、圆形1~5

第一步效果图

第二步：设置点击效果

首先选中圆形按钮，在右侧栏的交互中，依次点击新建交互-单击时-显示隐藏-圆形1，默认为显示；然后点击添加目标-按钮，设置为隐藏；再点击添加动作-等待，设置为100毫秒。

选中圆形按钮，点击新建交互-单击时-显示隐藏-圆形1

点击添加目标-按钮，设置为隐藏

再点击添加动作

点击等待，设置为100毫秒

接着选中显示隐藏与等待的交互，按Ctrl+C（复制交互到剪贴板），再点击选中单击时交互，按Ctrl+V 4次（粘贴多4份交互到单击时交互中）；然后修改这4份交互中的显示目标为圆形2~5、隐藏目标为圆形1 ~ 4。

将显示隐藏与等待的交互复制4份，修改显示为圆形2~5、隐藏为圆形1 ~ 4

再接着点击添加动作，依次点击显示隐藏-按钮，默认为显示；然后选中圆形1~5，设置为隐藏。

再点击添加动作-显示隐藏-按钮

选中圆形1~5，设置为隐藏

第二步圆形按钮的交互

第三步：设置波纹范围

首先拖入一个动态面板，到圆形上，拖动至合适大小（即圆形填充满动态面板）；然后全选全部圆形（包括按钮），按Ctrl+X（剪切元件到剪贴板），双击动态面板进入编辑状态，再按Ctrl+V（粘贴元件到动态面板中）。

拖入一个动态面板，拖动至合适大小

选中全部圆形（含按钮），剪切粘贴到动态面板中

结语

OK了，通过前面三步操作，点击按钮显示波纹特效就绘制完成了；不过在浏览器预览时，圆形中的＋号可能不居中，这个时候需要我们修改文本的字体和大小了，比如楷体，字号28；如果你还有不理解的地方，可以下载文末的课件继续学习哦。

最终效果图

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p

相关课件

为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。

课件整包链接：
https://item.taobao.com/item.htm?id=631599964711

链接长期有效。

（默林如斯原创出品，未经许可，禁止转载，侵权必究）

《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>

欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>