【知識點32】指針屬性與動态面闆拖動

01 預期效果

（1）手機解鎖滑塊僅可被水平拖動且不能超過邊界。

（2）拖動時可遮蓋滑塊背後的文字。

（3）若滑塊未滑到末端，鼠标松開後滑塊會回到原起點。

（4）滑塊滑至末端，解鎖新頁面。

02 鼠标指針屬性

（1）Cursor.x：獲取鼠标的X坐标。

（2）Cursor.y：獲取鼠标的Y坐标。

（3）DragX：獲取被拖動控件的X位移。（瞬間）

（4）DragY：獲取被拖動控件的Y位移。（瞬間）

（5）TotalDragX：獲取被拖動控件的X位移總和。（拖動開始至拖動結束）

（6）TotalDragY：獲取被拖動控件的Y位移總和。（拖動開始至拖動結束）

注：X軸橫坐标向右為正，向左為負；Y軸縱坐标向下為正，向上為負。

（7）DragTime：獲取被拖動控件的時間。（拖動開始至拖動結束；毫秒）

03 動态面闆拖動事件

Axure中隻有動态面闆有拖動事件。

拖動事件包括：動态面闆（拖動開始時、拖動結束時、拖動時）；手勢（向左拖動結束時、向右拖動結束時、向上拖動結束時、向下拖動結束時）。

點擊動态面闆，在“交互”功能面闆中，打開“交互編輯器”。添加“拖動時”事件。點擊“移動”-選擇動态面闆-在“移動”中選擇“跟随拖動”。單擊确定完成。

04 滑動解鎖

（1）在頁面畫布中放入手機外觀圖片、解鎖後圖片、動态面闆鎖屏元件（名稱：lock），動态面闆lock中包括解鎖滑塊動态面闆（名稱：slider）、黑色背景元件（名稱：background）以及邊界透明矩形元件（名稱：border）。

（2）滑塊水平移動及遮罩文字

點擊解鎖滑塊動态面闆slider，在“交互”功能面闆中，打開“交互編輯器”。添加“拖動時”事件。點擊“移動”-選擇slider滑塊-“移動”中選擇“跟随水平拖動”。點擊“設置尺寸”-選擇黑色背景元件background-在“尺寸”中設置寬度為當前黑色背景background的寬度再加上瞬間拖動的距離“[[Target.width DragX]]”，單擊确定完成。

（3）滑塊邊界設定

判斷邊界（border）的左邊界大于滑塊（slider）的左邊界為真，移動滑塊至border左邊界。

添加“拖動時”情形。通過局部變量獲取邊界元件border以及解鎖滑塊slider的左邊界值。若邊界border的左邊界大于滑塊slider的左邊界“[[border.left>slider.left]]”，則移動滑塊至border左邊界。

注意：“拖動時”不同情形之間if - else切換。

同理，進行滑塊的右邊界設置。若邊界border的右邊界小于滑塊slider的右邊界“[[border.right<slider.right]]”，則移動滑塊至border右邊界減去滑塊slider的寬度。

同時判斷若黑色背景元件background的寬度大于邊界border的寬度，則設置黑色背景元件background的寬度等于邊界border的寬度。

（4）滑塊移動效果

判斷滑塊slider元件拖動的X位移總和再加上滑塊slider元件的寬度，若大于等于邊界border的寬度，則隐藏動态面闆鎖屏元件lock，而顯示解鎖後手機桌面圖片。

點擊解鎖滑塊動态面闆slider，在“交互”功能面闆中，打開“交互編輯器”。添加“向右拖動結束時”事件。點擊“啟用情形”，添加滑塊拖動總位移加上滑塊寬度與邊界寬度的判斷條件“[[TotalDragX slider.width]]>= [[border.width]]”，則隐藏lock動态面闆。否則，将滑塊移動至border左邊界。

同時，設置黑色背景元件的寬度調整為原寬度值。

這樣，即實現了預期效果。

待續~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!