文章分享了網(wǎng)易云音樂唱片機(jī)播放效果的原型設(shè)計(jì)過程，希望對(duì)你有所受用。

申明：本文僅僅是探索學(xué)習(xí)網(wǎng)易云音樂App的樣式和交互設(shè)計(jì)，和網(wǎng)易云音樂App本身無關(guān)。

網(wǎng)易云音樂App在播放音樂時(shí)，擬物化地顯示一個(gè)唱片機(jī)。開始播放時(shí)，音樂響起，唱片開始旋轉(zhuǎn)，唱臂輕輕旋轉(zhuǎn)后搭在唱片上，暫停時(shí)，唱片漸漸停下來，唱臂也從唱片上移走。

我們可通過Axure的交互設(shè)計(jì)動(dòng)作的設(shè)置，精確控制它的交互操作，例如在暫停時(shí)，讓唱片再次旋轉(zhuǎn)一點(diǎn)角度，等待停下來后，再將唱臂移走，請(qǐng)注意后面設(shè)置交互動(dòng)作的順序。

點(diǎn)擊這里在線查看效果。

01 界面布局

唱片機(jī)由一個(gè)唱片和一個(gè)唱臂組成，先準(zhǔn)備好兩張圖片。

兩張圖片都是PNG格式的透明背景，將兩張圖片拖動(dòng)到設(shè)計(jì)界面上，調(diào)整好位置。添加一個(gè)“開始”按鈕和一個(gè)“結(jié)束”按鈕。

02 交互處理

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

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

running=0表示暫停，running=1表示播放狀態(tài)，初始值為0。

2. 給唱片機(jī)添加載入事件，載入事件里處理循環(huán)操作

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

2）順時(shí)針旋轉(zhuǎn)0.1度

3）等待1毫秒

4）觸發(fā)當(dāng)前元件的載入事件，實(shí)現(xiàn)循環(huán)操作

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

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

1）判斷當(dāng)前是否處于播放狀態(tài)，即running等于1，如果是，繼續(xù)下一步

2）順時(shí)針旋轉(zhuǎn)唱臂20度，時(shí)長(zhǎng)為0.5秒，注意旋轉(zhuǎn)的錨點(diǎn)是在圖片的左上角

3）如果不是處于播放狀態(tài)，則

4）逆時(shí)針旋轉(zhuǎn)20度，時(shí)長(zhǎng)為0.5秒

4. “開始”按鈕的控制

1）設(shè)置變量running為1，表示開始播放

2）禁用當(dāng)前按鈕，防止誤點(diǎn)擊；同時(shí)啟用“暫停”按鈕

3）觸發(fā)唱片的載入事件，旋轉(zhuǎn)唱片

4）觸發(fā)唱臂的單擊事件，旋轉(zhuǎn)唱臂到唱片上

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

1）設(shè)置變量running為0，表示暫停

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

3）為了體驗(yàn)更好，我們讓唱片旋轉(zhuǎn)一個(gè)小角度后再停下來，順時(shí)針旋轉(zhuǎn)了5度，時(shí)長(zhǎng)0.5秒

4）等待0.5秒，等待上面的旋轉(zhuǎn)停止

5）觸發(fā)唱臂回到原處

所有交互已經(jīng)處理完畢，可以預(yù)覽一下效果了。

03 小結(jié)

唱片機(jī)的原型主要應(yīng)用了元件的旋轉(zhuǎn)操作，需要注意如何處理循環(huán)操作，同時(shí)也需要注意全局變量在這里是如何控制播放的暫停的邏輯的。

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議