Axure教程:上下翻動效果制作步驟詳解

2019-07-11 16:43:28 產品中國 粉小妞Holly 分享

文章主要跟大家介紹,如何利用Axure制作上下翻動效果,一起來看看~

主要是用Axure做手機APP,內容翻動的效果如何實現:

讓內容在顯示區域滾動;

內容面板沒有接觸到頂部時,讓內容面板移動至頂部;

內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。

1. 元件布局

將頂部和底部矩形、動態面板顯示區域先放置好,設置相同的寬度,高度自定,無縫銜接在一起。

以頂部為例,從元件庫中選擇矩形1拉入畫板中,雙擊矩形編寫文字頂部,之后調整頂部的寬和高,如果寬和高固定了,你點擊上圖步驟4中箭頭所指位置的藍色小點,去除鎖定即可修改,最后在右下角頁面中雙擊矩形命名為頂部,同理可得底部。

顯示區域是動態面板同樣是從元件庫中選中拉入畫板中,命名方式有兩種,1種在面板選中的情況下,直接在右上角3的區域填寫;第2種則是在右下角頁面處雙擊動態面板彈框中命名,如右下角的3區域。

顯示區域除了長寬要設置,還有最左上端的坐標,要承接頂部最坐下端坐標,X軸為0,Y軸為頂部高。

內容區域也是動態面板,但是,生成方式跟顯示面板不同,敲黑板這部分是關鍵,初學看了其他的教程摸索很久才弄懂。內容區域是在顯示面板的state1里面實現的,雙擊state1進入,然后從元件庫拉入新的畫板中。設置內容畫板寬度同其他元件,高度比顯示區域大。圖中忘了截圖內容區域命名后的,別忘了要命名。

2. 填充內容面板

雙擊內容面板中的state1,填充一些元素,方便查看滾動效果,記得操作完要回到首頁。

3. 添加事件

1)讓內容在顯示區域滾動

2)內容面板沒有接觸到頂部時,讓內容面板移動至頂部;意思是你拉下來頁面,讓內容面板上部沒有接觸到頂部時,會自動回到頂部。

先編輯條件,內容面板未接觸頂部時;

讓內容面板移動到頂部,即絕對位置。

3)內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。

先編輯條件,內容面板接觸到頂部,但未接觸底部。

讓內容面板移動到底部,移動距離=顯示面板高度-內容面板高度(為負數)。

確認之后預覽即可。

作者:粉小妞Holly。

產品中國-產品經理門戶原創,作者:楠楠,轉載請注明出處:http://www.pmtoo.com/article/73420.html

聲明:本站部分資源來源于網絡,版權歸原作者或者來源機構所有,如作者或來源機構不同意本站轉載采用,請通知我們,我們將第一時間刪除內容。本站刊載文章出于傳遞更多信息之目的,所刊文章觀點僅代表作者本人觀點,并不意味著本站贊同作者觀點或證實其描述,其原創性及對文章內容的真實性、完整性、及時性本站亦不作任何保證或承諾,請讀者僅作參考。
編輯:果粉
赖子麻将打法技巧 下载广西快乐十分 浙江快乐彩前直走势图 4399小游戏北京麻将馆 浙江福彩快乐12中奖规则 江西时时彩开奖结果走势图 广东时时11选5直播 2018年永久平特肖公式 新疆时时2018022252 什么app能透开wifi 那个票网有极速时时