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