Popmotion简介：补间

Popmotion是功能性JavaScript动画库。 与诸如GreenSock或Anime.js之类的其他库相比，Popmotion是低级且不受限制的。

它将大量功能（如弹簧物理特性和指针跟踪）打包到一个非常小的文件大小（11.5kb）中。

它允许开发人员使用简单的函数编写自己的功能，而不必等待库作者添加它们。

这也意味着对3D对象，图表或React组件进行动画处理就像对DOM或SVG元素进行动画处理一样容易。

这种灵活性可以使初始学习曲线比其他库更陡峭。 因此，在本教程系列中，我们将学习Popmotion强大的动画的基础知识。 我们将从动画世界的主力， 补间开始 。

安装

Popmotion支持多种安装方法 。 在生产中，我建议通过npm安装，因为这允许您仅导入所需的位，从而进一步节省空间。

但是，对于本教程，您可以遵循此CodePen ，它是由最新版本的Popmotion设置的。

补间

对于那些不熟悉的人， 补间将在预定的时间长度内在一个数字和另一个数字之间转换。 如果您使用了CSS过渡，则Popmotion的tween功能的工作原理完全相同。

我们可以像这样导入tween ：

const { tween } = popmotion;

默认情况下， tween动画在300毫秒的持续时间内在0到1之间设置动画。 如果打开控制台，则可以自己进行测试：

tween().start({
  update: v => console.log(v),
  complete: () => console.log('complete!')
});

但是我们不想为控制台动画，我们想为球动画。 为此，Popmotion包含另一个函数styler 。

注意：在第一个示例中，我们定义了 update   和complete功能。 但是，如果您仅提供一个start功能，它将自动将其分配给update 。

造型器

styler用于创建针对HTML和SVG样式而优化的动画的get / set接口（可从任何库使用！）。

在上面的示例中， tween输出一个数字，因此我们当然可以这样设置球的不透明度（尝试一下）：

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

tween().start(v => ball.style.opacity = v);

但是， styler具有以下优点：

• 批量渲染以防止布局抖动。
• 每帧最多渲染一次。
• 允许单独设置transform道具，从而允许道具的独立动画，例如scale和translateX 。
• 统一CSS和SVG变换坐标模型 。
• 理解默认值类型，因此您可以在不附加'px'情况下设置translateX （例如）。

您也不仅限于在动画中使用它。 您可以在设置其他元素的动画时手动设置其样式，更改将自动安排并与其他元素一起批量处理。

因此，让我们导入它：

const { tween, styler } = popmotion;

创建球形造型器：

const ballStyler = styler(ball);

现在，我们可以使用ballStyler设置和设置球的任何属性。 ballStyler.set是灵活的。 它可以设置一个属性：

ballStyler.set('background', '#f00');

或多个属性：

ballStyler.set({
  x: 100,
  y: 100
});

我们现在想为opacity设置动画，所以让我们更改动画：

tween().start(v => ballStyler.set('opacity', v));

set也可以咖喱 。 通过仅提供一个属性名称，它将为该道具返回一个setter函数。 因此，我们可以通过编写以下内容来整理上面的内容：

tween().start(ballStyler.set('opacity'));

到目前为止，我们仅使用默认的tween属性为球设置tween动画。 让我们看一下tween通用性。

补间道具

tween接受一个可选参数，补间属性的对象。 让我们看一些更常用的道具：

from / to

tween可以在任何两个状态之间。 我们使用from和to定义它们。

让我们通过将'opacity'重写为'x'来制作translateX的动画。 然后， from和传递to道具：

tween({ from: 0, to: 300 })

现在，您的球从左向右移动了300px。

但是，我说过tween可以介于两个状态之间，而不仅仅是数字之间。 如果我们提供from ，并to数字和/或颜色的对象，我们可以一次动画多个属性。

试试这个：

tween({
  from: { x: 0, background: '#198FE3' },
  to: { x: 300, background: '#FF1C68' }
}).start(ballStyler.set);

这是同时为多个道具设置动画的简便方法。

持续时间

duration以毫秒为单位。 默认情况下，补间将花费300ms，但是如果我们将duration设置为1000 ，则将花费一秒钟：

tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

缓和

缓动功能用于补间中以更改整个动画的移动速率。

在现实生活中，物体不会以其目标速度启动或停止。 根据对象的不同，它们会逐渐加速或逐渐减速，或两者兼而有之。

缓动函数只是通过获取补间的进度（定义为0到1之间的数字）并返回一个新的补间而起作用。

