【適合axure初學(xué)者】動(dòng)態(tài)面板實(shí)現(xiàn)banner的輪播效果
axure功能太強(qiáng)大,動(dòng)態(tài)面板已經(jīng)搞得我頭暈@_@眼花了,更別提7.0版本的中繼器了。。。
廢話不多說(shuō),還是和大家分享一下動(dòng)態(tài)面板實(shí)現(xiàn)banner輪播的效果,對(duì)動(dòng)態(tài)面板還不熟的,像我一樣的axure初學(xué)者,不妨來(lái)看看這個(gè)效果的制作過(guò)程,然后自己試著做一做,絕對(duì)增加自己的信心^_^
就拿大淘寶首頁(yè)banner輪播效果為例說(shuō)明:
前期線稿圖,部件準(zhǔn)備
1. 先畫(huà)個(gè)大概的位置線框圖,如下圖所示,做了3張banner的輪播效果
2.banner位置的占位符轉(zhuǎn)換為動(dòng)態(tài)面板(鼠標(biāo)右鍵,轉(zhuǎn)換動(dòng)態(tài)面板),給面板命名→_→這個(gè)不強(qiáng)制,在右側(cè)面板區(qū)找到動(dòng)態(tài)面板(圖中為首頁(yè)banner),選中,添加2個(gè)狀態(tài),分別放banner2,banner3。
雙擊狀態(tài)名進(jìn)入對(duì)應(yīng)的面板頁(yè)面,會(huì)看到有藍(lán)色的框框,框內(nèi)的部件將會(huì)在面板里顯示,框外的不顯示??梢越o狀態(tài)修改名稱(選中狀態(tài),然后單擊名稱即可修改,圖中狀態(tài)名稱修改為1,2,3對(duì)應(yīng)第幾張banner)
3.添加banner輪播時(shí),banner上面的狀態(tài)按鈕(圖中的圓點(diǎn),會(huì)跟隨banner切換,顏色變化),添加矩形部件,右鍵選擇形狀,然后選擇橢圓,然后在工具欄里修改橢圓的寬和高,變成一個(gè)圓(w:10,h:10),復(fù)制部件2次,在右側(cè)部件名稱和注釋處給3個(gè)圓點(diǎn)分別命名圓點(diǎn)1,2,3
前期準(zhǔn)備差不多了,現(xiàn)在開(kāi)始動(dòng)態(tài)效果準(zhǔn)備
1. 準(zhǔn)備工作差不多完成了,現(xiàn)在開(kāi)始動(dòng)態(tài)搭配效果。首先是banner要設(shè)置成自動(dòng)輪播的。這要腫么設(shè)置呢?先給面板加動(dòng)態(tài)效果:選中面板,在右側(cè)交互欄的“顯示”一項(xiàng)下添加用例,雜項(xiàng)里選擇等待2秒(用來(lái)展示banner,時(shí)間長(zhǎng)短自行設(shè)置),然后在動(dòng)態(tài)面板下選擇”設(shè)置面板狀態(tài)“,選擇狀態(tài)“下一步”,設(shè)置進(jìn)入退出動(dòng)畫(huà)“向左滑動(dòng)”,動(dòng)作時(shí)間設(shè)置為500毫秒。重復(fù)“等待”,”設(shè)置面板狀態(tài)”兩次。
注意:banner輪播到第三張時(shí),下一張連接第一張banner,在設(shè)置面板狀態(tài)時(shí),勾選”從最后一個(gè)到第一個(gè)自動(dòng)跳轉(zhuǎn)“,這樣才能實(shí)現(xiàn)banner1,2,3,1,2,3這樣的輪播順序。
2. 做到這里,在瀏覽器里預(yù)覽,發(fā)現(xiàn)banner怎么不動(dòng)?莫急,要讓banner動(dòng),得有個(gè)觸發(fā)條件,首先將banner動(dòng)態(tài)面板設(shè)置為不可見(jiàn)(選中動(dòng)態(tài)面板右鍵,設(shè)為不可見(jiàn)),然后在”頁(yè)面交互“中設(shè)置當(dāng)頁(yè)面載入是,添加用例,顯示動(dòng)態(tài)面板
3. 做到這里,你再試一試預(yù)覽,驚奇的發(fā)現(xiàn),banner可以輪播了,是不是很開(kāi)森?然后。。。。。。。停了?這是什么鬼?????告訴你,還沒(méi)做完,頁(yè)面加載只觸發(fā)了開(kāi)始的輪播,一直重復(fù)還需要再觸發(fā),要腫么再觸發(fā)呢????嗯,簡(jiǎn)單,動(dòng)態(tài)面板隱藏再顯示就又觸發(fā)了,有木有很神奇,哇哈哈。。。
在動(dòng)態(tài)面板”顯示“一項(xiàng)的用例里最后添加隱藏面板,顯示面板,保存后預(yù)覽即可輪播
4. banner終于可以輪播了,開(kāi)森!But,banner上的狀態(tài)圓點(diǎn)還木有變,都是一樣的狀態(tài),現(xiàn)在來(lái)修改這3個(gè)圓點(diǎn),讓3個(gè)圓點(diǎn)對(duì)應(yīng)各自的banner。
給3個(gè)圓點(diǎn)添加交互樣式(選中圓點(diǎn),右鍵添加交互樣式),在”選中”下設(shè)置圓點(diǎn)樣式,選擇填充個(gè)顏色(紅色,自行設(shè)置),3個(gè)圓點(diǎn)同理設(shè)置。
5. 然后將圓點(diǎn)的效果和動(dòng)態(tài)面板聯(lián)系起來(lái),在動(dòng)態(tài)面板“顯示”一項(xiàng)的用例里繼續(xù)添加內(nèi)容,部件里選擇“設(shè)置選擇/選中”,banner1顯示時(shí),選中圓點(diǎn)1(選定狀態(tài)值:true),圓點(diǎn)2和3為未選中狀態(tài)(選定狀態(tài)值:false),以此類推設(shè)置即可。
注意:用例是一項(xiàng)一項(xiàng)執(zhí)行,不要把圓點(diǎn)的狀態(tài)放錯(cuò)位置喲~圓點(diǎn)狀態(tài)要和對(duì)應(yīng)的banner狀態(tài)一致哦~
6. 全部完成后,預(yù)覽原型,wow,輪播效果完成咯~~~~~~~~~~
PS:淘寶頭條的文字動(dòng)態(tài)效果和banner效果制作相同,有興趣的童鞋再多聯(lián)系下~
原型分享地址:http://9u4exk.axshare.com/
本文由 @Lprecious 原創(chuàng)投稿,并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。
這是哪個(gè)軟件?
axure
大佬,為什么DOT被選中的時(shí)候,狀態(tài)會(huì)自動(dòng)選擇“真”
軟件里自動(dòng)設(shè)置好的,需要設(shè)置為false,那就手動(dòng)更改吧
謝謝大佬 ??
第3步,可以直接勾選循環(huán)間隔,及勾選Delay first state change by XXms,實(shí)現(xiàn)無(wú)限循環(huán)
樓主,其他的都實(shí)現(xiàn)了就是輪播時(shí)最后一個(gè)圓點(diǎn)不變色呢,不知道什么原因
同
我是這樣弄的,你可以試試。
1.創(chuàng)建圓點(diǎn),設(shè)置填充顏色為灰色,命名為dot1
2.copy這個(gè)圓形,復(fù)制成三個(gè)之后,為這幾個(gè)命名為“dot1”~“dot3”。
3.全部選中,一起命名為dots,目的是保證這三個(gè)有且僅有一個(gè)被選中。再統(tǒng)一設(shè)置選中狀態(tài)。
4.顯示輪播圖時(shí),設(shè)置被選中的第一個(gè)圓點(diǎn):
5.為動(dòng)態(tài)面板“輪播圖”的圓點(diǎn)狀態(tài)切換設(shè)置用例。
添加用例“載入時(shí)”,添加條件:面板狀態(tài)==圖片1;設(shè)置選中:dot1為真。其他的對(duì)應(yīng)設(shè)置。
我是這樣弄的,你可以試試。
1.創(chuàng)建圓點(diǎn),設(shè)置填充顏色為灰色,命名為dot1
2.copy這個(gè)圓形,復(fù)制成三個(gè)之后,為這幾個(gè)命名為“dot1”~“dot3”。
3.全部選中,一起命名為dots,目的是保證這三個(gè)有且僅有一個(gè)被選中。再統(tǒng)一設(shè)置選中狀態(tài)。
4.顯示輪播圖時(shí),設(shè)置被選中的第一個(gè)圓點(diǎn):
5.為動(dòng)態(tài)面板“輪播圖”的圓點(diǎn)狀態(tài)切換設(shè)置用例。
添加用例“載入時(shí)”,添加條件:面板狀態(tài)==圖片1;設(shè)置選中:dot1為真。其他的對(duì)應(yīng)設(shè)置。