本文通過講解制作QQ音樂交互原型的過程，了解如何實現(xiàn)旋轉(zhuǎn)、計時器以及拖動等常見的交互效果。案例中綜合運用了動態(tài)面板的循環(huán)、狀態(tài)改變、拖動、文本改變以及旋轉(zhuǎn)等事件，通過本案例的講解，相信大家對于動態(tài)面板等高級元件的綜合運用又會有一個新的認(rèn)識。

觀察交互效果

通過觀察我們發(fā)現(xiàn)本案例中主要有以下3個交互效果：

（1）播放音樂時：

1. 開始播放，按鈕切換為暫停；
2. 唱片順時針勻速旋轉(zhuǎn)；
3. 進(jìn)度條水平向右逐漸變長；
4. 進(jìn)度球隨進(jìn)度條延伸的方向移動；
5. 計時音樂播放時長。

（2）播放結(jié)束/暫停時：

1. 切換為播放按鈕；
2. 進(jìn)度條不在變化長度；
3. 進(jìn)度球停止移動；
4. 計時器停止計時；
5. 唱片停止旋轉(zhuǎn)；

（3）拖動播放進(jìn)度時：

1. 進(jìn)度條沿著水平方向變化尺寸；
2. 進(jìn)度球沿著水平方向移動；
3. 計時器同步變化時間。

思路分析

剛才我們已經(jīng)仔細(xì)觀察了頁面中的交互效果，現(xiàn)在我們需要分析實現(xiàn)這些效果的思路與方法。

效果1：播放音樂

唱片不停的進(jìn)行勻速自轉(zhuǎn)，進(jìn)度條以及跟隨的進(jìn)度球勻速水平向右移動，計時器計算音樂播放時長，這些有規(guī)律性的動作如何實現(xiàn)呢？

準(zhǔn)備工作：通過設(shè)定全局變量OnLoadVariable控制唱片的循環(huán)旋轉(zhuǎn)，準(zhǔn)備兩個動態(tài)面板作為指示器，通過動態(tài)面板狀態(tài)的循環(huán)切換控制著這些規(guī)律性的動作。指示器1控制進(jìn)度條、進(jìn)度球的移動，指示器2用來控制計時器循環(huán)計時。

下面我們來具體分析下各元件的交互配置：

（1）播放按鈕-單擊事件

1. 點擊播放按鈕時，按鈕由原來的播放切換為關(guān)閉；
2. 全局變量賦值為1，唱片循環(huán)旋轉(zhuǎn)；
3. 順時針旋轉(zhuǎn)唱片，每500毫秒旋轉(zhuǎn)10度；
4. 循環(huán)切換指示器1的狀態(tài)，循環(huán)間隔為900毫秒；
5. 循環(huán)切換指示器2的狀態(tài)，循環(huán)間隔為1秒。

（2）唱片-旋轉(zhuǎn)事件

• 如果全局變量OnLoadVariable為1，順時針旋轉(zhuǎn)唱片10度，事件500毫秒；
• 如果全局變量OnLoadVariable為0，等待1秒，順時針旋轉(zhuǎn)唱片0度（沒有停止旋轉(zhuǎn)事件，只能通過旋轉(zhuǎn)角度來達(dá)到停止的目的）。

（3）指示器1-狀態(tài)改變時事件（控制進(jìn)度條和進(jìn)度球）

如果進(jìn)度條（動態(tài)面板）的寬度<進(jìn)度的寬度，則：

• 進(jìn)度條的寬度每0.5秒增加的尺寸=進(jìn)度寬度/215，高度不變，寬度表達(dá)式為[[LVAR1.width+LVAR2.width/215]]，局部變量LVAR1為進(jìn)度條，LVAR2為進(jìn)度；
• 進(jìn)度球（動態(tài)面板）移動至：X軸坐標(biāo)=進(jìn)度條X坐標(biāo)+進(jìn)度條的寬度，Y軸坐標(biāo)不變，X坐標(biāo)函數(shù)表達(dá)式為[[LVAR1.x+LVAR1.width]]，局部變量LVAR1為進(jìn)度條。

否則，此時歌曲已經(jīng)播放完畢，等待1秒，刷新當(dāng)前頁面。

（4）指示器2-狀態(tài)改變時事件（輔助計時）

• 秒針文本自動+1；
• 計數(shù)文本自動+1，計數(shù)文本隱藏。

（5）計數(shù)-文本改變時事件（輔助計時）

當(dāng)計數(shù)文本=215時，指示器2停止循環(huán)，歌曲的總時長為3分35秒，換算成秒=215秒，這里的計數(shù)文本主要負(fù)責(zé)終止計時功能。

（6）秒針-文本改變時事件

1. 如果文字長度為1位時，則在前面加個0；
2. 如果文字長度大于1位時，則直接顯示元件文字；
3. 如果元件文字等于60，則秒針元件文字為00，分針自動+1，并加個前綴0。

效果2：播放結(jié)束/暫停播放

（1）停止按鈕-單擊事件

• 按鈕切換為暫停狀態(tài)；
• 設(shè)置全局變量OnLoadVariable為0，唱片停止旋轉(zhuǎn)；
• 指示器1和指示器2停止循環(huán)。

效果3：拖動播放進(jìn)度

進(jìn)度球-拖動時事件：水平方向上在進(jìn)度條范圍內(nèi)移動。

進(jìn)度球-拖動結(jié)束時事件：

• 進(jìn)度條的寬度=進(jìn)度球X軸坐標(biāo)-進(jìn)度條X軸坐標(biāo)；
• 計時器秒針表達(dá)式為[[Math.floor(LVAR1.width/LVAR2.width*215%60)]] ，局部變量LVAR1為進(jìn)度條，LVAR2為進(jìn)度，函數(shù)Math.floor用于向下取整，獲取小于等于指定數(shù)值的最大整數(shù)，%表示求前后兩個數(shù)相除的余數(shù)；
• 計時器分針表達(dá)式為0[[Math.floor(LVAR1.width/LVAR2.width*215/60)]]。

結(jié)語

好了，現(xiàn)在我們終于將所有元件的交互事件都配置好了，有點遺憾的是Axure中不能插入音頻文件，所以在預(yù)覽效果時，請同學(xué)們自行腦補音樂。

演示效果預(yù)覽：https://l0ag8w.axshare.com

#專欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計經(jīng)驗，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場景探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供