前言
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；如果你还有不理解的地方，可以下载文末的课件继续学习哦。
最终效果图
相关课件
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包材料：
https://item.taobao.com/item.htm?id=631599964711
（@默林如斯原创出品，未经许可，禁止转载，侵权必究）
转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！查看全部教程 >>
网友评论