编辑导读：音频播放特效各人都应该见过，本文作者操作Axure动态面板成果对音频播放动效举办了一个简朴的原型设计，并对进程中碰着的一些问题举办了简朴的梳理，与各人分享。

局部动态的展示可以或许的快速的吸引用户眼球，本次案例建造一个音频播放的动效，通过动效的 *** 提现交互样式。

筹备

Axure 8（或Axure 9）软件已安装。

把握根基的软件利用。

熟悉动态面板。

本教程常识点

基本动态面板应用。

元件移动跟尾。

移动界线值的判定。

具体教程

本文以音频播放声纹为展示动，点击播放，声纹向左移动，点击暂停，声纹遏制移动，点击删除按钮，声纹遏制移动为案例举办慢慢讲授。

1. 搭建基本的框架

音频模仿展示区域（动态面板）

节制器：两个状态的动态面板，操作动态面板状态切换触动员效。

播放节制：动态面板，切换播放与暂停。

其它元件：文字、矩形。

2. 让音频声纹在局部展示

操作动态面板的外部只展示局部的属性举办音频声纹的局部展示。

虚线区域为动态面板可展示区域。

3. 音频声纹设置展示区域与动效道理

（1）设置

筹备音频声纹（长度和动态面板可视区域沟通）。

复制音频声纹文件一份，拖动至之一个音频文件尾部，举办收尾毗连。

（2）动效道理

音频声纹、音频声纹-复制同时移动，当音频声纹移动出动态面板区域后，自动移动至原始的音频声纹-复制区域，这样就可以将组成持续的声纹交互。

4. 让音频可控的动起来

操作动态面板的状态改变的交互事件让音频声纹与音频声纹复制凭据纪律的节拍移动起来。

点击外部开始动态面板按钮时，配置节制器动态面板凭据轮回切换下一个举办节制。

点击暂停时，让节制器的动态面板处于暂停状态。

配置节制器动态面板，每切换一次状态，移动音频声纹与音频声纹复制必然的间隔。同时给声纹配置更大的移动间隔（音频声纹的长度）。

同道理图，在音频声纹移动出动态面板区域后，使其移动至原始的音频声纹-复制位置。依次轮回。

5. 优化细节

配置暂停时，节制器动态面板切换为暂停。

配置删除时，假如音频声纹在模仿播放，将节制器动态面板切换为暂停。

总结

多重的动态面板嵌套利用，必然要找对对应事件的动态面板（元件定名很重要）

可以操作移动+动态面板作为触发器实现简朴的动效交互。

本案例也合用于弹幕的样式交互，只需改革对应动态面板的巨细与内部文字的位置。

#专栏作家#

Brose，微信公家号：PMYX，人人都是产物司理专栏作家。存眷告白营销、K12教诲、伶俐零售。擅长系统需求挖掘与成果设计。