更新時間:2017-11-29 來源:黑馬程序員 瀏覽量:
axure功能太強大,動態(tài)面板已經(jīng)搞得我頭暈@_@眼花了,更別提7.0版本的中繼器了。。。
廢話不多說,還是和大家分享一下動態(tài)面板實現(xiàn)banner輪播的效果,對動態(tài)面板還不熟的,像我一樣的axure初學者,不妨來看看這個效果的制作過程,然后自己試著做一做,絕對增加自己的信心。
就拿大淘寶首頁banner輪播效果為例說明:
前期線稿圖,部件準備
1. 先畫個大概的位置線框圖,如下圖所示,做了3張banner的輪播效果
2.banner位置的占位符轉(zhuǎn)換為動態(tài)面板(鼠標右鍵,轉(zhuǎn)換動態(tài)面板),給面板命名→_→這個不強制,在右側(cè)面板區(qū)找到動態(tài)面板(圖中為首頁banner),選中,添加2個狀態(tài),分別放banner2,banner3。
雙擊狀態(tài)名進入對應(yīng)的面板頁面,會看到有藍色的框框,框內(nèi)的部件將會在面板里顯示,框外的不顯示。可以給狀態(tài)修改名稱(選中狀態(tài),然后單擊名稱即可修改,圖中狀態(tài)名稱修改為1,2,3對應(yīng)第幾張banner)
3.添加banner輪播時,banner上面的狀態(tài)按鈕(圖中的圓點,會跟隨banner切換,顏色變化),添加矩形部件,右鍵選擇形狀,然后選擇橢圓,然后在工具欄里修改橢圓的寬和高,變成一個圓(w:10,h:10),復制部件2次,在右側(cè)部件名稱和注釋處給3個圓點分別命名圓點1,2,3
前期準備差不多了,現(xiàn)在開始動態(tài)效果準備
1. 準備工作差不多完成了,現(xiàn)在開始動態(tài)搭配效果。首先是banner要設(shè)置成自動輪播的。這要腫么設(shè)置呢?先給面板加動態(tài)效果:選中面板,在右側(cè)交互欄的“顯示”一項下添加用例,雜項里選擇等待2秒(用來展示banner,時間長短自行設(shè)置),然后在動態(tài)面板下選擇”設(shè)置面板狀態(tài)“,選擇狀態(tài)“下一步”,設(shè)置進入退出動畫“向左滑動”,動作時間設(shè)置為500毫秒。重復“等待”,"設(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è)置當頁面載入是,添加用例,顯示動態(tài)面板
3. 做到這里,你再試一試預(yù)覽,驚奇的發(fā)現(xiàn),banner可以輪播了,是不是很開森?然后。。。。。。。停了?這是什么鬼?????告訴你,還沒做完,頁面加載只觸發(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,輪播效果完成咯~~~~~~~~~~
溫馨提示:淘寶頭條的文字動態(tài)效果和banner效果制作相同,有興趣的童鞋再多練習下~
本文版權(quán)歸黑馬程序員UI設(shè)計綜合設(shè)計師學院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:黑馬程序員UI設(shè)計綜合設(shè)計師培訓學院
首發(fā):http://ui.itheima.com/