如何用Auxre制作網(wǎng)易云音樂聽歌識(shí)曲交互動(dòng)效呢？一起來文中看看~

效果展示：

分析交互動(dòng)效

打開網(wǎng)易云音樂，截圖，然后我們可以看到，這個(gè)就像水波的動(dòng)效是這樣組成的：

1. 由中間的小圓圈逐漸擴(kuò)大
2. 不透明度由100%逐漸變0%
3. 一共有兩個(gè)圓循環(huán)，當(dāng)?shù)谝粋€(gè)放到最大時(shí)，第二個(gè)放大到二分之一

制作交互動(dòng)效

1. 制作第一個(gè)圓動(dòng)效

①畫背景：純黑色、375*667

②圓圈：紅色、250*250、命名“紅圈1”

③動(dòng)態(tài)面板：創(chuàng)建一個(gè)動(dòng)態(tài)面板，設(shè)置兩個(gè)狀態(tài)，命名“控制”（由于需要循環(huán)動(dòng)效，所以用動(dòng)態(tài)面板，這個(gè)主要用來控制紅圈1的大小和透明度）

設(shè)置交互：設(shè)置紅圈1尺寸變大至878*878錨點(diǎn)居中，動(dòng)畫線性1000ms→不透明為0%，動(dòng)畫線性1000ms→等待1000ms→設(shè)置尺寸和透明度為原來大小，具體參數(shù)如下：

④添加熱區(qū)：250*250，設(shè)置交互：單擊時(shí)，設(shè)置“控制”動(dòng)態(tài)面板下一項(xiàng)，循環(huán)間隔1500mm

⑤瞅瞅效果

2. 增加另一個(gè)紅圈2

①這里紅圈2不需要直接畫，直接復(fù)制紅圈1和控制動(dòng)態(tài)面板（注意：要同時(shí)選中這連個(gè)元件復(fù)制，這樣能把交互關(guān)系也一起復(fù)制過來，命名控制2和紅圈2），然后熱區(qū)設(shè)置到頂層。

②修改控制紅圈2的交互

只需要在最前面增加等待500ms即可，這個(gè)的意思就是紅圈1執(zhí)行交互放大后，過500ms，紅圈2執(zhí)行交互。

③設(shè)置熱區(qū)添加控制2動(dòng)態(tài)面板交互

④瞅瞅效果咋地

3. 添加其他元素

①復(fù)制一個(gè)紅圈，放在在中間覆蓋紅圈1和紅圈2上，添加錄音圖標(biāo)，組合紅圈和錄音圖標(biāo)，命名紅圈3。感興趣的朋友可以自行做出點(diǎn)擊文字修改提示和紅圈3點(diǎn)擊動(dòng)效，這里不再做教學(xué)。

最最最終效果

好了，今日教學(xué)就到這里，大家有哪個(gè)步驟不懂可以留言或下載源文件研究。下期要來個(gè)比較難的交互動(dòng)效，再會(huì)！

鏈接：https://pan.baidu.com/s/1gR-C_q98-9IrIPGDB9OZOw

提取碼：k88s

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

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