愛碼哥開發進階|移動端交互手勢詳解及實現

愛碼哥開發進階|移動端交互手勢詳解及實現

隨著移動設備的快速發展,觸控手勢操作逐漸成為人們日常生活中最為常用的與產品之間的交互操作方式。與鼠標和鍵盤的交互方式不同,觸控手勢交互更加符合人們的自然行為習慣,也因此可以得到快速的發展。

交互手勢是我們現在最常用的一種交互形式,我們每天都在移動端設備上進行大量的操作。好用的交互手勢,會提升用戶使用產品的流暢感、愉悅感和滿足感,相反不好的交互手勢則會阻礙用戶完成任務需求,降低產品的使用率。

愛碼哥手勢開發過程中包括輕拍,捏合,旋轉,拖拽等手勢。

控件方法

愛碼哥開發進階|移動端交互手勢詳解及實現

參數和返回值

愛碼哥開發進階|移動端交互手勢詳解及實現

愛碼哥開發進階|移動端交互手勢詳解及實現

愛碼哥開發進階|移動端交互手勢詳解及實現

愛碼哥開發進階|移動端交互手勢詳解及實現

愛碼哥開發進階|移動端交互手勢詳解及實現

輕拍

輕拍手勢包括:單擊,雙擊,單指,雙指

示例代碼

愛碼哥開發進階|移動端交互手勢詳解及實現

Tap手勢參數:

numberOfTapsRequired: 接受的點擊次數。

numberOfTouchesRequired: 接受的觸點個數。

效果圖


愛碼哥開發進階|移動端交互手勢詳解及實現


滑動手指

滑動包括:左滑,右滑,上滑,下滑

Swipe是滑動手勢,SwipeLeft, SwipeRight, SwipeUp, SwipeDown。

Swipe手勢參數:

numberOfTouchesRequired: 觸點個數。

注意:當控件在中有滾動條時,SwipeUp和SwipeDown手勢無效。

旋轉手勢

Rotata是滑動手勢,用來監聽兩個手指旋轉。

Rotata手勢返回值recognizer:

rotation: 旋轉弧度。

rotationInDegrees: 旋轉角度,rotation的角度表示。

velocity: 旋轉速率。

捏合手勢

Pinch是捏合手勢,用來監聽兩個手指捏合。

Pinch手勢返回值recognizer:

scale: 捏合比例。

捏合縮放圖片

通過捏合手勢縮放圖片。

拖拽手勢(Pan)

Pan是拖拽手勢,用來拖拽一個控件。

Pan手勢參數:

minimumNumberOfTouches:最小觸點個數。

maximumNumberOfTouches:最大觸點個數。

Pan手勢返回值recognizer:

translationX: X軸拖拽距離。

translationY: Y軸拖拽距離。

velocityX: X軸拖拽速率。

velocityY: Y軸拖拽速率。


分享到:


相關文章: