起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure教程（中級）：網(wǎng)易云音樂聽歌識曲效果模仿
本文筆者給大家分享了模仿網(wǎng)易云聽歌識曲界面效果的教程，文章分為四個部分：頁面布局、添加交互、交互細節(jié)調(diào)整以及預(yù)覽效果。
本教程給大家分享一下模仿【網(wǎng)易云音樂】APP的聽歌識曲界面效果
做法如下，如有雷同，純屬默契：
一、頁面布局
從左側(cè)元件庫拉入一個【橢圓形】，尺寸為100*100，填充色為紅色，再復(fù)制4個作為聲波圓圈。
其次，從圖表庫中拉入一個【話筒】圖標，填充色為白色，選中話筒和所有圓圈，居中對齊。狀態(tài)欄等其他頁面元素可忽略，后面分享的文件有，具體頁面元素命名如下：
二、添加交互
1. 實現(xiàn)圓圈波紋的效果
選中【圓圈1】，給其添加【載入時】事件。
第一步：設(shè)置尺寸變化
選擇左側(cè)的【元件】-【設(shè)置尺寸】-勾選【當前元件】-，寬高設(shè)置為300*300，錨點為【中心】，動畫為【線性】，時間為【2000毫秒】，設(shè)置如下：
第二步：設(shè)置透明度變化
選擇左側(cè)的【元件】-【設(shè)置不透明】- 勾選【當前元件】-，不透明值為【0】，動畫為【線性】，時間為【2000毫秒】，設(shè)置如下：
第三步：設(shè)置等待事件
選擇左側(cè)的【其他】-》【等待】，時間為【2000毫秒】，設(shè)置如下：
第四步：讓元件變?yōu)樵瓉泶笮?/strong>
選擇左側(cè)的【元件】-》【設(shè)置尺寸】-》勾選【當前元件】，寬高設(shè)置為100*100，錨點為【中心】，動畫為【無】，設(shè)置如下：
第五步：變?yōu)樵瓉淼耐该鞫?/strong>
選擇左側(cè)的【元件】-》【設(shè)置不透明】-》勾選【當前元件】，不透明值為【100】，動畫為【無】，設(shè)置如下：
第六步：設(shè)置觸發(fā)事件
選擇左側(cè)的【其他】-》【觸發(fā)事件】-》勾選【當前元件】-》，選中【載入時】事件，設(shè)置如下：
2. 制作其它的圓圈波紋的效果
復(fù)制【圓圈1】的交互事件，分別粘貼到【圓圈2】、【圓圈3】和【圓圈4】，預(yù)覽效果如下：
這時發(fā)現(xiàn)四個圓圈的波紋效果重疊了，還需要給每個圓圈加不同的等待時間，并放在交互動作的最前面。
【圓圈2】為【500毫秒】、【圓圈3】為【1000毫秒】、【圓圈4】為【1500毫秒】。設(shè)置及動作順序如下：
三、交互細節(jié)調(diào)整
- 此案例中總共為5個圓圈，第一個靜止，并放置在頂層，不設(shè)置交互事件。由于前面給圓圈的尺寸變化動畫時間設(shè)置為2000毫秒，因此，為了防止動畫重疊，給后面4個圓圈添加的500毫秒的間隔等待時間。
- 切記，【等待時間】必須放在載入時的第一個交互動作，才能實現(xiàn)漸進的波紋效果。
四、預(yù)覽效果
學(xué)習更多教程，可關(guān)注本人公眾號：艾斯的Axure峽谷。歡迎大家留言評論，也可以留下你期待看到的交互效果。
示例演示：
示例下載：
https://pan.baidu.com/s/1G7875G3eXssStztzGRTAKw
提取碼: fjy9
作者：火星人～艾斯，公眾號：艾斯的Axure峽谷
本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
哇 真的很還原
RP9也是無限放大，完全照著文中的做。
你下載一下我的源文件，在RP9上面運行一下，看不看無限放大
同樣無限放大，而且動畫太快看不出來變化，好像是bug
RP9版本估計還不太穩(wěn)定
后面無限放大。嚇死人
你是不是放大的寬高尺寸數(shù)值設(shè)置錯了