Kraken 手势方案

[wssgcg1213]

No description provided.

[answershuto]

• 连续手势：从 down 到 moves 到 up，中间过程可以通过 state 状态来描述的手势，可以清楚地通过不同的回调或者不同的状态让开发者感知目前手势的状态的手势。常见连续手势：pan。
• 离散手势：完整手势触发完毕后才会通过回调来通知开发者，无中间状态的转换。常见离散手势：click。

Flutter

• Tap
• Double tap
• Long press （500 ms 以上的长按）
• Vertical(Horizontal) drag 横（纵）滑
• scale
• Pan
  Pan 内部实现，需要达到一个最小速度以及最小移动距离的 drag 才能触发 Pan，Pan 是基于 drag 之上的封装，增加了判断。Flutter 内置一个 down + moves + up 只能触发一次手势，所以 Pan 只能触发一次（与 hammer 不同，为有状态手势）
  详见： https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/gestures/monodrag.dart#L579

Flutter 接口设计

均为连续手势，无离散手势，Tap 也会通过 TapDown、TapUp 等状态来完成。每个中间状态会通过不同的回调函数来支持开发者处理逻辑，返回参数也根据中间状态的不同而不同。排除 Widget 的统一封装来看，跟安卓类似，回调过多，切返回参数不统一，不利于标准化。

iOS

• Tap（离散手势，100 ms 左右的点击行为）
• Long Press (连续手势，500 ms 以上的点击行为)
• Pan （连续手势，平移，类似 drag，但是可以在移动过程中不断变化方向）
  
• Swipe （离散手势）
  
• Pinch（连续手势，向外捏时放大，向内捏时缩小）
• Rotation（连续手势，旋转）

iOS 接口设计：

• iOS 的手势可以带上多个 touch pointer，同时满足了几个手指操作的能力。比如三指滑动（三根手指的swipe）、双指点击（两根手指的 Tap）等。
• 对用一个手势处理成一个注册回调函数，通过 state 判断目前手势的状态。
• 离散手势与连续手势共存。

hammer.js

• Pan
  Pan 的需要有一个最小距离以及方向，只要达到这个条件可以频繁触发。
  详见：https://github.com/hammerjs/hammer.js/blob/master/src/recognizers/pan.js#L42
• Swipe
  距离与速度达到一定阈值的滑动。
  详见：https://github.com/hammerjs/hammer.js/blob/master/src/recognizers/swipe.js#L36
• Pinch （向外捏时放大，向内捏时缩小）
• Press （长按，默认时间在 250 ms 以上 ，替代了 long press）
  详见：https://github.com/hammerjs/hammer.js/blob/master/src/recognizers/press.js#L78

hammer 接口设计

• 不同于 IOS 的，hammer 的手势均是离散的，只有被触发后的回调，带上了比如速度、方向等参数。
• 判断较为简单，由于是前端解决方案，截取 touch 事件来做计算以及判断，需要频繁通过 bridge 传递数据，性能较差。
• 单指设计。
• 无法实现连续手势，内部无法通过竞技场（实现成本）等来做手势竞争，导致可能某个边界情况会触发 2 个不同手势，导致业务问题。

安卓

• View 上直接提供 click 以及 touch 的一些方法
  • OnDragListener：拖动事件。
  • OnLongClickListener：长按抬起时的事件。
• GestureDetector.OnGestureListener
  • onDown：手势识别器的 down 事件。
  • onFling： 类似 swipe。
  • onLongPress： 长按。
  • onScroll：scroll view 滚动时的事件。
  • onShowPress：按下后没抬起，相当于（up、move、down 的中间 move 状态，只是没move）。
  • onSingleTapUp： 点击抬起，对应 onDown。
• GestureDetector.OnDoubleTapListener： 双击。
• ScaleGestureDetector：旋转，捏，分 begin、onScale、end。

安卓接口设计

比较细分，大致上跟 FLutter 比较像，但是 Flutter 是不同手势在不同类中的，Flutter 基本上都是离散手势，安卓很多连续手势，但是更加细分。

方案

使用方法：

elment.addEventLisenter('xxx',(gestureEvent) => {
	if (gestureEvent.state === 'down') {
		console.log(gestureEvent) ; 
	}
})

我们在 Gesture Event 上进行扩展，增加不同手势的一些参数：

• state： 连续手势的一些状态，down、move、up。
• direction：方向，left、right、up、down。
• deltaX: X轴移动的坐标。
• deltaY：Y轴移动的坐标。
• velocityX：X轴移动速度。
• velocityY：Y轴移动速度。
• scale: 放大或缩小的比例。
• rotation：角度。

实现手势：

• swipe
• Pan
• Long Press
• Scale