Popmotion动画(二) Pointer tracking 指针跟踪

Pointer tracking指针跟踪

指针跟踪是用户界面的一个重要组成部分
Drag & drop, scrolling galleries, measuring touch scroll speed是一些显而易见的实例

在本篇中，将看到如何监听action转换成DOM事件流
然后，我们将看看如何用指针动作跟踪鼠标和触摸动作，然后使用该指针的移动来拖动DOM元素

listen

popmotion提供llisten action来监听DOM事件

import { listen } from 'popmotion';

它将接受事件名称作为空格分隔的字符串，这意味着您可以使用单个listen侦听多个事件

listen(document, 'mousedown touchstart')
  .start((e) => console.log(e));

由于listen是一个action,同样的也同样拥有一些链式方法

例如，下面是如何制作一个只有在有两个以上的触摸时才会触发的TouchMove监听器

listen(document, 'touchmove')
  .filter(({ touches }) => touches.length >= 2)
  .start((e) => /* This event has more than 2 touches! */);

Pointer

Pointer操作提供了一个通用接口，用于与单点鼠标和触摸输入交互(对于多点触摸，multitouch提供多点操作)