文章分享了網易云音樂唱片機播放效果的原型設計過程，希望對你有所受用。

申明：本文僅僅是探索學習網易云音樂App的樣式和交互設計，和網易云音樂App本身無關。

網易云音樂App在播放音樂時，擬物化地顯示一個唱片機。開始播放時，音樂響起，唱片開始旋轉，唱臂輕輕旋轉后搭在唱片上，暫停時，唱片漸漸停下來，唱臂也從唱片上移走。

我們可通過Axure的交互設計動作的設置，精確控制它的交互操作，例如在暫停時，讓唱片再次旋轉一點角度，等待停下來后，再將唱臂移走，請注意后面設置交互動作的順序。

點擊這里在線查看效果。

01 界面布局

唱片機由一個唱片和一個唱臂組成，先準備好兩張圖片。

兩張圖片都是PNG格式的透明背景，將兩張圖片拖動到設計界面上，調整好位置。添加一個“開始”按鈕和一個“結束”按鈕。

02 交互處理

這次主要看看交互事件的處理步驟。

1. 定義一個全局變量running，用來控制播放還是暫停

running=0表示暫停，running=1表示播放狀態，初始值為0。

2. 給唱片機添加載入事件，載入事件里處理循環操作

1）判斷running是否等于1，如果等于1繼續下面的操作

2）順時針旋轉0.1度

3）等待1毫秒

4）觸發當前元件的載入事件，實現循環操作

這里每次旋轉了很小的角度，并且等待很短的時間，目的是為了讓旋轉看起來更平滑。

3. 給唱臂添加單擊事件，處理移入和移出唱片的旋轉效果

1）判斷當前是否處于播放狀態，即running等于1，如果是，繼續下一步

2）順時針旋轉唱臂20度，時長為0.5秒，注意旋轉的錨點是在圖片的左上角

3）如果不是處于播放狀態，則

4）逆時針旋轉20度，時長為0.5秒

4. “開始”按鈕的控制

1）設置變量running為1，表示開始播放

2）禁用當前按鈕，防止誤點擊；同時啟用“暫?！卑粹o

3）觸發唱片的載入事件，旋轉唱片

4）觸發唱臂的單擊事件，旋轉唱臂到唱片上

5. “暫?！卑粹o的控制，該按鈕事件和“開始”按鈕正好相反

1）設置變量running為0，表示暫停

2）啟用“開始”按鈕，同時禁用“暫?！卑粹o

3）為了體驗更好，我們讓唱片旋轉一個小角度后再停下來，順時針旋轉了5度，時長0.5秒

4）等待0.5秒，等待上面的旋轉停止

5）觸發唱臂回到原處

所有交互已經處理完畢，可以預覽一下效果了。

03 小結

唱片機的原型主要應用了元件的旋轉操作，需要注意如何處理循環操作，同時也需要注意全局變量在這里是如何控制播放的暫停的邏輯的。

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議