Inertia

gsap.registerPlugin(InertiaPlugin) 

gsap.to(obj, { inertia: { x: 500, y: -300 } });

描述​

InertiaPlugin（以前称为 ThrowPropsPlugin）允许你平滑地将任意属性滑动到停止，既尊重初始速度，又可以对最终值应用可选的限制。你可以定义一个特定的结束值，或者根据初始速度（和缓动）自动选择结束值，也可以定义最大/最小范围，甚至是一个包含多个快照值的数组作为凹槽。你可以让插件“监视”某些属性来跟踪它们的速度，并在进行动画时自动使用这些速度。inertia这非常适合用于快速滚动或模拟抛掷效果（此时动量因素会影响动画）。

例如，假设用户拖动一个球，释放后它应该以相同的速度继续飞行（从而实现无缝过渡），然后逐渐停下来。你不能使用普通的补间动画，因为你无法确切知道它应该停在何处，或者动画应该持续多久（更快的初始速度通常意味着更长的持续时间）。你希望它的减速基于你在补间中定义的缓动方式。

或许你想让最终的静止值始终落在某个范围内，这样球就不会飞出屏幕边缘。但你也不想让它碰到屏幕边缘时突然停下；相反，即使这意味着短暂地超过着陆点再缓动回来（如果初始速度足够大以至于需要这样做），你也希望它能平稳地进入位置。关键是让它看起来自然。smooth.

没问题。

最简单的情况下，你可以像这样只为每个属性传递初始速度：

gsap.to(obj, { inertia: { x: 500, y: -300 } });

在上面的例子中，obj.x将以每秒500像素的速度开始动画，obj.y将以每秒-300像素的速度开始动画。两者都将平滑减速直至停止，而 InertiaPlugin 会为你计算出一个看起来自然的持续时间！

要对最终值施加最大值和最小值边界，请使用带有特殊属性的对象语法，如下所示：max和min特殊属性，像这样：

gsap.to(obj, {
  inertia: {
    x: {
      velocity: 500,
      max: 1024,
      min: 0,
    },
    y: {
      velocity: -300,
      max: 720,
      min: 0,
    },
  },
});

注意对象的嵌套结构（{}）。max和min的值指的是最终静止位置的范围（此处为坐标），有速度。因此在此例中，obj.x总是落在0到1024之间，obj.y总是落在0到720之间。如果你想让目标对象落在特定值而不是某个范围内，只需将max和min设为相同的值，或者只使用end属性。还要注意你必须为每个属性定义一个velocity值（除非你使用的是track()——详情请参见下方）。

配置对象​

属性

描述

• 速度

  [数字 | “auto”]- 初始速度，以单位/秒为单位。你可以省略 velocity，或者对那些通过 track() 方法自动跟踪的属性使用 "auto"。

• min

  数字- 属性的最小结束值。例如，如果你不希望x落在低于0的值上，你的inertia可能像这样：{x: {velocity: -500, min: 0}}.

• max

  数字- 属性的最大结束值。例如，如果你不希望x超过1024，你的inertia可能像这样：{x: {velocity: 500, max: 1024}}.

• end

  [数字 | 数组 | 函数]- 如果end定义为数字时，目标将**精确**落在该值上（就像你把max和min都设为相同值一样）。end定义为数值数组数组时，这些值将被视为“凹槽”或“吸附”值，以便选取离自然落点最近的那个值。例如，若使用[0,100,200]end函数如果 end 被定义为函数，则该函数会被调用，并传入自然落点作为唯一参数，你的函数可以运行任何你想要的逻辑，然后返回应落点的数字。这在例如你有一个旋转动画，并且无论角度大小都希望它吸附到10度的增量上时非常有用，你可以使用一个函数将自然值四舍五入到最接近的10度增量。end: 100, end: [0,100,200,300]，或者end: function(n) { return Math.round(n / 10) * 10; }.

• linkedProps

  字符串- 一个由逗号分隔的属性列表，在传递给基于函数的end值时，这些属性应链接在一起组成一个对象以便共同处理。当你例如拥有一个x和y但你的 end 函数逻辑需要同时处理这两个值（比如坐标吸附）时很有用。参见此演示示例。传递给end函数作为唯一参数的对象将包含linkedProps中列出的属性。例如，如果linkedProps设置为"x,y"，则一个类似{x: 100, y: 140}的对象将作为参数传入函数。这些值是自然的结束值，当然你的函数应返回一个新的相似对象，表示你希望结束值变为哪些值，如return {x: 200, y: 300}.

• resistance

  数字- 每秒的阻力值（可以理解为有多少摩擦力作用）。

InertiaPlugin 不只是用于补间 x 和 y 坐标。它可以应用于任何数值属性，因此你也可以用它来进行物体的旋转rotation动画。或者使用scaleX/scaleY属性。也许用户拖动一个轮子让它转动并放手后，你希望它继续增加rotation以该速度运动，然后平稳减速直到停止。它甚至可以与基于方法的getter/setter一起使用。

自动确定持续时间​

创建一个看起来流畅自然的补间动画最棘手的部分之一inertia（特别是如果你应用了最大值和/或最小值）是确定它的持续时间。通常最好是保持相对一致的阻力水平，这样当初始速度非常快时，物体停下来所需的时间比初始速度较慢时要长。你可能还想对补间动画的最长持续时间做一些限制（如果用户拖动得非常快，你可能不希望补间持续200秒）。持续时间还会影响属性超出最大值/最小值边界多少，因此你可能只想允许一定程度的超调容差。这就是为什么InertiaPlugin会自动为你设置Tween的持续时间，并且你可以选择在inertia对象中硬编码一个持续时间，或者甚至使用max/min值来给它一个范围，例如：duration:{min:0.5, max:3}.

自动跟踪速度​

平滑地从特定速度过渡到另一个速度的另一个棘手方面是首先要跟踪该属性的速度！我们也让这变得更简单——你可以使用InertiaPlugin.track()方法来跟踪某些属性的速度（变化率），然后inertia补间动画将在内部自动获取相应的跟踪值，使你可以省略你的补间中的velocity值。请参阅track()方法的描述以了解详细信息。并确保你在需要进行补间之前至少提前半秒钟开始跟踪速度，因为需要一小段时间来判断某个物体移动有多快。

InertiaPlugin相比大多数其他使用帧循环的解决方案的一个独特便利之处在于，所有内容都是可逆的，并且你可以立即跳转到补间动画的任何位置。所以如果你创建了多个inertia补间动画，例如，把它们放入时间线中，你可以直接调用reverse()在时间线上，观看对象沿原路返回起点！

示例​

下面的示例创建了一个绿色方块和一个红色方块，你可以以一种自然、流畅的方式拖拽和抛掷它们。如果你勾选“吸附到网格”复选框，方块将始终精确地落在网格上。我们使用Draggable类以便我们可以更专注于InertiaPlugin代码而不是制作可拖动对象所需的大量样板代码：

下面的示例演示如何为需要x和y两个值的复杂吸附功能使用自定义end函数，因此使用了linkedProps方法：

尽管InertiaPlugin经常与Draggable一起使用，但Draggable不是必需的，InertiaPlugin也可以独立于Draggable单独使用。以下是一个直接使用Inertia追踪功能的示例：

方法​

示例演示​

Inertia与Draggable搭配非常好——查看Draggable使用指南集合和我们最喜欢的社区灵感演示在 CodePen 上。