Popmotion简介：指针与物理

欢迎回到Popmotion简介教程系列。 在第1部分中，我们发现了如何使用补间和关键帧制作精确的时间表动画。

在第2部分中，我们将研究指针跟踪和基于速度的动画。

指针跟踪使我们能够创建可滚动的产品货架，自定义值滑块或拖放界面。

基于速度的动画与诸如tween之类的基于时间的动画不同，因为影响动画行为方式的主要属性是velocity 。 动画本身可能需要任何时间。

我们将在Popmotion， spring ， decay和physics查看三种基于速度的动画。 我们将使用指针跟踪动画的velocity来启动这些动画，这将演示基于速度的动画如何以基于时间的动画无法实现的方式创建引人入胜的好玩的UI。

首先，打开此CodePen一起玩。

指针追踪

Popmotion提供了pointer 功能，以跟踪和输出鼠标或单点触摸指针的坐标。

让我们将其与styler一起导入，这将允许我们设置球的位置。

const { pointer, styler } = popmotion;

const ball = document.querySelector('.ball');
const ballStyler = styler(ball);

对于此示例，我们要拖动球。 让我们添加一个事件，该事件将指针的位置输出到球上：

let pointerTracker;

const startTracking = () => {
  pointerTracker = pointer().start(ballStyler.set);
};

ball.addEventListener('mousedown', startTracking);
ball.addEventListener('touchstart', startTracking);

当释放球时，我们还希望一些代码停止跟踪：

const stopTracking = () => pointerTracker && pointerTracker.stop();

document.addEventListener('mouseup', stopTracking);
document.addEventListener('touchend', stopTracking);

如果您现在尝试拖动球，那么显然存在问题。 当我们触摸它时，