您不需要知道如何实现这些功能，因为Popmotion为您提供了很多功能。

导入它们：

const { easing, tween, styler } = popmotion;

默认情况下， ease设置为easing.easeOut 。 当一个函数缓和时，意味着它开始快而结束慢 。

之所以选择该选项为默认选项，是因为我认为用户界面中的大多数动画都应由于用户的动作而启动 。 通过快速开始和缓慢结束，用户将感觉好像他们通过点击或点击将能量直接传递给界面一样。 感觉活泼，活跃和反应灵敏。

对于许多远离用户输入或自己输入的动画，使用easing.easeInOut的动画（例如easing.easeInOut或easing.anticipate在制作动画之前会进行有趣的拖拉操作，会感觉不那么刺耳。

最后，还有easing.cubicBezier函数，该函数基于缓动曲线创建了一个新的缓动函数，就像CSS过渡一样。 这为您的运动提供了高度的控制和灵活性。

尝试运用其中的一些，以动画，同时具有玩耍duration ，看看它是如何影响感觉和它的性质。

重覆

动画可以三种不同的方式重复： loop ， yoyo和flip 。

循环从头开始动画。 悠悠球通过向后运行补间来反映补间。 和翻转运行它向后   翻转缓动功能。

可以在补间中设置其中之一，每个都设置为一个数字，该数字表示重复动画的次数。 要永远重复，只需传递Infinity ：

tween({
  yoyo: Infinity,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

回放

启动补间时，它将返回可用来控制该动画的播放控件。

const controls = tween().start(console.log);

在上面的示例中， controls将可以访问所有这些播放方法 ，例如stop ， pause和resume ：

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

setTimeout(() => controls.stop(), 500);

我们可以使用这些播放控件pause ，然后seek通过吐温：

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();
controls.seek(0.5);

这样，我们可以创建可擦除的动画！ 在后面的教程中，我们将探索如何使用Popmotion的pointer函数创建清理条，但是现在您可以清理一个tween和第二个补间，以查看实际效果：

const controls = tween({
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();

tween({ duration: 1000 })
  .start(controls.seek);

关键帧

对于简单的从a到b的过渡， tween非常好。 对于更复杂的补间序列，Popmotion提供了另一个称为keyframes功能。

让我们现在将其导入：

const { keyframes, easing, tween, styler } = popmotion;

通过一个keyframes补间 状态的线性级数 。 我们将以下状态提供给其values属性：

keyframes({
  values: [0, -150, 150, 0],
  duration: 2000
}).start(ballStyler.set('x'));

像tween一样，我们也可以将这些状态定义为对象。 因此，为了将球移动成正方形，我们可以这样写：

keyframes({
  values: [
    { x: 0, y: 0 },
    { x: -150, y: -150 },
    { x: -150, y: 150 },
    { x: 150, y: 150 },
    { x: 150, y: -150 },
    { x: 0, y: 0 }
  ],
  duration: 2000
}).start(ballStyler.set);

默认情况下， keyframes将为这些补间中的每个补间分配总duration的相等份额。

通过提供一个times数组，我们可以用0到1之间的数字标记这些状态中的每个状态。 0代表动画的开始，而1代表结束：

keyframes({
  values: [0, -150, 150, 0],
  times: [0, 0.1, 0.9, 1],
  duration: 2000
}).start(ballStyler.set('x'));

这样，我们可以调整动画的长度，而不必注释每个单独的片段。

它还允许通过easings属性为每个动画提供单独的缓动：

keyframes({
  values: [0, -150, 150, 0],
  times: [0, 0.1, 0.9, 1],
  easings: [easing.easeIn, easing.linear, easing.easeOut],
  duration: 2000
}).start(ballStyler.set('x'));

因为keyframes只是一个tween ，所以我们可以使用ease和loop等所有相同的属性来调整其总体播放，并使用我们之前学习的所有相同方法来对其进行控制。

结论

tween和keyframes功能可让您创建简单和复杂的动画。

styler具有自身的优点，例如在动画之外使用，CSS和SVG转换模型的标准化以及渲染批处理以提高动画性能。

在本教程中，我们仅介绍了Popmotion提供的几个动画。 在下一部分中，我们将探索指针跟踪和基于速度的动画，例如physics和spring 。

基于速度的动画可用于创建对用户输入具有真实反应的自然UI。 到时候那里见！

翻译自: https://code.tutsplus.com/tutorials/introduction-to-popmotion-part-1-tween--cms-30431