本文主要是介绍Axure 9 实战案例，交互事件的应用 4，点击按钮显示波纹特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>
在年前（2020年）小默曾绘制过一个Axure作品，里边有一个点击按钮显示波纹特效（点击了解更多），有不少同学询问如何实现。那么本篇我们就来讲解一下这里用到的交互事件，以显示隐藏事件与等待事件的应用，绘制按钮的波纹特效。
我们先来看看完整效果图，大家可以看到按钮点击效果主要组成包括（由于整个作品比较复杂，这里我们只拆解按钮点击效果这部分交互）：
①点击右下角的圆形时，以波纹特效打开菜单；
②波纹扩大时，中心的＋号会旋转；
③波纹只能填充满手机框，不会溢出框外。
下面就来给大家讲解一下，如何绘制按钮波纹特效的步骤。
第一步：设计波纹草图
首先拖入一个圆形，命名为按钮，再设置大小为50×50，边框为0，填充单色颜色为绿色；然后在圆形中输入文字＋号，并设置大小为36，字体颜色为白色。
接着再拖入一个圆形，命名为圆形1，再设置大小为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~5。
第二步：设置点击效果
首先选中圆形按钮，在右侧栏的交互中，依次点击新建交互-单击时-显示隐藏-圆形1，默认为显示；然后点击添加目标-按钮，设置为隐藏；再点击添加动作-等待，设置为100毫秒。
接着选中显示隐藏与等待的交互，按Ctrl+C（复制交互到剪贴板），再点击选中单击时交互，按Ctrl+V 4次（粘贴多4份交互到单击时交互中）；然后修改这4份交互中的显示目标为圆形2~5、隐藏目标为圆形1 ~ 4。
再接着点击添加动作，依次点击显示隐藏-按钮，默认为显示；然后选中圆形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年入行的原创实力保障！！点击前去关注>>
这篇关于Axure 9 实战案例，交互事件的应用 4，点击按钮显示波纹特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
