【適合axure初學(xué)者】動(dòng)態(tài)面板實(shí)現(xiàn)banner的輪播效果

58 評(píng)論 170516 瀏覽 406 收藏 7 分鐘

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)

2

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

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這樣的輪播順序。

4

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)面板

5

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ù)覽即可輪播

6

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è)置。

7

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)一致哦~

8

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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這是哪個(gè)軟件?

    來(lái)自廣東 回復(fù)
    1. axure

      來(lái)自上海 回復(fù)
  2. 大佬,為什么DOT被選中的時(shí)候,狀態(tài)會(huì)自動(dòng)選擇“真”

    來(lái)自廣東 回復(fù)
    1. 軟件里自動(dòng)設(shè)置好的,需要設(shè)置為false,那就手動(dòng)更改吧

      來(lái)自上海 回復(fù)
    2. 謝謝大佬 ??

      來(lái)自廣東 回復(fù)
  3. 第3步,可以直接勾選循環(huán)間隔,及勾選Delay first state change by XXms,實(shí)現(xiàn)無(wú)限循環(huán)

    來(lái)自陜西 回復(fù)
  4. 樓主,其他的都實(shí)現(xiàn)了就是輪播時(shí)最后一個(gè)圓點(diǎn)不變色呢,不知道什么原因

    來(lái)自北京 回復(fù)
    1. 來(lái)自江蘇 回復(fù)
    2. 我是這樣弄的,你可以試試。
      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è)置。

      來(lái)自陜西 回復(fù)
    3. 我是這樣弄的,你可以試試。
      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è)置。

      來(lái)自陜西 回復(fù)