本文以QQ音樂為例，實(shí)現(xiàn)了帶時(shí)間的進(jìn)度條、歌詞顏色變化、唱片旋轉(zhuǎn)、暫停播放等原型交互。

一、效果展示

1. 體驗(yàn)地址：https://v0u9to.axshare.com
2. 原型下載鏈接：https://pan.baidu.com/s/1jbrZnENr2MLZvzlWgIze-g 提取碼：34gu
3. 交互說明：點(diǎn)擊播放、暫停按鈕可實(shí)現(xiàn)原型的播放與暫停；左右拖動頁面可切換唱片、全屏歌詞頁面。

二、唱片旋轉(zhuǎn)

1. 實(shí)現(xiàn)的效果

點(diǎn)擊播放按鈕時(shí)，唱片緩慢地圍繞其自身中心旋轉(zhuǎn)；點(diǎn)擊暫停按鈕時(shí)，唱片停止旋轉(zhuǎn)。

2. 思路

可以通過循環(huán)面板來控制唱片的旋轉(zhuǎn)。

（1）拖入一個(gè)374×645的矩形充當(dāng)手機(jī)頁面，并調(diào)整填充顏色；輸入歌曲及歌手名稱；添加一張歌手照片及圓形元件充當(dāng)唱片，把該組合轉(zhuǎn)化為動態(tài)面板，命名為“唱片”；添加一個(gè)名為“播放-暫?！钡膭討B(tài)面板，該面板共有兩個(gè)狀態(tài)：暫停、播放，并通過圓形、三角形、垂直線等元件畫出暫停、播放的按鈕。如下圖所示：

（2）拖入一個(gè)循環(huán)動態(tài)面板，命名為“循環(huán)1”，該循環(huán)面板共有2個(gè)狀態(tài)。

（3）當(dāng)點(diǎn)擊暫停狀態(tài)圖標(biāo)時(shí)，把“?播放-暫?！痹O(shè)置為“播放”狀態(tài)，并設(shè)置“循環(huán)1”動態(tài)面板循環(huán)，循環(huán)時(shí)間為400ms；當(dāng)點(diǎn)擊播放狀態(tài)圖標(biāo)時(shí)，把“播放-暫停按鈕”設(shè)置為“播放-暫?！睘椤皶和！睜顟B(tài)，并把“循環(huán)1”動態(tài)面板停止暫停。

（4）設(shè)置當(dāng)“循環(huán)1”面板狀態(tài)改變時(shí)“唱片”動態(tài)面板順時(shí)針圍繞中心線性旋轉(zhuǎn)10fx，線性時(shí)間也剛好是400ms。線性旋轉(zhuǎn)400ms是與“循環(huán)1”的狀態(tài)改變時(shí)間對應(yīng)，而400ms剛好不快不慢。

三、帶時(shí)間的進(jìn)度條

1. 實(shí)現(xiàn)效果

點(diǎn)擊暫停狀態(tài)圖標(biāo)時(shí)，原型切換為播放狀態(tài)，進(jìn)度條每一秒前進(jìn)一定的距離，與此同時(shí)“時(shí)間”文本實(shí)時(shí)顯示已進(jìn)度條的已播放時(shí)間；點(diǎn)擊播放狀態(tài)圖標(biāo)時(shí)，原型切換為暫停狀態(tài)，進(jìn)度條停止前進(jìn)、停止計(jì)時(shí)。

2. 思路

點(diǎn)擊暫停狀態(tài)圖標(biāo)時(shí)，設(shè)置循環(huán)面板以1000ms的時(shí)間差循環(huán)改變狀態(tài)；而循環(huán)面板每一次改變則會讓“滑塊”動態(tài)面板向右移動一定的距離，同時(shí)，循環(huán)面板的狀態(tài)改變也會改變“時(shí)間”文本的值。

3. 交互設(shè)置

（1）拖入一條長為255的水平線，調(diào)整好線寬及顏色，命名為“底”，讓其充當(dāng)進(jìn)度條的底色。

在“底”的頂層添加一個(gè)名為“進(jìn)度條”的動態(tài)面板，在“進(jìn)度條”的state1里面添加水平線及圓形元件，總寬度也是255，調(diào)整好顏色并轉(zhuǎn)化為動態(tài)面板，該動態(tài)面板命名為“滑塊”，并把“滑塊”的x軸坐標(biāo)設(shè)為“-240”好讓滑塊在頁面初始時(shí)僅露出一個(gè)圓圈。

在進(jìn)度條的兩端分別添加兩個(gè)文本來顯示進(jìn)度時(shí)間及總時(shí)間，左端初始值為0:00并命名為“時(shí)間”，總時(shí)間為1:00。

（2）拖入一個(gè)動態(tài)面板，共有兩個(gè)狀態(tài)，命名為“循環(huán)2”。當(dāng)點(diǎn)擊播放按鈕時(shí)，設(shè)置“循環(huán)2”以1000ms的時(shí)間循環(huán)改變狀態(tài)，并首個(gè)狀態(tài)延時(shí)1000ms后切換。

（3）設(shè)置“循環(huán)2”狀態(tài)改變時(shí)滑塊移動：因?yàn)椤盎瑝K”的總移動距離為240、總移動時(shí)間為60秒，則每一秒移動的距離是4。因此設(shè)置如下事件。

（4）通過以上三步已完成了進(jìn)度條的移動，現(xiàn)在來實(shí)現(xiàn)“時(shí)間”文本的顯示。因?yàn)椤把h(huán)2”每變換一次狀態(tài)的時(shí)間是1000ms，而“時(shí)間”文本每變換一次值也是1000ms，所以這兩者是對應(yīng)的。而“時(shí)間”文本按字符串顯示可分為三種情況：0:01~0:09、0:10~0:59、1:00。

為此，在【項(xiàng)目】【全局變量】設(shè)置全局變量“t”用來記錄時(shí)間，當(dāng)“循環(huán)2”每變換一次狀態(tài)時(shí)t=t+1000ms。當(dāng)t<10000ms時(shí)，“時(shí)間”的值=0:0[t/1000]；當(dāng)10000ms=<t<60000ms時(shí)，“時(shí)間”的值=0:[t/1000]；當(dāng)t=60000ms時(shí)，“時(shí)間”的值=1:00，且循環(huán)1、循環(huán)2停止循環(huán)，把“播放-暫?！泵姘逶O(shè)置為暫停狀態(tài)。

四、單行歌詞的顏色變化

1. 實(shí)現(xiàn)交互

跟QQ音樂的單行歌詞顯示一樣。

2. 思路

在QQ音樂APP中，歌曲的歌詞顏色變化不是勻速的，而是由歌曲本身的音樂性來決定的。此案例中假定每行歌詞里的顏色變化是勻速的。因此，可算出在1分鐘內(nèi)算出每行歌詞顏色變化的所耗時(shí)長，再通過每行歌詞動態(tài)面板的尺寸改變來實(shí)現(xiàn)歌詞顏色變化的樣式。

3. 實(shí)現(xiàn)過程

（1）拖入一個(gè)寬為141、高為16的動態(tài)面板，命名為“歌詞”。寬為141是為了讓所有的歌詞行都能顯示，高為16是為了僅能顯示一行。在“歌詞”的state1里加入八句歌詞，調(diào)整好位置且垂直分布，記錄每歌詞的y坐標(biāo)。

（2）把這八行每句歌詞每行都復(fù)制一份，調(diào)整好顏色用來當(dāng)作變色歌詞行，并每把變色歌詞的每一行都轉(zhuǎn)化為動態(tài)面板，分別命名為：“1”、“2、“3”、“4”、“5”、“6”、“7”、“8”。變色歌詞每一行都疊放在非變色歌詞的正上方。

（3）把“1”~“8”動態(tài)面板的寬度設(shè)置為1、把非變色歌詞設(shè)為白色且透明度為50%。以此，可通過改變“1”~“8”的寬度來實(shí)現(xiàn)歌詞顏色隨著歌曲的播放而改變的交互。把“歌詞”state1里面的全部內(nèi)容轉(zhuǎn)化為動態(tài)面板，命名為“歌詞1”。

（4）進(jìn)度條的總時(shí)間1min，八句歌詞的總寬是1016，所以平均每秒歌詞顏色變化的長度為16.93。

