中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

觀察交互效果

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

（1）播放音樂時(shí)：

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

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

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

（3）拖動(dòng)播放進(jìn)度時(shí)：

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

思路分析

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

效果1：播放音樂

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

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

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

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

1. 點(diǎn)擊播放按鈕時(shí)，按鈕由原來的播放切換為關(guān)閉；
2. 全局變量賦值為1，唱片循環(huán)旋轉(zhuǎn)；
3. 順時(shí)針旋轉(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，順時(shí)針旋轉(zhuǎn)唱片10度，事件500毫秒；
• 如果全局變量OnLoadVariable為0，等待1秒，順時(shí)針旋轉(zhuǎn)唱片0度（沒有停止旋轉(zhuǎn)事件，只能通過旋轉(zhuǎn)角度來達(dá)到停止的目的）。

（3）指示器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è)面。

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

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

（5）計(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í)功能。

（6）秒針-文本改變時(shí)事件

1. 如果文字長(zhǎng)度為1位時(shí)，則在前面加個(gè)0；
2. 如果文字長(zhǎng)度大于1位時(shí)，則直接顯示元件文字；
3. 如果元件文字等于60，則秒針元件文字為00，分針自動(dòng)+1，并加個(gè)前綴0。

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

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

• 按鈕切換為暫停狀態(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)]]。

結(jié)語(yǔ)

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

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

#專欄作家#

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

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

題圖作者提供