本文筆者給大家分享了模仿網(wǎng)易云聽(tīng)歌識(shí)曲界面效果的教程，文章分為四個(gè)部分：頁(yè)面布局、添加交互、交互細(xì)節(jié)調(diào)整以及預(yù)覽效果。

本教程給大家分享一下模仿【網(wǎng)易云音樂(lè)】APP的聽(tīng)歌識(shí)曲界面效果

做法如下，如有雷同，純屬默契：

一、頁(yè)面布局

從左側(cè)元件庫(kù)拉入一個(gè)【橢圓形】，尺寸為100*100，填充色為紅色，再?gòu)?fù)制4個(gè)作為聲波圓圈。

其次，從圖表庫(kù)中拉入一個(gè)【話筒】圖標(biāo)，填充色為白色，選中話筒和所有圓圈，居中對(duì)齊。狀態(tài)欄等其他頁(yè)面元素可忽略，后面分享的文件有，具體頁(yè)面元素命名如下：

二、添加交互

1. 實(shí)現(xiàn)圓圈波紋的效果

選中【圓圈1】，給其添加【載入時(shí)】事件。

第一步：設(shè)置尺寸變化

選擇左側(cè)的【元件】-【設(shè)置尺寸】-勾選【當(dāng)前元件】-，寬高設(shè)置為300*300，錨點(diǎn)為【中心】，動(dòng)畫(huà)為【線性】，時(shí)間為【2000毫秒】，設(shè)置如下：

第二步：設(shè)置透明度變化

選擇左側(cè)的【元件】-【設(shè)置不透明】- 勾選【當(dāng)前元件】-，不透明值為【0】，動(dòng)畫(huà)為【線性】，時(shí)間為【2000毫秒】，設(shè)置如下：

第三步：設(shè)置等待事件

選擇左側(cè)的【其他】-》【等待】，時(shí)間為【2000毫秒】，設(shè)置如下：

第四步：讓元件變?yōu)樵瓉?lái)大小

選擇左側(cè)的【元件】-》【設(shè)置尺寸】-》勾選【當(dāng)前元件】，寬高設(shè)置為100*100，錨點(diǎn)為【中心】，動(dòng)畫(huà)為【無(wú)】，設(shè)置如下：

第五步：變?yōu)樵瓉?lái)的透明度

選擇左側(cè)的【元件】-》【設(shè)置不透明】-》勾選【當(dāng)前元件】，不透明值為【100】，動(dòng)畫(huà)為【無(wú)】，設(shè)置如下：

第六步：設(shè)置觸發(fā)事件

選擇左側(cè)的【其他】-》【觸發(fā)事件】-》勾選【當(dāng)前元件】-》，選中【載入時(shí)】事件，設(shè)置如下：

2. 制作其它的圓圈波紋的效果

復(fù)制【圓圈1】的交互事件，分別粘貼到【圓圈2】、【圓圈3】和【圓圈4】，預(yù)覽效果如下：

這時(shí)發(fā)現(xiàn)四個(gè)圓圈的波紋效果重疊了，還需要給每個(gè)圓圈加不同的等待時(shí)間，并放在交互動(dòng)作的最前面。

【圓圈2】為【500毫秒】、【圓圈3】為【1000毫秒】、【圓圈4】為【1500毫秒】。設(shè)置及動(dòng)作順序如下：

三、交互細(xì)節(jié)調(diào)整

1. 此案例中總共為5個(gè)圓圈，第一個(gè)靜止，并放置在頂層，不設(shè)置交互事件。由于前面給圓圈的尺寸變化動(dòng)畫(huà)時(shí)間設(shè)置為2000毫秒，因此，為了防止動(dòng)畫(huà)重疊，給后面4個(gè)圓圈添加的500毫秒的間隔等待時(shí)間。
2. 切記，【等待時(shí)間】必須放在載入時(shí)的第一個(gè)交互動(dòng)作，才能實(shí)現(xiàn)漸進(jìn)的波紋效果。

四、預(yù)覽效果

學(xué)習(xí)更多教程，可關(guān)注本人公眾號(hào)：艾斯的Axure峽谷。歡迎大家留言評(píng)論，也可以留下你期待看到的交互效果。

示例演示：

示例下載：

https://pan.baidu.com/s/1G7875G3eXssStztzGRTAKw

提取碼: fjy9

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

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