13573696515
 
新聞與幫助
 
Axure教程 | 手機端APP原型動效庫之底部彈框
瀏覽次數: 時間:2017/12/25 17:37:10

本分給大家分享:在Axure軟件中,如何制作APP原型的底部彈框。


 

  做好后,直接修改中繼器列表中的文字,即可實現想要的彈框;彈框選項的鏈接,也可以直接在中繼器列表中設置。可以實現四種類型的彈框:有標題的彈框、無標題的彈框、單選項彈框、多選項彈框。亮亮原型專注于:APP原型動效庫、APP原型元件庫、Axure原型動效庫、Axure原型元件庫、高保真原型設計。

  原型屏幕尺寸:375*667px(iphone6/iphone6s/iphone7)


 

  一、底部彈框的思路及步驟解析

  1、在Axure中,拖入一個動態面板(命名:Box2,尺寸:375,667),以下稱Box2,默認隱藏;

  2、在Box2中,設置一個黑色背景,透明度40%(命名:Background_Box2,尺寸:375,667),默認隱藏;

  3、在Box2中,再拖入一個動態面板,以下稱底部彈框(命名:Main_Box2,尺寸:375,高度自動調整為內容尺寸),默認隱藏;

  4、在Axure中,拖入一個按鈕(或熱區),以下稱彈框按鈕,命名及尺寸根據情況自行編輯;

  5、單擊彈框按鈕時,設置事件:

  移動Box2到達(坐標:0,0),這樣設置后,該動態面板就可以放在頁面的任意位置,不會遮擋住其他元件的編輯,

  顯示Box2,動畫:無,置于頂層,該事件必須在以下2個事件的前面;

  顯示黑色背景,動畫:逐漸,時間:500毫秒;

  顯示底部彈框,動畫:向上滑動,時間:500毫秒;

  6、單擊黑色背景時,設置事件:

  隱藏底部彈框,動畫:向下滑動;

  隱藏黑色背景,動畫:逐漸;

  等待500毫秒,500毫秒為動畫默認播放時間;

  隱藏Box2,動畫:無,該事件必須在以上3個事件的后面,因為要等待動畫播放完畢再隱藏。

  7、雙擊進入底部彈框,編輯好彈框選項及取消按鈕,選項的數量、文字內容根據情況自行編輯;

  8、單擊選項時,設置事件:

  單擊選項時,如果不需要跳轉至其他頁面,則直接觸發“黑色背景單擊時事件”即可,因為該事件與“單擊黑色背景時的事件”一致;

  單擊選項時,如果需要跳轉至其他頁面,則設置單擊時的鏈接跳轉即可。

  9、單擊取消按鈕時,設置事件:

  單擊取消按鈕時,直接觸發“黑色背景單擊時事件”即可,因為該事件與“單擊黑色背景時的事件”一致。


 

  二、高級進階:運用中繼器和全局變量,實現彈框選項的自由編輯及增減

  1、單擊彈框按鈕時設置全局變量【box_id】的值,并觸發“中繼器載入時事件”;

  2、中繼器載入時,設置添加篩選事件:中繼器中“Item.box_id”列的值等于全局變量“box_id”的值[[Item.box_id==box_id]];

  3、第一行上面為圓角,中間幾行為直角,最后一行下面為圓角,如果第一行是標題則高度和字體樣式都與其他行不一樣,如果只有一行則上面下面都是圓角,一共5種樣式,需要用動態面板做5種不同的樣式,然后通過中繼器的函數和字段,來判斷每行調用哪種樣式,此處需要設置的事件截圖如下(如有更好方法,歡迎請加q群235415403交流溝通):


Axure動效庫、App底部彈框

 


APP底部彈框事件

 

  三、下拉刷新思路解析


 

  1、在Axure中設置2個動態面板:下拉刷新動態面板(高度:65px,以下簡稱“刷新面板”),內容動態面板(高度調整為內容尺寸,以下簡稱“內容面板”);

  2、刷新面板初始坐標(0,0),內容面板初始坐標(0,65);

  3、垂直拖動內容面板時,刷新面板底部移動至內容面板頭部,設置提示語為:“下拉刷新”;

  4、拖動內容面板y坐標大于等于130時,刷新面板改變提示語為:“松手刷新”;

  5、拖動結束時,若內容面板頭部y坐標大于等于130,則移動刷新面板至(0,65),移動內容面板至(0,130),改變刷新面板提示語為:“刷新中…”,并在此坐標等待1000毫秒,最后再將兩面板移回至初始位置;

  6、拖動結束時,若內容面板頭部y坐標大于65小于130時,則將兩面板移回至初始位置。

 
我們的服務
網站設計
網絡推廣
搜索引擎優化
網站備案
維護與改版
我們的優勢
細致入微的前期服務
精準的策劃服務
完美的網頁設計
領先的技術
有任何問題,24小時回應并處理
聯系我們
山東省濰坊市東風街世紀泰華大廈16層
蘭經理
13573696515
383781928
383781928@qq.com
濰坊創美網絡技術有限公司 All Rights Reserved 魯ICP備17032779號
日韩欧美另类国产在线