在给定所需起始速度的情况下计算 GSAP 缓和补间持续时间

Question

我有两个 GSAP 补间序列。第二个补间依赖于第一个。第一个补间使用 Power3.easeIn 将元素向右移动。当第一个补间结束时，我会计算元素的瞬时速度，这样我就知道它在补间结束时的移动速度有多快。

然后第二个补间需要使用 Power2.easeOut 将此元素的 child 移动到右侧。此补间应以与前一个补间结束时相同的速度开始。 child 在此补间期间移动的距离是固定的。如何计算第二个补间的持续时间，使其以所需的速度开始？

编辑：Here is a jsbin 展示我正在尝试做的事情。

Answer 1

如果我正确理解您的问题，这就是 完全 GSAP ThrowPropsPlugin 的用途。它不仅可以跟踪任何 object 的任何 属性 的 moment-by-moment 速度，而且它还可以创建一个以该精确速度开始然后自然地滑到停止的补间，你可以甚至告诉它应该在哪里停止（或提供范围或捕捉点......很多选项）。

ThrowPropsPlugin.to() 方法可以为您计算持续时间。您所做的就是输入目标值和最终值（或范围或捕捉点）。

文档位于 http://greensock.com/docs/#/HTML5/GSAP/Plugins/ThrowPropsPlugin/，您也可以在其中找到几个示例。

这是基于您的示例的代码笔演示：https://codepen.io/anon/pen/wGGdmq

ThrowPropsPlugin.to(child, {x:{velocity:ThrowPropsPlugin.getVelocity(parentElement, "x"), end:250}, ease:Power2.easeOut});

请注意，您可以更改第一个补间的持续时间以及 x 位置，并且 child 仍会正确设置动画。 （这就是你要找的，对吧？）

免责声明：ThrowPropsPlugin 是 Club GreenSock 的会员权益，因此它不在 public GSAP 下载中。