中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文分享一個用Axure實現(xiàn)愛彼迎App首頁Banner切換效果的方法，供大家參考，歡迎一起交流。

作者最近閑暇時間試著將愛彼迎App的Banner切換效果用Axure實現(xiàn)出來，網上類似的教程不多，所以給大家分享一下。本文沒有將每一個步驟分享出來，而是提供一個實現(xiàn)的思路。對Axure的初學者來說可能有點難懂，后面會提供源文件下載。

下圖是將要實現(xiàn)的效果截屏：

幾個需求點

1. 到邊界時的拖動阻尼&回彈效果（見下圖）

2. 停止拖動時若為非正常位置，則自動歸位（見下圖）

3. 快速拖動時，自動切換到下一個Banner（見下圖）

4. 左右拖動時，限制頁面上下拖動；上下拖動時，限制Banner左右拖動（見下圖）

因為該Banner區(qū)域即能左右拖動，切換Banner，也能上下拖動進行頁面的拖動，所以如果不做限制，則會出現(xiàn)拖動時Banner與頁面同時移動的情況。

需要處理的幾個需求點明確了，再就是如何通過Axure的函數(shù)功能來實現(xiàn)了。本文會用到以下幾種函數(shù)：

1. TotalDragx和TotalDragy

獲取拖動元件從開始到結束的沿X或Y軸移動距離

2. DragTime

獲取拖動元件從開始到結束的時間，單位毫秒ms。

3. Math.abs(x)

獲取x的絕對值

4. Math.pow(x,y)

獲取x的y次冪

接下來，來解決剛才提到的四個需求點

本文先把四個需求的拖動事件和拖動結束事件拆分開，最后會把四個需求的事件寫在一起。

（設計原型屏幕尺寸為375*812）

1. 到邊界時的拖動阻尼&回彈效果

拖動阻尼效果其實就是隨著水平拖動距離（x軸）的增加，Banner的移動距離（Y軸）增量減少。見下圖：

這個函數(shù)關系可以用函數(shù)實現(xiàn)。嘗試了幾個函數(shù)，發(fā)現(xiàn)函數(shù)y=4*x^(0.5)圖像基本滿足要求。

再加上條件限制就OK了：

左側的阻尼效果：

• 【條件】當Banner模塊的X坐標>20時（Banner模塊距離屏幕左側邊距為20，以下同）
• 【動作】拖動時==>>移動Banner模塊到達位置：X坐標[[4*Math.pow(TotalDragX,0.5)+20]]，Y坐標[[this.y]]

右側的阻尼效果：

在右側的時候，阻尼的效果在Banner模塊往左拖動時出現(xiàn)，所以其TotalDragX的值會是負數(shù)，需要加上絕對值函數(shù)。

• 【條件】當Banner模塊的X坐標<-670
• 【動作】拖動時==>>移動Banner模塊到達位置：X坐標[[4*Math.pow(Math.abs(TotalDragX),0.5)-670]]，Y坐標[[this.y]]

回彈效果可與自動歸位效果函數(shù)寫在一起，請往下看。

2. 停止拖動時若為非正常位置，則自動歸位

拖動結束時，通過判斷Banner模塊的X坐標來定義歸位的Banner位。

歸位Banner1的情況：

• 【條件】當Banner模塊的X坐標小于-160
• 【動作】拖動結束時==>>移動Banner模塊到Banner1的正常位，X坐標為20，Y坐標為[[this.y]]，動畫線性，時間400ms

歸位Banner2的情況：

• 【條件】當Banner模塊的X坐標≥-500且≤-160
• 【動作】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms

歸位Banner3的情況：

• 【條件】當Banner模塊的X坐標大于-500
• 【動作】拖動結束時==>>移動Banner模塊到Banner3的正常位，X坐標為-670，Y坐標為[[this.y]]，動畫線性，時間400ms

3. 快速拖動時，自動切換到下一個Banner

當拖動的距離未達到自動歸位的條件時，可通過拖動的速度來判斷是否移動至下一個Banner位。

可通過鼠標拖動的距離和拖動的時間來判斷。此時需要加入全局變量來記錄當前Banner模塊的位置數(shù)（后面會用到）。

添加全局變量，如名稱設為“BannerState”，默認值為1。定義值1=Banner位為1，值2=Banner位為2，值3=Banner位為3。

在上文自動歸位的【動作】中，再加入變量設置，結果如下:

歸位Banner1的情況：

• 【條件】當Banner模塊的X坐標＜-160
• 【動作1】拖動結束時==>>移動Banner模塊到Banner1的正常位，X坐標為20，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為1。

歸位Banner2的情況：

• 【條件】當Banner模塊的X坐標≥-500且≤-160
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

歸位Banner3的情況：

• 【條件】當Banner模塊的X坐標＞-500
• 【動作1】拖動結束時==>>移動Banner模塊到Banner3的正常位，X坐標為-670，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為3。

有了全局變量記錄Banner模塊的位數(shù)，就可以通過拖動的方向（TotalDragX的正負）和拖動的時間（DragTime），來判斷需要移動的下一個Banner位數(shù)。本文快速拖動定義為400ms內拖動距離為50。

快速拖動自動至Banner1的情況（由Banner2至Banner1）：

• 【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＞0（移動的方向判斷）
• and【條件4】變量BannerState=2（當前Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner1的正常位，X坐標為20，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為1。

快速拖動自動至Banner2的情況（由Banner1至Banner2）：

• 【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＜0（移動的方向判斷）
• and【條件4】變量BannerState=1（當前Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

快速拖動自動至Banner2的情況（由Banner3至Banner2）：

