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

58 評論 170516 瀏覽 406 收藏 7 分鐘

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)

2

3.添加banner輪播時,banner上面的狀態(tài)按鈕(圖中的圓點,會跟隨banner切換,顏色變化),添加矩形部件,右鍵選擇形狀,然后選擇橢圓,然后在工具欄里修改橢圓的寬和高,變成一個圓(w:10,h:10),復(fù)制部件2次,在右側(cè)部件名稱和注釋處給3個圓點分別命名圓點1,2,3

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

4

2. 做到這里,在瀏覽器里預(yù)覽,發(fā)現(xiàn)banner怎么不動?莫急,要讓banner動,得有個觸發(fā)條件,首先將banner動態(tài)面板設(shè)置為不可見(選中動態(tài)面板右鍵,設(shè)為不可見),然后在”頁面交互“中設(shè)置當(dāng)頁面載入是,添加用例,顯示動態(tài)面板

5

3. 做到這里,你再試一試預(yù)覽,驚奇的發(fā)現(xiàn),banner可以輪播了,是不是很開森?然后。。。。。。。停了?這是什么鬼?????告訴你,還沒做完,頁面加載只觸發(fā)了開始的輪播,一直重復(fù)還需要再觸發(fā),要腫么再觸發(fā)呢????嗯,簡單,動態(tài)面板隱藏再顯示就又觸發(fā)了,有木有很神奇,哇哈哈。。。

在動態(tài)面板”顯示“一項的用例里最后添加隱藏面板,顯示面板,保存后預(yù)覽即可輪播

6

4. banner終于可以輪播了,開森!But,banner上的狀態(tài)圓點還木有變,都是一樣的狀態(tài),現(xiàn)在來修改這3個圓點,讓3個圓點對應(yīng)各自的banner。

給3個圓點添加交互樣式(選中圓點,右鍵添加交互樣式),在”選中”下設(shè)置圓點樣式,選擇填充個顏色(紅色,自行設(shè)置),3個圓點同理設(shè)置。

7

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

8

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

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

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

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

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

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

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

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

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

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

      來自陜西 回復(fù)