洗涤标志下载_Popmotion简介：自定义动画洗涤器

洗涤标志下载

在Popmotion入门系列的第一部分中，我们学习了如何使用基于时间的动画，例如tween和keyframes 。 我们还学习了如何使用Performance styler在DOM上使用这些动画。

在第二部分中，我们学习了如何使用pointer跟踪和记录velocity 。 然后，我们使用它来驱动基于速度的动画spring ， decay和physics 。

在最后一部分中，我们将创建一个scrubber小部件，并将使用它来清理keyframes动画。 我们将通过指针跟踪以及spring和decay的组合来制作小部件本身，以使其比普通的洗涤器更具内在的感觉。

自己尝试：

入门

标记

首先， 将此CodePen派生为HTML模板。 和以前一样，因为这是一个中级教程，所以我不会涉及所有内容。

需要注意的主要变化是洗涤塔上的手柄由两个div元素组成： .handle和.handle-hit-area 。

.handle是洗涤器手柄位置的圆形蓝色视觉指示器。 我们将其包装在一个不可见的点击区域元素中，以使触摸屏用户更容易抓取该元素。

导入功能

在JS面板的顶部，导入我们将在本教程中使用的所有内容：

const { easing, keyframes, pointer, decay, spring, styler, transform, listen, value } = popmotion;
const { pipe, clamp, conditional, linearSpring, interpolate } = transform;

选择元素

在本教程中，我们将需要三个元素。 我们将为.box设置动画，拖动并为.handle-hit-area设置动画，然后测量.range 。

让我们还为要设置动画的元素创建styler ：

const box = document.querySelector('.box');
const boxStyler = styler(box);

const handle = document.querySelector('.handle-hit-area');
const handleStyler = styler(handle);

const range = document.querySelector('.range');

关键帧动画

对于我们的可擦除动画，我们将使用keyframes使.box从左向右移动。 但是，我们可以使用本教程稍后概述的相同方法轻松地淡化tween动画或timeline动画。

const boxAnimation = keyframes({
  values: [0, -150, 150, 0],
  easings: [easing.backOut, easing.backOut, easing.easeOut],
  duration: 2000
}).start(boxStyler.set('x'));

现在将播放动画。 但是我们不要那个！ 让我们暂时将其暂停：

boxAnimation.pause();

拖动x轴

现在该使用pointer拖动洗涤器手柄了。 在上一教程中，我们同时使用x和y属性，但使用洗涤器时，我们只需要x 。

我们更喜欢保持代码的可重用性，并且跟踪单个pointer轴是相当普遍的用例。 因此，让我们创建一个新的函数，想象中的是pointerX 。

它会像pointer一样工作，除了它将仅使用一个数字作为其参数并仅输出一个数字（ x ）：

const pointerX = (x) => pointer({ x }).pipe(xy => xy.x);

在这里，您可以看到我们正在使用一种称为pipe的pointer方法。 到目前为止，我们在所有Popmotion动作（包括keyframes上都可以使用pipe 。

pipe接受多种功能。 start操作后，所有输出将依次轮流通过这些函数中的每一个，然后才提供用于start的update函数。

在这种情况下，我们的功能很简单：

xy => xy.x

它所做的只是获取通常由pointer输出的{ x, y }对象并仅返回x轴。

事件监听器

在开始使用新的pointerX函数进行跟踪之前，我们需要知道用户是否已开始按下手柄。

在上一教程中，我们使用了传统的addEventListener函数。 这次，我们将使用另一个名为listen Popmotion函数。 listen还提供了pipe方法以及对所有操作方法的访问，但是我们在这里不打算使用它。

listen允许我们使用单个函数将事件侦听器添加到多个事件，类似于jQuery。 因此，我们可以将前面的四个事件侦听器压缩为两个：

listen(handle, 'mousedown touchstart').start(startDrag);
listen(document, 'mouseup touchend').start(stopDrag);

移动手柄

稍后我们将需要手柄的x velocity ，因此让它成为一个value ，正如我们在上一教程中所学的那样，它可以查询速度。 在定义handleStyler之后的handleStyler ，添加：

const handleX = value(0, handleStyler.set('x'));

现在，我们可以添加startDrag和stopDrag函数：

const startDrag = () => pointerX(handleX.get())
  .start(handleX);
  
const stopDrag = () => handleX.stop();

现在，可以将手柄擦洗到滑块的边界之外，但是稍后我们将再次讨论。

擦洗

现在我们有了一个视觉上可以正常工作的清理器，但是我们并没有清理实际的动画。

每个value都有一个subscribe方法。 这使我们可以在value更改时附加多个订户来触发。 每当handleX更新时，我们都希望查找keyframes动画。

首先，测量滑块。 在我们定义range之后的那一行，添加：

const rangeWidth = range.getBoundingClientRect().width;

keyframes.seek接受从0到1表示的进度值，而我们的handleX设置为从0到rangeWidth像素值。

通过将当前像素测量值除以rangeWidth我们可以将像素测量值转换为0到1范围。 在boxAnimation.pause()之后的行上，添加以下订阅方法：

handleX.subscribe(v => boxAnimation.seek(v / rangeWidth));

现在，如果您使用滑块，则动画将成功擦除！

额外里程

Spring边界

洗涤器仍然可以拉出整个范围的边界。 为了解决这个问题，我们可以简单地使用clamp函数来确保我们不会输出超出0, rangeWidth值。

取而代之的是，我们将执行额外的步骤并将弹簧附加到滑块的末端。 当用户将手柄拉到允许范围之外时，它将向后拉动。 如果用户在范围之外释放手柄，我们可以使用spring动画将其捕捉回去。

我们将使此过程成为可提供给pointerX pipe方法的单个函数。 通过创建一个可重用的函数，我们可以将这段代码与任何Popmotion动画一起使用，并具有可配置的范围和弹性强度。

首先，让我们在最左侧的极限处施加弹簧。 我们将使用两个转换器 ，即conditional 转换器和linearSpring 。

const springRange = (min, max, strength) => conditional(
  v => v < min,
  linearSpring(strength, min)
);

conditional有两个功能，一个断言和一个转换器。 断言接收提供的值并返回true或false 。 如果返回true ，将向第二个函数提供要转换和返回的值。

在这种情况下，断言是说：“如果提供的值小于min ，则将该值通过linearSpring变压器传递。” linearSpring是一个简单的弹簧函数，与physics或spring动画不同，它没有时间概念。 给它提供一个strength和一个target ，它将创建一个函数，该函数以定义的强度向目标“吸引”任何给定值。

将我们的startDrag函数替换为：

const startDrag = () => pointerX(handleX.get())
  .pipe(springRange(0, rangeWidth, 0.1))
  .start(handleX);

现在，我们通过springRange函数传递指针的x偏移量，因此，如果将手柄拖动到最左侧，您会注意到它向后拖拉。

将其应用于最右侧是使用独立pipe功能将第二个conditional与第一个conditional组成的问题：

const springRange = (min, max, strength) => pipe(
  conditional(
    v => v < min,
    linearSpring(strength, min)
  ),
  conditional(
    v => v > max,
    linearSpring(strength, max)
  )
);

编写像springRange这样的函数的另一个好处是它变得非常容易测试。 像所有转换器一样，它返回的函数是一个采用单个值的纯函数。 您可以测试此函数，以查看它是否通过了不超过min和max ，以及是否对不存在的值应用了弹簧。

如果在范围之外放开手柄，它现在应该弹回范围内。 为此，我们需要调整stopDrag函数以触发spring动画：

const stopDrag = () => {
  const x = handleX.get();
  (x < 0 || x > rangeWidth)
    ? snapHandleToEnd(x)
    : handleX.stop();
};

我们的snapHandleToEnd函数如下所示：

const snapHandleToEnd = (x) => spring({
  from: x,
  velocity: handleX.getVelocity(),
  to: x < 0 ? 0 : rangeWidth,
  damping: 30,
  stiffness: 5000
}).start(handleX);

您可以看到， to设置为0或rangeWidth具体取决于手柄当前位于滑块的哪一侧。 通过发挥damping和stiffness ，您可以发挥一系列不同的弹簧感。

动量滚动

我一直很欣赏iOS洗涤器的一个很好的感觉是，如果您松开手柄，它会逐渐变慢而不是停滞不前。 我们可以使用decay动画轻松地复制它。

在stopDrag ，用momentumScroll(x) handleX.stop() momentumScroll(x)替换handleX.stop() momentumScroll(x) 。

然后，在snapHandleToEnd函数之后的snapHandleToEnd ，添加一个称为momentumScroll snapHandleToEnd的新函数：

const momentumScroll = (x) => decay({
  from: x,
  velocity: handleX.getVelocity()
}).start(handleX);

现在，如果您扔掉手柄，它将逐渐停止。 它还将在滑块范围之外进行动画处理。 我们可以通过将clamp变压器传递给decay.pipe方法来停止此操作：

const momentumScroll = (x) => decay({
  from: x,
  velocity: handleX.getVelocity()
}).pipe(clamp(0, rangeWidth))
  .start(handleX);

结论

通过组合使用不同的Popmotion功能，我们可以创建一个比平时更具生命力和趣味性的洗涤器。

通过使用pipe ，我们可以将简单的纯函数组合为更复杂的行为，同时使复合块可测试和可重用。

如何应对这些挑战：

翻译自: https://code.tutsplus.com/tutorials/introduction-to-popmotion-part-3-custom-animation-scrubber--cms-30560

洗涤标志下载