• 【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＞0（移動的方向判斷）
• and【條件4】變量BannerState=3（當前Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

快速拖動自動至Banner3的情況（由Banner2至Banner3）：

• 【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＜0（移動的方向判斷）
• and【條件4】變量BannerState=2（當前Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner3的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為3。

4. 左右拖動時，限制頁面上下拖動；上下拖動時，限制Banner左右拖動

此需求可以通過判斷拖動時的沿X軸與Y軸的距離大小來判斷。

若Math.abs(TotalDragX)＞Math.abs(TotalDragY)，即瞬時水平移動＞垂直移動，則限制頁面垂直方向的拖動。

若Math.abs(TotalDragX)＜math.abs(TotalDragY)，即瞬時水平移動＜垂直移動，則限制Banner模塊的水平拖動。

同時還需要利用變量來記錄判斷的結果，其相當于一個開關的作用，需加入到上文的【條件】和【動作】中。

添加變量，如名稱為“Movable”，默認值為0。定義值0=限制水平拖動，1=限制垂直拖動。

在拖動時，進行TotalDragX和TotalDragY的對比判斷，并且置于最前。

• 【條件】Math.abs(TotalDragX)＞Math.abs(TotalDragY)
• 【動作】拖動時==>>設置變量“Movable”值為1
• 【條件】Math.abs(TotalDragX)＜Math.abs(TotalDragY)
• 【動作】拖動時==>>設置變量“Movable”值為0

至此，Banner模塊的拖動事件以及拖動結束時間基本就可以寫全了。合并后如下：

Banner模塊拖動時事件（case1~case6）

#先置判斷#

case1

• if【條件】Math.abs(TotalDragX)＞Math.abs(TotalDragY)
• 【動作】拖動時==>>設置變量“Movable”值為1

case2

• if【條件】Math.abs(TotalDragX)＜Math.abs(TotalDragY)
• 【動作】拖動時==>>設置變量“Movable”值為0

#垂直拖動#

• case3
• if【條件】變量Movable值=0
• 【動作】拖動時==>>移動：垂直拖動

#水平拖動#

case4（左側阻尼）

• if【條件1】當Banner模塊的X坐標>20時
• 【條件2】變量Movable值=1
• 【動作】拖動時==>>移動Banner模塊到達位置：X坐標[[4*Math.pow(TotalDragX,0.5)+20]]，Y坐標[[this.y]]

case5（右側阻尼）

• if【條件1】當Banner模塊的X坐標<-670
• 【條件2】變量Movable值=1
• 【動作】拖動時==>>移動Banner模塊到達位置：X坐標[[4*Math.pow(Math.abs(TotalDragX),0.5)-670]]，Y坐標[[this.y]]

case6（無阻尼水平拖動）

• if【條件】變量Movable值=1
• 【動作】拖動時==>>移動：水平拖動

Banner模塊拖動結束時事件（case1~case8）

case1

• if【條件】無
• 【動作】設置變量Movable值=0

#自動歸位#

case2（歸位Banner1的情況）

• if【條件】當Banner模塊的X坐標＜-160
• 【動作1】拖動結束時==>>移動Banner模塊到Banner1的正常位，X坐標為20，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為1。

case3（歸位Banner2的情況）

• else if【條件】當Banner模塊的X坐標≥-500且≤-160
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

case4（歸位Banner3的情況）

• else if【條件】當Banner模塊的X坐標＞-500
• 【動作1】拖動結束時==>>移動Banner模塊到Banner3的正常位，X坐標為-670，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為3。

#快速拖動切換#

case5（由Banner2至Banner1）

• else if【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＞0（移動的方向判斷）
• and【條件4】變量BannerState=2（移動至的Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner1的正常位，X坐標為20，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為1。

case6（由Banner1至Banner2）

• else if【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＜0（移動的方向判斷）
• and【條件4】變量BannerState=1（移動至的Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

case7（由Banner3至Banner2）

• else if【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＞0（移動的方向判斷）
• and【條件4】變量BannerState=3（移動至的Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner2的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為2。

case8（快速拖動自動至Banner3的情況，由Banner2至Banner3）

• else if【條件1】Math.abs(TotalDragX)≥50（移動的距離判斷）
• and【條件2】DragTime≤400ms（移動的時間判斷）
• and【條件3】TotalDragX＜0（移動的方向判斷）
• and【條件4】變量BannerState=2（移動至的Banner位數(shù)的判斷）
• 【動作1】拖動結束時==>>移動Banner模塊到Banner3的正常位，X坐標為-325，Y坐標為[[this.y]]，動畫線性，時間400ms
• 【動作2】拖動結束時==>設置變量“BannerState”值為3。

以上為所需的全部拖動時事件和拖動結束時事件。

最后說一下如何用Axure發(fā)布鏈接，添加在手機主屏上。

1. 按F6發(fā)布，配置如下，點擊確定發(fā)布，得到發(fā)布的鏈接。

2. 用手機自帶的瀏覽器打開鏈接，添加到home主屏上。

本文沒有貼源文件的用例截圖，而是將思考的步驟拆分出來一步步地得到所需的結果（希望大家能看明白，作者注），歡迎一起交流學習，有什么問題建議可以留言。后期有時間再做更多的效果出來分享給大家！

原型下載鏈接：（上傳的原型文件不是完全與這次分享一致，作者后續(xù)又加了點特效，Duang！而且作者畫圖喜歡用動態(tài)面板封裝母版，層級較多）

預覽鏈接：（建議用手機自帶瀏覽器打開，添加到主頁上再預覽）

https://ho1abp.axshare.com

本次分享到此結束，感謝各位同學觀看！

本文由 @Cheese 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協(xié)議