Tap 点击

当手指或者鼠标在一个组件上按下然后放开，这样就是一次点击行为Tap。

Tap在一个组件上会触发一个tap事件，如果点击释放时鼠标或者手指不在该组件上就会触发一个tapCancel的事件。

如果被点击的组件是一个可拖拽组件的子元素，那么它会在你的手指或者鼠标在点击过程中移动了三个像素之后自动取消该手势。

whileTap: string | TargetAndTransition

用动画的参数和variants对象中的属性名赋值，当组件被按住的时候就会发生相应的动画。

<Frame whileTap={{ scale: 0.8 }} />

onTap(event , info): void

这个属性给它赋值一个回调函数，当点击操作完成时就会触发相应的函数执行。

function onTap(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTap={onTap} />

回调函数中的参数
event: MouseEvent | TouchEvent | PointerEvent 原生的点击事件对象
info: TapInfo 包含点击位置相对于页面或者设备的坐标信息

onTapStart(event, info):void

当点击操作一开始时会触发相应的回调函数

function onTapStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTapStart={onTapStart} />

回调函数中的参数
event: MouseEvent | TouchEvent | PointerEvent 原生的点击事件对象
info: TapInfo 包含点击位置相对于页面或者设备的坐标信息

onTapCancel(event, info):void

当点击操作取消时会触发相应的回调函数

function onTapCancel(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTapCancel={onTapCancel} />

回调函数中的参数
event: MouseEvent | TouchEvent | PointerEvent 原生的点击事件对象
info: TapInfo 包含点击位置相对于页面或者设备的坐标信息