axure版本:8.0
實(shí)現(xiàn)效果:
原型查看:
https://r0zz4t.axshare.com/#c=2
實(shí)現(xiàn)思路:
? ? ? ? 通過動(dòng)態(tài)面板可實(shí)現(xiàn)圖標(biāo)的閃爍效果。
制作步驟:
1、拖一個(gè)您想要制作閃爍效果的圖標(biāo),比如我這里選擇一個(gè)圓形鳖宾。
2、選中該圖標(biāo)聂渊,在樣式中呆躲,調(diào)整好效果。我這里去掉圓形的邊框忍抽,將填充顏色修改為紅色八孝。
3、調(diào)整好樣式后鸠项,在該圖標(biāo)上面點(diǎn)擊右鍵干跛,“轉(zhuǎn)換為動(dòng)態(tài)面板”。
4祟绊、復(fù)制一個(gè)狀態(tài)楼入。
復(fù)制完成后,大綱頁(yè)面變成如下圖:
5牧抽、思考一下該圖標(biāo)大家的視覺重點(diǎn)在什么地方嘉熊,以此為中心,調(diào)整該圖標(biāo)的大小或顏色扬舒,即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單的閃爍效果阐肤。圓形一般以圓心為中心。比如說(shuō)我這里讲坎,狀態(tài)1的圓形圖標(biāo)設(shè)置直徑為30孕惜,狀態(tài)2的圖標(biāo)直徑為40。那么最大的一圖形直徑為寬40高40晨炕,那么我將圓心統(tǒng)一為x = 20衫画,y = 20的位置。
6瓮栗、根據(jù)5的計(jì)算削罩,雙擊State1,分別在橫軸和縱軸標(biāo)尺的地方费奸,點(diǎn)住鼠標(biāo)左鍵不放拖動(dòng)鲸郊,拖出輔助線。分別將x軸和y軸的輔助線拖到20的位置货邓。
7秆撮、將該圓形圖標(biāo)的圓心與兩輔助線的交叉點(diǎn)對(duì)齊。(此時(shí)圓形圖標(biāo)的位置為x=5,y=5)
8换况、雙擊State2职辨,將圓形圖標(biāo)的大小修改為高40寬40盗蟆,并將圓心與x=20y=20對(duì)齊。此時(shí)圖標(biāo)的位置為x=0,y=0
9舒裤、選中該動(dòng)態(tài)面板喳资,在屬性頁(yè)卡中,設(shè)置“載入時(shí)”的事件腾供。
10仆邓、添加動(dòng)作為“設(shè)置面板狀態(tài)”,勾選“當(dāng)前元件”伴鳖,將狀態(tài)設(shè)置為“Next”节值,勾選“向后循環(huán)”和“循環(huán)間隔”,為循環(huán)間隔設(shè)置一個(gè)值榜聂,默認(rèn)為400毫秒
一個(gè)簡(jiǎn)單的閃爍效果制作完成搞疗。當(dāng)然各位童鞋也可以同時(shí)變幻圖標(biāo)的顏色、形狀须肆,并添加一些動(dòng)畫讓閃爍效果更好看匿乃。