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

新的一年到來了，給大家分享一個(gè)仿網(wǎng)易云播放器制作案例（帶聲音且可切換歌曲）。希望大家能夠享受音樂帶來的快樂，同時(shí)消除工作緊張、減輕生活壓力，帶著美好心情進(jìn)入2019年的生活。

演示地址

仿網(wǎng)易云播放器：帶聲音可切換歌曲的播放器

1. 點(diǎn)擊播放按鈕，可播放、暫停歌曲；
2. 點(diǎn)擊前進(jìn)按鈕/后臺(tái)按鈕，可切換歌曲；
3. 切換歌曲時(shí)，當(dāng)前是播放狀態(tài)，則切換歌曲的時(shí)候也是播放狀態(tài)；
4. 切換歌曲時(shí)，當(dāng)前是暫停狀態(tài)，則切換歌曲的時(shí)候是暫停狀態(tài)；
5. 歌曲切換的時(shí)候，頂部歌曲名稱及演唱者會(huì)相應(yīng)變化；
6. 歌曲播放過程中，歌曲會(huì)顯示實(shí)時(shí)的播放進(jìn)度。

溫馨提示：此演示案例帶有聲音，工作期間請帶上耳機(jī)，以免造成不必要的影響。

原理分析

1. 通過播放/暫停按鈕控制循環(huán)動(dòng)態(tài)面板是否循環(huán)；
2. 通過上一首、下一首按鈕控制切換歌曲；
3. 通過循環(huán)動(dòng)態(tài)面板控制歌曲播放進(jìn)度，歌曲旋轉(zhuǎn)播放動(dòng)效；
4. 通過文本元件預(yù)存歌曲播放時(shí)長（以秒為單位）；
5. 通過內(nèi)聯(lián)框架加載真實(shí)歌曲；
6. 用熱區(qū)控制用于表示播放進(jìn)度圓球移動(dòng)邊界。

元件準(zhǔn)備

1. 頂部元素

1.1 2個(gè)文本矩形框，分別放作者名稱和歌曲名稱

1.2 1張表示返回的圖片

1.3 1張頂部背景（配置陰影效果，體現(xiàn)層級關(guān)系）

2. 1張撥片圖片，用于體現(xiàn)歌曲播放或暫停的狀態(tài)

3. 歌曲播放動(dòng)效元素

3.1 1個(gè)白色矩形框，調(diào)整圓角半徑，使之成為圓形

3.2 1個(gè)黑色矩形框，調(diào)整圓角半徑，使之成為圓形

3.3 動(dòng)態(tài)面板，設(shè)置三種狀態(tài)，分別放置三首歌曲的圖片

4. 播放進(jìn)度元素

4.1 1個(gè)橢圓形元件，用于動(dòng)態(tài)顯示歌曲播放進(jìn)度

4.2 1個(gè)矩形，用于表示播放進(jìn)度背景

4.3 兩個(gè)矩形，分別表示播放進(jìn)度時(shí)間和歌曲時(shí)間

4.4 1個(gè)熱區(qū)，用于控制圓形元件的移動(dòng)邊界

5. 5張圖片，分別表示歌曲循環(huán)、上一首、播放/暫?？刂?、下一首、更多

6. 一個(gè)內(nèi)聯(lián)框架，用于實(shí)時(shí)加載歌曲

7. 1個(gè)文本元件，用于表示當(dāng)前播放歌曲的時(shí)間（秒殺）

8. 動(dòng)態(tài)面板，用于控制圖片循環(huán)及播放進(jìn)度動(dòng)效

將內(nèi)聯(lián)框架、時(shí)間舉行，循環(huán)面板位置放在不顯眼處，重新布局元件后效果如下：

實(shí)現(xiàn)步驟

1. 播放按鈕設(shè)置

播放按鈕初始狀態(tài)是暫停待播放圖片，表示當(dāng)前是暫停狀態(tài)；選中時(shí)，我們預(yù)置一張播放待暫停圖片，表示當(dāng)前是播放狀態(tài)

