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