起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Auxre教程：網(wǎng)易云音樂聽歌識曲交互動效制作
如何用Auxre制作網(wǎng)易云音樂聽歌識曲交互動效呢？一起來文中看看~
效果展示：
分析交互動效
打開網(wǎng)易云音樂，截圖，然后我們可以看到，這個就像水波的動效是這樣組成的：
- 由中間的小圓圈逐漸擴(kuò)大
- 不透明度由100%逐漸變0%
- 一共有兩個圓循環(huán)，當(dāng)?shù)谝粋€放到最大時，第二個放大到二分之一
制作交互動效
1. 制作第一個圓動效
①畫背景：純黑色、375*667
②圓圈：紅色、250*250、命名“紅圈1”
③動態(tài)面板：創(chuàng)建一個動態(tài)面板，設(shè)置兩個狀態(tài)，命名“控制”（由于需要循環(huán)動效，所以用動態(tài)面板，這個主要用來控制紅圈1的大小和透明度）
設(shè)置交互：設(shè)置紅圈1尺寸變大至878*878錨點(diǎn)居中，動畫線性1000ms→不透明為0%，動畫線性1000ms→等待1000ms→設(shè)置尺寸和透明度為原來大小，具體參數(shù)如下：
④添加熱區(qū)：250*250，設(shè)置交互：單擊時，設(shè)置“控制”動態(tài)面板下一項(xiàng)，循環(huán)間隔1500mm
⑤瞅瞅效果
2. 增加另一個紅圈2
①這里紅圈2不需要直接畫，直接復(fù)制紅圈1和控制動態(tài)面板（注意：要同時選中這連個元件復(fù)制，這樣能把交互關(guān)系也一起復(fù)制過來，命名控制2和紅圈2），然后熱區(qū)設(shè)置到頂層。
②修改控制紅圈2的交互
只需要在最前面增加等待500ms即可，這個的意思就是紅圈1執(zhí)行交互放大后，過500ms，紅圈2執(zhí)行交互。
③設(shè)置熱區(qū)添加控制2動態(tài)面板交互
④瞅瞅效果咋地
3. 添加其他元素
①復(fù)制一個紅圈，放在在中間覆蓋紅圈1和紅圈2上，添加錄音圖標(biāo)，組合紅圈和錄音圖標(biāo)，命名紅圈3。感興趣的朋友可以自行做出點(diǎn)擊文字修改提示和紅圈3點(diǎn)擊動效，這里不再做教學(xué)。
最最最終效果
好了，今日教學(xué)就到這里，大家有哪個步驟不懂可以留言或下載源文件研究。下期要來個比較難的交互動效，再會！
鏈接：https://pan.baidu.com/s/1gR-C_q98-9IrIPGDB9OZOw
提取碼：k88s
本文由 @索大佩羅娜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
希望編者如果條件允許的話，可以出相應(yīng)的教學(xué)視頻，那樣更直觀，謝謝
可以的，最近正打算出一波合集
哈，看完還是不太會？你可能需要從Axure基礎(chǔ)開始學(xué)
?? 這里推薦你加Axure實(shí)戰(zhàn)班的助教小可愛@CC-起點(diǎn)學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：原型禮包
領(lǐng)取適合產(chǎn)品新人的原型設(shè)計(jì)大禮包哦，cc還會不定期分享Axure免費(fèi)視頻課程呢！
首先感謝編者的分享，我在自己做的時候，發(fā)現(xiàn)了幾個小問題，這里提下：
1、紅圈的大小，文中設(shè)置的紅圈是250*250，改變后的是878*878，因?yàn)楸尘笆?75*667大小，所以，紅圈偏大了些，建議改為150*150，改變后的大小是450*450；
2、建議在黑色背景周圍，增加白色矩形，擋住改變后的紅圈的溢出，交互效果更好些；
3、源文件有問題，打不開。分享下我自己做的原型文件：
鏈接：https://pan.baidu.com/s/1NV3tPxnADBhQ–i41uxJbw
提取碼：6l52
PS：鏈接中Q–i中間的“-”有兩個，不知道為什么發(fā)布后只顯示一個。
感謝，因?yàn)槲沂怯?.0的，所以打不開
源文件打不開 ??
我是用9.0的，所以打不開