第一章知識點(diǎn)
- 1.1歌曲封面旋轉(zhuǎn)效果
- 1.2喜歡按鈕交互效果
- 1.3收藏按鈕交互效果
- 1.4關(guān)注按鈕交互效果
1.1歌曲封面旋轉(zhuǎn)效果
1.1.1設(shè)計(jì)思考
這里沒什么難點(diǎn)，Axure本身就有旋轉(zhuǎn)的動作，主要就是要調(diào)試出圖片旋轉(zhuǎn)一圈的時(shí)間，讓速度在一個(gè)舒適的范圍即可。
1.1.2素材準(zhǔn)備
（1）一張圓形的灰色底板50*50
（2）一個(gè)圖片元件21*21（大家在制作Axure原型的過程中也要陸續(xù)建立自己的元件庫，這樣復(fù)用起來效率會高很多，以下是我自制的圖片元件，是不是比官方的好看N倍~面對各種背景色都能輕松拖拽）
最終組合成以下形態(tài)
1.1.3交互設(shè)置
（1）設(shè)置兩個(gè)元件為組合（音樂封面）
（2）為組合（音樂封面）添加用例：“載入時(shí)”（若下方?jīng)]有，則點(diǎn)擊“更多事件”查找）
誤區(qū)：不要把交互動作設(shè)置在頁面載入時(shí)，而要設(shè)置在組合（元件）載入時(shí)，這樣你在復(fù)制元件去另一個(gè)頁面的時(shí)候交互動作才不會消失。
（3）選擇動作：旋轉(zhuǎn)
（4）選擇旋轉(zhuǎn)的元件：勾選音樂封面中的圖片元件
（5）設(shè)置參數(shù)如下：
旋轉(zhuǎn)角度：3600（即旋轉(zhuǎn)10圈）
錨點(diǎn)：中心
動畫：線性,時(shí)間：50000（備注：這是旋轉(zhuǎn)10圈的時(shí)間，如果你想增加圈數(shù)，可以按倍數(shù)遞增）
大功告成，預(yù)覽一下。
1.2喜歡按鈕交互效果
1.2.1設(shè)計(jì)思考
圖形只有兩個(gè)狀態(tài)，所以可以通過元件的選中效果來實(shí)現(xiàn)兩種狀態(tài)的切換。
1.2.2素材準(zhǔn)備
（1）拖入一個(gè)心形形狀35*33（如果你的元件庫沒有，可以關(guān)注我的公眾號（皮先生PM）回復(fù)“限時(shí)免費(fèi)”，就能下載我收藏的近1000個(gè)圖標(biāo)）
1.2.3交互設(shè)置
（1）選擇心形按鈕（favorite），在屬性中設(shè)置它的選中狀態(tài)，勾選填充顏色為紅色。
（2）為心形按鈕（favorite）添加用例：鼠標(biāo)單擊時(shí)
（3）選擇動作：設(shè)置選中
（4）勾選元件：favorite
（5）值：toggle（意思是點(diǎn)擊的時(shí)候切換狀態(tài)，當(dāng)元件為選中狀態(tài)時(shí)，單擊后變?yōu)槲催x中，反之調(diào)換。）
大功告成，預(yù)覽一下。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。