<dfn id="rsyau"><label id="rsyau"></label></dfn>
    <table id="rsyau"></table>
<noframes id="rsyau">
    <dfn id="rsyau"></dfn>
    <blockquote id="rsyau"></blockquote>
    <table id="rsyau"></table><progress id="rsyau"><delect id="rsyau"><sup id="rsyau"></sup></delect></progress>
      <table id="rsyau"></table>
      <dfn id="rsyau"><samp id="rsyau"></samp></dfn>
      <table id="rsyau"><label id="rsyau"></label></table><dfn id="rsyau"></dfn>
        <legend id="rsyau"><dfn id="rsyau"></dfn></legend><var id="rsyau"><sup id="rsyau"></sup></var>
        <progress id="rsyau"><samp id="rsyau"></samp></progress>
          <table id="rsyau"><delect id="rsyau"></delect></table>

              全國咨詢/投訴熱線:400-618-9090

              首頁技術文章正文

              UI設計:如何在Axure中,用動態面板實現banner的輪播效果

              更新時間:2017-11-29 來源:黑馬程序員 瀏覽量:

              axure功能太強大,動態面板已經搞得我頭暈@_@眼花了,更別提7.0版本的中繼器了。。。

              廢話不多說,還是和大家分享一下動態面板實現banner輪播的效果,對動態面板還不熟的,像我一樣的axure初學者,不妨來看看這個效果的制作過程,然后自己試著做一做,絕對增加自己的信心。

              就拿大淘寶首頁banner輪播效果為例說明:

              前期線稿圖,部件準備

              1. 先畫個大概的位置線框圖,如下圖所示,做了3張banner的輪播效果

              Axure

              2.banner位置的占位符轉換為動態面板(鼠標右鍵,轉換動態面板),給面板命名→_→這個不強制,在右側面板區找到動態面板(圖中為首頁banner),選中,添加2個狀態,分別放banner2,banner3。

              雙擊狀態名進入對應的面板頁面,會看到有藍色的框框,框內的部件將會在面板里顯示,框外的不顯示??梢越o狀態修改名稱(選中狀態,然后單擊名稱即可修改,圖中狀態名稱修改為1,2,3對應第幾張banner)

              Axure

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

              Axure

              前期準備差不多了,現在開始動態效果準備

              1. 準備工作差不多完成了,現在開始動態搭配效果。首先是banner要設置成自動輪播的。這要腫么設置呢?先給面板加動態效果:選中面板,在右側交互欄的“顯示”一項下添加用例,雜項里選擇等待2秒(用來展示banner,時間長短自行設置),然后在動態面板下選擇”設置面板狀態“,選擇狀態“下一步”,設置進入退出動畫“向左滑動”,動作時間設置為500毫秒。重復“等待”,"設置面板狀態"兩次。

              注意:banner輪播到第三張時,下一張連接第一張banner,在設置面板狀態時,勾選”從最后一個到第一個自動跳轉“,這樣才能實現banner1,2,3,1,2,3這樣的輪播順序。

              Axure

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

              1512031669406_5.jpg

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

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

              Axure

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

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

              Axure

              5. 然后將圓點的效果和動態面板聯系起來,在動態面板“顯示”一項的用例里繼續添加內容,部件里選擇“設置選擇/選中”,banner1顯示時,選中圓點1(選定狀態值:true),圓點2和3為未選中狀態(選定狀態值:false),以此類推設置即可。

              注意:用例是一項一項執行,不要把圓點的狀態放錯位置喲~圓點狀態要和對應的banner狀態一致哦~

              Axure

              6. 全部完成后,預覽原型,wow,輪播效果完成咯~~~~~~~~~~

              溫馨提示:淘寶頭條的文字動態效果和banner效果制作相同,有興趣的童鞋再多練習下~


              本文版權歸黑馬程序員UI設計綜合設計師學院所有,歡迎轉載,轉載請注明作者出處。謝謝!

              作者:黑馬程序員UI設計綜合設計師培訓學院

              首發:http://www.yuntianmei.cn/

              javaee

              http://www.itcast.cn/files/image/202012/20201209100457953.pngpython

              web

              ui

              cloud

              test

              c

              netmarket

              pm

              Linux

              movies

              robot

              http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

              pythonAI

              在線咨詢 我要報名

              一品道门在线观看