■ 靜態(tài)元素結(jié)構(gòu)
將需要制作劃屏的文章內(nèi)容轉(zhuǎn)化為動態(tài)面板。
再將文章內(nèi)容再轉(zhuǎn)化為動態(tài)面板，并將該面板調(diào)整為顯示范圍（手機屏幕大。┑某叽纭
將調(diào)整好的動態(tài)面板放到手機屏幕區(qū)域內(nèi)，如上圖效果。
■ 交互分析
我們期望的效果是：
1、可以垂直拖動文章內(nèi)容。
2、拖動最多可超出上下邊界半屏，但會自動回彈到上下邊界。
■ 垂直拖動&拖動限制
拖動顯示范圍面板時，使文章內(nèi)容被拖動。
所以選中『顯示范圍』面板，選擇『拖動時』事件，選擇『移動』，移動的元件是文章內(nèi)容。
移動中要選擇『垂直拖動』，因為外面只希望文章內(nèi)容垂直拖動，不希望左右也一起被拖動。
我們希望可以上下各可以最多拖出去半屏，所以需要增加邊界限制。Axure8版本中可以直接設置邊界，Axure7需要用條件來限制。
Axure8的方法
頂部<=[[This.height/2]]、底部>[[This.height/2]]，如上圖。
Axure7的方法
增加條件，符合條件的時候才可以拖動：
【注釋】NeiRong=文章內(nèi)容動態(tài)面板，This是當前元件。
在做的時候，不要忘記點擊旁邊的fx按鈕，增加局部變量，如下圖。這樣變量才可以生效的哦。
[[NeiRong.y]]<=[[This.Height/2]] //向下拖動達到半屏時，內(nèi)容的Y坐標，如下圖。
[[NeiRong.y]]>=[[This.height/2-NeiRong.height]] //向上拖動達到半屏時，內(nèi)容Y的坐標，如下圖。
這樣劃屏就做好了，并且上下都可以額外拖出去半個屏幕，允許拖出去的額外半屏是為了回彈準備的。
■ 回彈
回彈是根據(jù)文章內(nèi)容的拖動結(jié)束時的Y坐標來判斷是否超過了文章的最上面或最下面的邊界。
如果文章內(nèi)容的Y>0，就將文章內(nèi)容移回0,0點。要選擇動畫才會有彈回去的過程哦，我比較喜歡緩慢退出這個動畫。
如果文章內(nèi)容的Y坐標<顯示范圍的高度-內(nèi)容的高度，那么就將文章內(nèi)容的Y坐標設置為顯示范圍的高度-內(nèi)容的高度。
我覺得大家的疑點應該在于『顯示范圍的高度-內(nèi)容的高度』這個東西，不知道為什么要這樣寫。
其實這是一個數(shù)學題……
『顯示范圍-內(nèi)容高度』得到的是還需要移動多少像素才可以讓剩下的最后一屏（1屏高度=顯示范圍的高度）內(nèi)容正好放在顯示范圍中。
由于Axure的左上為0,0點，所以面板向上移動的時候，Y坐標（Y坐標是以元件左上點為準的）會變成負數(shù)。所以我們需要用『顯示范圍-內(nèi)容高度』，而不是『內(nèi)容高度-顯示范圍』。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。