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);

如果您现在尝试拖动球，那么显然存在问题。 当我们触摸它时，球跳开！ 不好的用户体验。

这是因为默认情况下， pointer输出指针相对于页面的位置。

要输出指针相对于另一个点的位置（在本例中为球的x / y转换），我们可以简单地将该位置传递给pointer如下所示：

const startTracking = () => {
  pointerTracker = pointer({
    x: ballStyler.get('x'),
    y: ballStyler.get('y')
  }).start(ballStyler.set);
};

现在，您只需几行代码就可以拖动它了！ 但是，当用户释放球时，球停止运动。

这并不令人满意：想象一下用户可以拖动以滚动的产品的可滚动轮播。 如果它只是停了下来，而不是动量滚动，那么使用起来就不那么愉快了。

这也将更加困难，因为滚动旋转木马所需的整体体力会更高。

要启用这样的动画，我们首先需要知道被抛出对象的velocity 。

跟踪速度

Popmotion提供了可以帮助我们跟踪速度的功能。 这就是所谓的value 。 让我们导入：

const { pointer, styler, value } = popmotion;

从技术上讲一会儿，Popmotion的所有动画都称为动作 。 动作是可以启动和停止的值的反应性流。

相反， value是一种反应 。 它无法停止或启动。 当它的update方法被调用时，它只是被动地响应。 它可以跟踪值，并可用于查询其速度。

因此，在定义ballStyler ，让我们为ballXY定义一个新value ：

const ballXY = value({ x: 0, y: 0 });

每当ballXY更新时，我们要更新ballStyler 。 我们可以向value传递第二个参数，该函数将在ballXY更新时运行：

const ballXY = value({ x: 0, y: 0 }, ballStyler.set);

现在，我们可以重写pointer以更新ballXY而不是ballStyler.set ：

const startTracking = () => {
  pointer(ballXY.get())
    .start(ballXY);
};

现在，在任何指针处，我们都可以调用ballXY.getVelocity() ，我们将接收x和y的速度，准备插入基于速度的动画中。

基于速度的动画

spring

引入的第一个基于速​​度的动画是spring 。 它基于控制Apple的CASpringAnimation的相同方程式，CASpringAnimation是所有iOS弹性趣味性背后的Spring动画。

进口：

const { pointer, spring, styler, value } = popmotion;

现在，修改stopTracking以使它不像停止pointerTracker动画那样，而是像这样启动spring动画：

const stopTracking = () => spring({
  from: ballXY.get(),
  velocity: ballXY.getVelocity(),
  to: 0,
  stiffness: 100,
  damping: 20
}).start(ballXY);

我们为它提供球的当前位置，速度和目标，然后运行模拟。 它根据用户的投球方式而变化。

弹簧最酷的是它们的表现力。 通过调整mass ， stiffness和damping特性，最终可以得到截然不同的弹簧感。

例如，如果仅将stiffness更改为1000以上，则可以创建一种感觉像是高能量捕捉的运动。 然后，通过将mass更改为20 ，可以创建看起来几乎像重力的运动。

在几乎任何情况下，都有一种组合会让您的用户感到满意和满意，并适合您的品牌。 通过弹奏不同的弹簧感，您可以传达不同的感觉，例如严格的越界动作或柔和的肯定弹跳。

decay

该decay 动画 ，顾名思义， 衰变所提供的速度，使动画逐渐减慢至完全停止。

这可用于创建在智能手机上发现的动量滚动效果，如下所示：

导入decay函数：

const { decay, pointer, spring, styler, value } = popmotion;

并用以下stopTracking替换stopTracking函数：

const stopTracking = () => decay({
  from: ballXY.get(),
  velocity: ballXY.getVelocity()
}).start(ballXY);

decay基于提供from和velocity道具自动计算新目标。

可以通过弄乱上面链接的文档中概述的道具来调整减速的感觉，但是与spring和physics不同， decay被设计为开箱即用。

physics

最后，我们有physics 动画 。 这是Popmotion的瑞士军刀中基于速度的动画。 使用它，您可以模拟：

• 恒速
• 加速
• 泉水
• 摩擦

spring和decay提供了超精确的运动，并提供了更多的“感觉”。 很快，它们都将被清除。

但是两者都是一成不变的 。 一旦开始使用它们，它们的属性就会固定在石头上。 非常适合当我们要基于初始from / velocity状态开始动画时使用，但是如果我们需要持续的交互效果则不太好。

相反， physics是一种更接近于视频游戏的集成模拟 。 它的工作原理是每帧获取当前状态，然后根据该时间点的当前属性对其进行修改。

这使它变得可变 ，这意味着我们可以更改那些属性，然后更改模拟结果。

为了说明这一点，让我们对经典指针平滑和弹性平滑进行一下修改。

进口physics ：

const { pointer, spring, physics, styler, value } = popmotion;

这次，我们将更改startTracking函数。 代替使用pointer更改ballXY ，我们将使用physics ：

const startTracking = () => {
  const physicsAnimation = physics({
    from: ballXY.get(),
    to: ballXY.get(),
    velocity: ballXY.getVelocity(),
    restSpeed: false,
    friction: 0.6,
    springStrength: 400
  }).start(ballXY);
};

在这里，我们from和velocity设置为正常。 friction和springStrength均可调整弹簧的特性。

restSpeed: false会覆盖动画在运动停止时停止的默认行为。 我们想在stopTracking手动停止它。

就其本身而言，这个动画不会做任何事情，因为我们设置to ，弹簧的目标，以相同的from 。 因此，让我们重新实现这次跟踪的pointer以更改physics的弹簧目标。 在startTracking的最后一行，添加：

pointerTracker = pointer(ballXY.get()).start((v) => {
  physicsAnimation.setSpringTarget(v);
});

在这里，我们使用与以前类似的pointer动画。 除了这次，我们使用它来更改另一个动画的目标。 为此，我们创建了这种弹性指针跟踪：

结论

基于速度的动画与指针跟踪相结合，可以创建引人入胜且有趣的界面。

spring可以用来创建各种各样的spring-feel，而decay是专门为动量滚动动画量身定制的。 physics不仅在可配置性方面受到限制，而且还为更改进行中的仿真提供了机会，从而开辟了新的交互可能性。

在这个关于Popmotion的介绍性系列的第二部分和最后一部分中，我们将吸收在前两部分中学到的所有内容，并将其与一些轻巧的功能性合成一起使用，以创建可擦除的动画以及可擦除器擦洗！

翻译自: https://code.tutsplus.com/tutorials/introduction-to-popmotion-part-2-pointers-and-physics--cms-30493