当前位置: 首页 > 工具软件 > Popmotion > 使用案例 >

Popmotion简介:补间

马凡
2023-12-01

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毫秒的持续时间内在01之间设置动画。 如果打开控制台,则可以自己进行测试:

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道具,从而允许道具的独立动画,例如scaletranslateX
  • 统一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可以在任何两个状态之间。 我们使用fromto定义它们。

让我们通过将'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'));

缓和

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

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

缓动函数只是通过获取补间的进度(定义为01之间的数字)并返回一个新的补间而起作用。

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

导入它们:

const { easing, tween, styler } = popmotion;

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

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

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

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

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

重覆

动画可以三种不同的方式重复: loopyoyoflip

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

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

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

回放

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

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

在上面的示例中, controls将可以访问所有这些播放方法 ,例如stoppauseresume

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数组,我们可以用01之间的数字标记这些状态中的每个状态。 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 ,所以我们可以使用easeloop等所有相同的属性来调整其总体播放,并使用我们之前学习的所有相同方法来对其进行控制。

结论

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

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

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

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

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

 类似资料: