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

本文以QQ音樂為例，實現了帶時間的進度條、歌詞顏色變化、唱片旋轉、暫停播放等原型交互。

一、效果展示

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

二、唱片旋轉

1. 實現的效果

點擊播放按鈕時，唱片緩慢地圍繞其自身中心旋轉；點擊暫停按鈕時，唱片停止旋轉。

2. 思路

可以通過循環面板來控制唱片的旋轉。

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

（2）拖入一個循環動態面板，命名為“循環1”，該循環面板共有2個狀態。

（3）當點擊暫停狀態圖標時，把“?播放-暫停”設置為“播放”狀態，并設置“循環1”動態面板循環，循環時間為400ms；當點擊播放狀態圖標時，把“播放-暫停按鈕”設置為“播放-暫停”為“暫?！睜顟B，并把“循環1”動態面板停止暫停。

（4）設置當“循環1”面板狀態改變時“唱片”動態面板順時針圍繞中心線性旋轉10fx，線性時間也剛好是400ms。線性旋轉400ms是與“循環1”的狀態改變時間對應，而400ms剛好不快不慢。

三、帶時間的進度條

1. 實現效果

點擊暫停狀態圖標時，原型切換為播放狀態，進度條每一秒前進一定的距離，與此同時“時間”文本實時顯示已進度條的已播放時間；點擊播放狀態圖標時，原型切換為暫停狀態，進度條停止前進、停止計時。

2. 思路

點擊暫停狀態圖標時，設置循環面板以1000ms的時間差循環改變狀態；而循環面板每一次改變則會讓“滑塊”動態面板向右移動一定的距離，同時，循環面板的狀態改變也會改變“時間”文本的值。

3. 交互設置

（1）拖入一條長為255的水平線，調整好線寬及顏色，命名為“底”，讓其充當進度條的底色。

在“底”的頂層添加一個名為“進度條”的動態面板，在“進度條”的state1里面添加水平線及圓形元件，總寬度也是255，調整好顏色并轉化為動態面板，該動態面板命名為“滑塊”，并把“滑塊”的x軸坐標設為“-240”好讓滑塊在頁面初始時僅露出一個圓圈。

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

（2）拖入一個動態面板，共有兩個狀態，命名為“循環2”。當點擊播放按鈕時，設置“循環2”以1000ms的時間循環改變狀態，并首個狀態延時1000ms后切換。

（3）設置“循環2”狀態改變時滑塊移動：因為“滑塊”的總移動距離為240、總移動時間為60秒，則每一秒移動的距離是4。因此設置如下事件。

（4）通過以上三步已完成了進度條的移動，現在來實現“時間”文本的顯示。因為“循環2”每變換一次狀態的時間是1000ms，而“時間”文本每變換一次值也是1000ms，所以這兩者是對應的。而“時間”文本按字符串顯示可分為三種情況：0:01~0:09、0:10~0:59、1:00。

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

四、單行歌詞的顏色變化

1. 實現交互

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

2. 思路

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

3. 實現過程

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

（2）把這八行每句歌詞每行都復制一份，調整好顏色用來當作變色歌詞行，并每把變色歌詞的每一行都轉化為動態面板，分別命名為：“1”、“2、“3”、“4”、“5”、“6”、“7”、“8”。變色歌詞每一行都疊放在非變色歌詞的正上方。

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

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

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

因為歌詞顏色變化是以1s為時間單位的，所以時間不能存在小數點，那么對于以上所述的所耗時長，是要向上取整數還是向下取整數呢？

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

（5）因為每行歌詞的所耗時長已經向下取整數了，所以每1s在歌詞里的每一行顏色變化的寬度就不再是16.93了。把每一行寬度除以時長，得出每一行在1s顏色變化的寬度為18.2、18.2、17.7、18.2、18.2、17.7、19.8、17.7，此處是向上保留一位小樓（如：如果是18.112就簡化為18.2），因為如果向下保留一位小數則會導致在規則時間內完成不了每行所有的字顏色變化。

（6）“循環2”狀態變化時，設置事件。如：當0<t=<7000時，移動“歌詞1″至（0，0）、動態面板的長度=自身的長度+18.2。

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

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

五、全屏歌詞的顏色變化

1.實現的效果

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

2. 思路

以拖動頁面切換動態面板狀態來實現左右滑動；全屏歌詞的顏色變化實現跟單句歌詞類似。

3. 實現過程

（1）把“唱片”、“歌詞”轉化為動態面板命名為“主面板”，并添加state2。

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

（3）設置左右滑動時的切換效果。

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

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

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

作者：稻草人，產品經理。

本文由 @稻草人 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議