Popmotion简介：补间

最新推荐文章于 2024-10-19 11:16:24 发布

cunjie3951

最新推荐文章于 2024-10-19 11:16:24 发布

阅读量962

点赞数

文章标签： java python javascript 大数据 linux ViewUI

本文是Popmotion动画库的入门教程，主要介绍补间和造型器的概念及用法。Popmotion是一个轻量级的JavaScript动画库，支持自定义功能，能方便地对3D对象、图表或React组件进行动画处理。文章详细讲解了补间的安装、补间、造型器的使用，以及如何设置持续时间、缓和和重覆等属性，帮助读者掌握Popmotion的基础知识。

摘要由CSDN通过智能技术生成

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等所有相同的属性来调整其总体播放，并使用我们之前学习的所有相同方法来对其进行控制。