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动画。