Axure入門案例系列：簡單音頻播放動效

局部動態的展示能夠的快速的吸引用户眼球，本次案例製作一個音頻播放的動效，通過動效的方式提現交互樣式。

準備

• Axure 8（或Axure 9）軟件已安裝。
• 掌握基本的軟件使用。
• 熟悉動態面板。

本教程知識點詳細教程

本文以音頻播放聲紋為展示動，點擊播放，聲紋向左移動，點擊暫停，聲紋停止移動，點擊刪除按鈕，聲紋停止移動為案例進行逐步講解。

1. 搭建基礎的框架

音頻模擬展示區域（動態面板）

控制器：兩個狀態的動態面板，利用動態面板狀態切換觸發動效。

播放控制：動態面板，切換播放與暫停。

其它元件：文字、矩形。

2. 讓音頻聲紋在局部展示

利用動態面板的外部只展示局部的屬性進行音頻聲紋的局部展示。

虛線區域為動態面板可展示區域。

3. 音頻聲紋配置展示區域與動效原理

（1）配置

準備音頻聲紋（長度和動態面板可視區域相同）。

複製音頻聲紋文件一份，拖動至第一個音頻文件尾部，進行收尾連接。

（2）動效原理

音頻聲紋、音頻聲紋-複製同時移動，當音頻聲紋移動出動態面板區域後，自動移動至原始的音頻聲紋-複製區域，這樣就可以將構成連續的聲紋交互。

4. 讓音頻可控的動起來

利用動態面板的狀態改變的交互事件讓音頻聲紋與音頻聲紋複製按照規律的節奏移動起來。

點擊外部開始動態面板按鈕時，設置控制器動態面板按照循環切換下一個進行控制。

點擊暫停時，讓控制器的動態面板處於暫停狀態。

設置控制器動態面板，每切換一次狀態，移動音頻聲紋與音頻聲紋複製一定的距離。同時給聲紋設置最大的移動距離（音頻聲紋的長度）。

同原理圖，在音頻聲紋移動出動態面板區域後，使其移動至原始的音頻聲紋-複製位置。依次循環。

5. 優化細節

設置暫停時，控制器動態面板切換為暫停。

設置刪除時，如果音頻聲紋在模擬播放，將控制器動態面板切換為暫停。

總結

• 多重的動態面板嵌套使用，一定要找對對應事件的動態面板（元件命名很重要）
• 可以利用移動+動態面板作為觸發器實現簡單的動效交互。
• 本案例也適用於彈幕的樣式交互，只需改造對應動態面板的大小與內部文字的位置。

本文由 @Brose 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。