Axure案例:QQ音樂播放界面

10 評論 20371 瀏覽 91 收藏 8 分鐘

本文通過講解制作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)載

題圖作者提供

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 需要源文件的同學(xué)請移步https://www.axureshop.com/a/92653.html

    來自北京 回復(fù)
    1. 厲害,這個你花了多長時間做完的???
      感覺老板不會給我這么長時間做這個東西~

      來自湖北 回復(fù)
  2. 回復(fù)
  3. 回復(fù)
  4. 你好,能不能把原文件發(fā)我郵箱學(xué)習(xí)一下?。恐x謝!282673929@qq.com

    回復(fù)
  5. 回復(fù)
  6. 回復(fù)