點(diǎn)擊播放按鈕時(shí)，切換按鈕的選中狀態(tài)。分別設(shè)置選中、取消選中時(shí)的事件。

選中時(shí)，啟動(dòng)循環(huán)面板，每個(gè)0.5秒變換一次狀態(tài)，同時(shí)將播放撥片旋轉(zhuǎn)到唱片上；同時(shí)判斷當(dāng)前面板的狀態(tài)，根據(jù)面板狀態(tài)分別設(shè)置歌曲名稱、作者、歌曲時(shí)間及要播放的歌曲。

取消選中時(shí)，停止循環(huán)面板。將播放撥片旋轉(zhuǎn)到初始位置，同時(shí)在內(nèi)聯(lián)框架打開空鏈接（終止歌曲播放作用），將用于表示播放進(jìn)度的圓球移到初始位置。

循環(huán)動(dòng)態(tài)面板設(shè)置事件：

播放撥片設(shè)置事件，注意錨點(diǎn)偏移設(shè)置：

在內(nèi)聯(lián)框架打開mp3歌曲的設(shè)置，如果用本地mp3文件，注意相對路徑和絕對路徑的區(qū)別：

2. 上一首按鈕設(shè)置

點(diǎn)擊“上一首”按鈕時(shí)，需要先判斷歌曲狀態(tài)：

如果是播放狀態(tài)的話，需要在切換動(dòng)態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無法切換歌曲）；

如果是暫停狀態(tài)，則只需要切換動(dòng)態(tài)面板狀態(tài)即可。

切換循環(huán)動(dòng)態(tài)面板及觸發(fā)播放按鈕重新播放的事件配置如下：

3. 下一首按鈕設(shè)置

同理，點(diǎn)擊“下一首”按鈕時(shí)，需要先判斷歌曲狀態(tài)：

如果是播放狀態(tài)的話，需要在切換動(dòng)態(tài)面板顯示狀態(tài)后，再觸發(fā)播放按鈕的點(diǎn)擊事件（否則無法切換歌曲）；

如果是暫停狀態(tài)，則只需要切換動(dòng)態(tài)面板狀態(tài)即可。

4. 循環(huán)動(dòng)態(tài)面板事件

當(dāng)播放按鈕的狀態(tài)是選中時(shí)，啟用循環(huán)動(dòng)態(tài)面板；

當(dāng)循環(huán)面板的狀態(tài)改變時(shí)，移動(dòng)圓球，同時(shí)旋轉(zhuǎn)唱片，從而動(dòng)態(tài)顯示歌曲播放。

用于表示播放進(jìn)度的圓球移動(dòng)事件如下圖設(shè)置，注意每次移動(dòng)的距離根據(jù)歌曲的時(shí)間長度而變化。

移動(dòng)距離計(jì)算：播放背景長度 除以 歌曲時(shí)長（需要將歌曲時(shí)長換算成秒，用time元件臨時(shí)保存）。

旋轉(zhuǎn)唱片的設(shè)置事件：

5. 圓球移動(dòng)事件設(shè)置（表示播放進(jìn)度）

圓球在移動(dòng)時(shí)，需要設(shè)置一個(gè)邊界（放一個(gè)熱區(qū)作為邊界），當(dāng)圓球接觸邊界時(shí)，觸發(fā)播放的點(diǎn)擊事件（也就是暫停歌曲播放）。

觸發(fā)事件設(shè)置如下：

6. 唱片狀態(tài)改變事件設(shè)置

當(dāng)唱片狀態(tài)改變時(shí)，需要根據(jù)唱片當(dāng)前顯示的狀態(tài)，分別設(shè)置歌曲名稱、作者、歌曲時(shí)間及要播放的歌曲。

這個(gè)步驟不能少，否則在未播放狀態(tài)下點(diǎn)擊“上一首”或“下一首”按鈕時(shí)，歌曲名稱等不會(huì)變化。

本案例已完成，點(diǎn)擊查看上一篇案例《穿梭器：雙向列表帶計(jì)數(shù)選擇（支持單選、多選和全選）》

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

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