Popmotion简介：Tween

Popmotion是一个功能性的javascript 动画库。与 GreenSock 或 Anime.js 等其他库相比，Popmotion 是低级的且没有意见的。

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

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

这也意味着动画 3D 对象、图表或反应组件就像动画dom或svg元素一样容易。

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

安装

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

但是，对于本教程，您可以使用已使用最新版本的 Popmotion 设置的 CodePen 。

吐温

对于那些不熟悉的人，一个数字和另一个数字之间的补间过渡会在预定的时间长度内。如果您使用过css过渡，Popmotion 的 tween功能完全相同。

我们可以 tween像这样导入：

const { tween } = popmotion;

默认情况下，动画 tween持续时间为毫秒。如果你打开你的控制台，你可以自己测试一下：01300

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 变换坐标模型。
了解默认值类型，因此您可以设置 translateX（例如）而不附加 'px'.

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

所以让我们导入它：

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属性为球设置了动画。让我们来看看 a 的用途有多大 tween。

补间道具

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

`from`/`to`

A tween可以介于任意两个状态之间。from我们用和定义这些 to。

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

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

您的球现在从左向右移动 300 像素。

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

尝试这个：

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

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

期间

duration以毫秒为单位定义。默认情况下，补间需要 300 毫秒，但如果我们设置 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.anticipate，它在制作动画之前会进行有趣的拖拽。

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

尝试将其中一些应用到您的动画中，同时 duration查看它如何影响它的感觉和特征。

重复

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

循环从头开始动画。 Yoyo通过向后运行来镜像补间。并且翻转向后运行并翻转缓动功能。

每个补间可以设置其中一个，每个都设置为一个数字，表示重复动画的次数。要永远重复，只需传递 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之间的数字标记这些状态中的每一个。代表动画的开始，代表结束：0101

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只是 a ，所以我们可以使用和 tween等所有相同的属性来调整它的整体播放，并使用我们之前学习的所有相同方法来控制它。easeloop