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提供多点操作)

import { pointer } from 'popmotion';

默认情况下，指针将指针的clientX和clientY属性输出为x和y

let pointerTracker;listen(document, 'mousedown touchstart').start(() => {pointerTracker = pointer().start(({ x, y }) => console.log(x, y));
});listen(document, 'mouseup touchend').start(() => {if (pointerTracker) pointerTracker.stop();
})

Dragging(拖拽)

在大多数情况下，我们实际上希望使用这些移动数据来拖动或滚动

让我们再次使用styler函数来创建DOM元素接口，以便提供位置数据
关注startTracking方法，并尝试写一个demo并拖动球<指#a .ball元素>

const ball = document.querySelector('#a .ball');
const ballStyler = styler(ball);
let pointerTracker;const startTracking = () => {pointerTracker = pointer().start(ballStyler.set);
};const stopTracking = () => {if (pointerTracker) pointerTracker.stop();
};listen(ball, 'mousedown touchstart').start(startTracking);
listen(document, 'mouseup touchend').start(stopTracking);

OK，球可以进行拖动了，但是好像，球移动到了一个奇怪的地方
原因很简单，pinter输出一个{x,y}坐标是相对于视窗的

球的{x，y}从0，0开始变换。所以，如果我们把指针的绝对位置直接应用到球上，它就不会移动到我们想要的位置

const ball = document.querySelector('#b .ball');
const ballStyler = styler(ball);
let pointerTracker;const startTracking = () => {pointerTracker = pointer({x: ballStyler.get('x'), // +++++y: ballStyler.get('y') // ++++}).start(ballStyler.set);
};const stopTracking = () => {if (pointerTracker) pointerTracker.stop();
};

单轴拖动 Single-axis dragging

可以直接这样:

pointer().start(({ x }) => ballStyler.set('x', x));

但是，更可重用的方法是使用指针的管道(pipe)方法组成一个新的动作。我们可以提供一个简单的选择器函数，从指针的输出中选择x并返回它

const xPointer = (initialX) => pointer({ x: initialX }).pipe(({ x }) => x);

现在我们可以使用xPointer方法了

xPointer(ballStyler.get('x')).start(ballStyler.set('x'));

demo:

const ball = document.querySelector('#c .ball');
const ballStyler = styler(ball);
const xPointer = (initialX) => pointer({ x: initialX }).pipe(({ x }) => x);let pointerTracker;const startTracking = () => {pointerTracker = xPointer(ballStyler.get('x')).start(ballStyler.set('x'));
};const stopTracking = () => {if (pointerTracker) pointerTracker.stop();
};listen(ball, 'mousedown touchstart').start(startTracking);
listen(document, 'mouseup touchend').start(stopTracking);

结论

listen可以将DOM事件转换为值的反应流。对于利用管道和其他可链接的方法，以及使用其他操作进行组合侦听都很有用
pointer可以绝对输出值，或者，如果我们提供初始坐标，则可以相对地应用它的增量来输出值
最后，我们可以组合新的操作来生成具有新行为( action )的可重用代码，比如单轴拖动

下一篇预告

现在我们已经开始拖动工作，在下一篇教程中，我们将学习如何检查被拖动物体的速度，并将其应用于衰变、物理和弹簧动作，以创建自然感觉的相互作用

Popmotion动画(二) Pointer tracking 指针跟踪相关推荐

【C++探索之旅】第一部分第十二课：指针一出，谁与争锋
内容简介 1.第一部分第十二课:指针一出,谁与争锋 2.第一部分第十三课预告:第一部分小测验指针一出,谁与争锋上一课<[C++探索之旅]第一部分第十一课:小练习,猜单词>中,我们用一个 ...
XamarinAndroid组件教程设置自定义子元素动画(二)
XamarinAndroid组件教程设置自定义子元素动画(二) (9)打开MainActivity.cs文件,为RecylerView的子元素设置添加和删除时的透明动画效果.代码如下: --using ...
OpenCV学习笔记（二十一）——绘图函数core OpenCV学习笔记（二十二）——粒子滤波跟踪方法 OpenCV学习笔记（二十三）——OpenCV的GUI之凤凰涅槃Qt OpenCV学习笔记（二十
OpenCV学习笔记(二十一)--绘图函数core 在图像中,我们经常想要在图像中做一些标识记号,这就需要绘图函数.OpenCV虽然没有太优秀的GUI,但在绘图方面还是做得很完整的.这里就介绍一下相关 ...
c语言未初始化的指针下标访问是0,C语言的二数组的指针访问.doc
C语言的二数组的指针访问二维数组的指针访问 --王炳华指向二维数组的指针及用指针访问二维数组,是学习指针的最大难点.如果真正弄懂了这个问题,就可以说你学会了使用指针. 二维数组的指针指针就是地址 ...
##二维数组指针的解引用
##二维数组指针的解引用方法: int (*p)[5]; //定义一个二维数组指针,它的元素是一个包含5个int类型的一维数组 int array[3][5]; p = array; //指针指向二 ...
SRPG游戏开发（十）第五章颜色映射与职业动画 - 二颜色组(Color Chart)
返回目录第五章颜色映射与职业动画二颜色组(Color Chart) 颜色组是保存许多颜色的一个容器,可以在Swapper中直接创建List<Color>或Color[] ...
简介 Tagged Pointer (标记指针)
在计算机科学中,Tagged Pointer 是一个指针(内存地址),它具有与其关联的附加数据,例如,indirection bit 或引用计数. 这些附加数据通常是"折叠"在指 ...
一起研究ORB-SLAM（二）---Tracking线程
转载自一起研究ORB-SLAM(二) 上一篇文章我讲述就ORB-SLAM的基本流程,还记得ORB-SLAM分为哪三个主要的线程吗?在脑子里头大声的所出来吧,Tracking.LOCAL MAPPIN ...
WPF中的动画——（二）From/To/By 动画(二)
WPF中的动画--(二)From/To/By 动画我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation ...

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