Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

7 評論 6089 瀏覽 23 收藏 6 分鐘

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

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

做法如下,如有雷同,純屬默契:

一、頁面布局

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

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

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

二、添加交互

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

選中【圓圈1】,給其添加【載入時】事件。

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

選擇左側(cè)的【元件】-【設(shè)置尺寸】-勾選【當前元件】-,寬高設(shè)置為300*300,錨點為【中心】,動畫為【線性】,時間為【2000毫秒】,設(shè)置如下:

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

選擇左側(cè)的【元件】-【設(shè)置不透明】- 勾選【當前元件】-,不透明值為【0】,動畫為【線性】,時間為【2000毫秒】,設(shè)置如下:

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

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

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

第四步:讓元件變?yōu)樵瓉泶笮?/strong>

選擇左側(cè)的【元件】-》【設(shè)置尺寸】-》勾選【當前元件】,寬高設(shè)置為100*100,錨點為【中心】,動畫為【無】,設(shè)置如下:

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

第五步:變?yōu)樵瓉淼耐该鞫?/strong>

選擇左側(cè)的【元件】-》【設(shè)置不透明】-》勾選【當前元件】,不透明值為【100】,動畫為【無】,設(shè)置如下:

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

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

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

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

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

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

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

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

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

四、預(yù)覽效果

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

示例演示:

Axure教程(中級):網(wǎng)易云音樂聽歌識曲效果模仿

示例下載:

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

提取碼: fjy9

 

作者:火星人~艾斯,公眾號:艾斯的Axure峽谷

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 哇 真的很還原

    回復(fù)
  2. RP9也是無限放大,完全照著文中的做。

    來自浙江 回復(fù)
    1. 你下載一下我的源文件,在RP9上面運行一下,看不看無限放大

      來自福建 回復(fù)
    2. 同樣無限放大,而且動畫太快看不出來變化,好像是bug

      來自浙江 回復(fù)
    3. RP9版本估計還不太穩(wěn)定

      來自福建 回復(fù)
  3. 后面無限放大。嚇死人

    來自福建 回復(fù)
    1. 你是不是放大的寬高尺寸數(shù)值設(shè)置錯了

      來自福建 回復(fù)