axure商城

手機垂直劃屏效果從零學起(二)

大家嚎,斷更很久的我又回來了發教程,這次要教大家的是手機垂直劃屏時旁邊的滾動條的制作。

效果圖

3

通過效果圖我們可知我們的期望效果如下:

1、拖動開始時顯示滾動條

2、拖動結束時隱藏滾動條

3、滾動條長度和文章總高度是成比例的

4、拖動到上邊界時滾動條會成比例的縮短

5、拖動結束時滾動條會變回原來的高度

變量名說明

下文中說的main=顯示范圍層,text=內容層,bar=滾動條。

建議學習之前先看下之前的那篇教程:手機垂直劃屏效果從零學起(一)

頁面載入時

載入時要讓滾動條的高度根據比例變為指定高度

[[main.height/text.height*main.height]]

main拖動開始時

顯示bar

main拖動結束時

隱藏bar

拖動到上下邊界結束時將bar還原到原來的高度,上下邊界的錨點不同。

拖動到上邊界時要以頂部為錨點,拖動到下邊界時要以頂部為錨點。

QQ截圖20160210215903

拖動時對內容和bar進行拖動范圍上下限設置

QQ截圖20160210220312

【重點:要用心理解,不理解自己畫圖理解。】

QQ截圖20160210220317

向下拖拽到上邊界的情況,判定條件:[[text.y]]>0

此時,需要將bar的高度設置為[[main.height/text.height*main.height*(1-(text.y/(main.height*0.5)))]]

分解:

main.height/text.height=顯示范圍和內容頁的比例

比例*main.height=滾動條標準高度

main.height*0.5=半屏高度

text.y=拖動超出上邊界值

1-拖動超出上邊界值/半屏高度=滾動條高度系數

滾動條標準高度*滾動條高度系數=此時滾動條的高度

源文件&課后練習

→_→我知道你們一定又在要源文件了,介于這次教程需要腦力理解的內容很多,我就不出謎題給源文件網址了,因為有源文件不動腦子也是學不會的。

http://pan.baidu.com/s/1XmWjG

另外,我只做了上邊界的拖動回彈滾動條效果,下邊界的沒做喲,想印證下自己是否真的學會了嗎?把下邊界的交互自己做了吧~

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

用Axure寫產品需求文檔實例

2015-12-22 16:49:42

案例教程

Axure8實例:支付寶咻一咻

2016-3-31 0:41:04

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo