摘要：本文通過(guò)講解制作QQ音樂(lè)交互原型的過(guò)程，了解如何實(shí)現(xiàn)旋轉(zhuǎn)、計(jì)時(shí)器以及拖動(dòng)等常見(jiàn)的交互效果。案例中綜合運(yùn)用了動(dòng)態(tài)面板的循環(huán)、狀態(tài)改變、拖動(dòng)、文本改變以及旋轉(zhuǎn)等事件，通過(guò)本案例的講解，相信大家對(duì)于動(dòng)態(tài)面板等高級(jí)元件的綜合運(yùn)用又會(huì)有一個(gè)新的認(rèn)識(shí)。
觀察交互效果
通過(guò)觀察我們發(fā)現(xiàn)本案例中主要有以下3個(gè)交互效果：
播放音樂(lè)時(shí)：
開(kāi)始播放，按鈕切換為暫停
唱片順時(shí)針勻速旋轉(zhuǎn)
進(jìn)度條水平向右逐漸變長(zhǎng)
進(jìn)度球隨進(jìn)度條延伸的方向移動(dòng)
計(jì)時(shí)音樂(lè)播放時(shí)長(zhǎng)
播放結(jié)束/暫停時(shí)：
切換為播放按鈕
進(jìn)度條不在變化長(zhǎng)度
進(jìn)度球停止移動(dòng)
計(jì)時(shí)器停止計(jì)時(shí)
唱片停止旋轉(zhuǎn)
拖動(dòng)播放進(jìn)度時(shí)：
進(jìn)度條沿著水平方向變化尺寸
進(jìn)度球沿著水平方向移動(dòng)
計(jì)時(shí)器同步變化時(shí)間
思路分析
剛才我們已經(jīng)仔細(xì)觀察了頁(yè)面中的交互效果，現(xiàn)在我們需要分析實(shí)現(xiàn)這些效果的思路與方法。
效果1：播放音樂(lè)
唱片不停的進(jìn)行勻速自轉(zhuǎn)、進(jìn)度條以及跟隨的進(jìn)度球勻速水平向右移動(dòng)、計(jì)時(shí)器計(jì)算音樂(lè)播放時(shí)長(zhǎng)，這些有規(guī)律性的動(dòng)作如何實(shí)現(xiàn)呢
準(zhǔn)備工作：通過(guò)設(shè)定全局變量OnLoadVariable控制唱片的循環(huán)旋轉(zhuǎn)，準(zhǔn)備兩個(gè)動(dòng)態(tài)面板作為指示器，通過(guò)動(dòng)態(tài)面板狀態(tài)的循環(huán)切換控制著這些規(guī)律性的動(dòng)作。指示器1控制進(jìn)度條、進(jìn)度球的移動(dòng)，指示器2用來(lái)控制計(jì)時(shí)器循環(huán)計(jì)時(shí)。
下面我們來(lái)具體分析下各元件的交互配置
播放按鈕—單擊事件
點(diǎn)擊播放按鈕時(shí)，按鈕由原來(lái)的播放切換為關(guān)閉
全局變量賦值為1，唱片循環(huán)旋轉(zhuǎn)
順時(shí)針旋轉(zhuǎn)唱片，每500毫秒旋轉(zhuǎn)10度
循環(huán)切換指示器1的狀態(tài)，循環(huán)間隔為900毫秒
循環(huán)切換指示器2的狀態(tài)，循環(huán)間隔為1秒
唱片-旋轉(zhuǎn)事件
如果全局變量OnLoadVariable為1，順時(shí)針旋轉(zhuǎn)唱片10度，事件500毫秒
如果全局變量OnLoadVariable為0，等待1秒，順時(shí)針旋轉(zhuǎn)唱片0度（沒(méi)有停止旋轉(zhuǎn)事件，只能通過(guò)旋轉(zhuǎn)角度來(lái)達(dá)到停止的目的）
指示器1—狀態(tài)改變時(shí)事件（控制進(jìn)度條和進(jìn)度球）
如果進(jìn)度條（動(dòng)態(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)度球（動(dòng)態(tài)面板）移動(dòng)至：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)度條
否則：此時(shí)歌曲已經(jīng)播放完畢，等待1秒，刷新當(dāng)前頁(yè)面
指示器2—狀態(tài)改變時(shí)事件（輔助計(jì)時(shí)）
秒針文本自動(dòng)+1
計(jì)數(shù)文本自動(dòng)+1，計(jì)數(shù)文本隱藏
計(jì)數(shù)—文本改變時(shí)事件（輔助計(jì)時(shí)）：當(dāng)計(jì)數(shù)文本=215時(shí)，指示器2停止循環(huán)，歌曲的總時(shí)長(zhǎng)為3分35秒，換算成秒=215秒，這里的計(jì)數(shù)文本主要負(fù)責(zé)終止計(jì)時(shí)功能。
秒針-文本改變時(shí)事件
如果文字長(zhǎng)度為1位時(shí)，則在前面加個(gè)0
如果文字長(zhǎng)度大于1位時(shí)，則直接顯示元件文字
如果元件文字等于60，則秒針元件文字為00，分針自動(dòng)+1，并加個(gè)前綴0
效果2：播放結(jié)束/暫停播放
停止按鈕—單擊事件
按鈕切換為暫停狀態(tài)
設(shè)置全局變量OnLoadVariable為0，唱片停止旋轉(zhuǎn)
指示器1和指示器2停止循環(huán)
效果3：拖動(dòng)播放進(jìn)度
進(jìn)度球—拖動(dòng)時(shí)事件：水平方向上在進(jìn)度條范圍內(nèi)移動(dòng)
進(jìn)度球—拖動(dòng)結(jié)束時(shí)事件
進(jìn)度條的寬度=進(jìn)度球X軸坐標(biāo)-進(jìn)度條X軸坐標(biāo)
計(jì)時(shí)器秒針表達(dá)式為[[Math.floor(LVAR1.width/LVAR2.width*215%60)]] ，局部變量LVAR1為進(jìn)度條，LVAR2為進(jìn)度，函數(shù)Math.floor用于向下取整，獲取小于等于指定數(shù)值的最大整數(shù)，%表示求前后兩個(gè)數(shù)相除的余數(shù)
計(jì)時(shí)器分針表達(dá)式為0[[Math.floor(LVAR1.width/LVAR2.width*215/60)]]
好了，現(xiàn)在我們終于將所有元件的交互事件都配置好了，有點(diǎn)遺憾的是Axure中不能插入音頻文件，所以在預(yù)覽效果時(shí)，請(qǐng)同學(xué)們自行腦補(bǔ)音樂(lè)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。