又根據(jù)每行歌詞的寬度可算出“1”~“8”句歌詞的顏色變化耗時(shí)分別為：7.5s、7.5s、8.33s、7.5s、7.5s、8.33s、5.84s、7.5s。

因?yàn)楦柙~顏色變化是以1s為時(shí)間單位的，所以時(shí)間不能存在小數(shù)點(diǎn)，那么對于以上所述的所耗時(shí)長，是要向上取整數(shù)還是向下取整數(shù)呢？

如果是向上取整數(shù)的話，那么這八句歌詞的總時(shí)長為64s，這顯然不符合要求，所以設(shè)定這八句歌詞的所耗時(shí)長分別是7s、7s、8s、7s、7s、8s、5s、7s。

（5）因?yàn)槊啃懈柙~的所耗時(shí)長已經(jīng)向下取整數(shù)了，所以每1s在歌詞里的每一行顏色變化的寬度就不再是16.93了。把每一行寬度除以時(shí)長，得出每一行在1s顏色變化的寬度為18.2、18.2、17.7、18.2、18.2、17.7、19.8、17.7，此處是向上保留一位小樓（如：如果是18.112就簡化為18.2），因?yàn)槿绻蛳卤Ａ粢晃恍?shù)則會導(dǎo)致在規(guī)則時(shí)間內(nèi)完成不了每行所有的字顏色變化。

（6）“循環(huán)2”狀態(tài)變化時(shí)，設(shè)置事件。如：當(dāng)0<t=<7000時(shí)，移動“歌詞1″至（0，0）、動態(tài)面板的長度=自身的長度+18.2。

• 當(dāng)7000<t<=14000時(shí)，設(shè)置第二行歌詞；當(dāng)14000<t<=22000時(shí)，設(shè)置第三行歌詞；
• 當(dāng)22000<t<=29000時(shí)，設(shè)置第四行歌詞；當(dāng)29000<t<=36000時(shí)，設(shè)置第五行歌詞；
• 當(dāng)36000<t<=44000時(shí)，設(shè)置第六行歌詞；當(dāng)44000<t<=49000時(shí)，設(shè)置第七行歌詞；
• 當(dāng)49000<t<=56000時(shí)，設(shè)置第八行歌詞。具體的設(shè)置事件跟第一行類似。

通過上述步驟，已完成了單行歌詞的顏色變化，變化起始第1s，終止于57s。

五、全屏歌詞的顏色變化

1.實(shí)現(xiàn)的效果

當(dāng)向左拖動頁面（代表向左滑）時(shí)切換為全屏歌詞頁面，向右拖動頁面（代表左滑）時(shí)切換為單句歌詞頁面。全屏歌詞的顏色變化交互樣式跟QQ音樂一樣。

2. 思路

以拖動頁面切換動態(tài)面板狀態(tài)來實(shí)現(xiàn)左右滑動；全屏歌詞的顏色變化實(shí)現(xiàn)跟單句歌詞類似。

3. 實(shí)現(xiàn)過程

（1）把“唱片”、“歌詞”轉(zhuǎn)化為動態(tài)面板命名為“主面板”，并添加state2。

（2）把“歌詞1”動態(tài)面板的state1里變色歌詞及非變色歌詞都復(fù)制到“主面板”的state2，并調(diào)整好位置。把變色歌詞分別命名為“11”、“22”、“33”、“44”、“55”、“66”、“77”、“88”。

（3）設(shè)置左右滑動時(shí)的切換效果。

（4）全屏歌詞的顏色變化是跟單行歌詞同步的。所以全屏歌詞的顏色變化設(shè)置只需在單行歌詞事件中設(shè)置即可。不同的是，全屏歌詞里非第一行歌詞的事件設(shè)置須加上把上一行變色歌詞動態(tài)面板的寬度設(shè)置為1。具體設(shè)置如下圖所示。

在上圖中，每個(gè)case都有兩個(gè)或三個(gè)設(shè)置尺寸的事件，其實(shí)在實(shí)際的原型制作中不必一步一步地設(shè)置尺寸，可在每個(gè)case里面一步到位地設(shè)置這兩三個(gè)需要設(shè)置的元件尺寸，此處只是為了演示講解方便而已。

至此，已完成了此案例的全部交互。

作者：稻草人，產(chǎn)品經(jīng)理。

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

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