给定期望的起始速度，计算GSAP缓解的补间持续时间

Question

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

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

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

Answer 1

如果我理解你的问题，这是确实 GSAP的ThrowPropsPlugin是什么。它不仅可以跟踪任何物体的任何属性的瞬时速度，而且可以创建一个以该精确速度开始的补间，然后自然地滑动到停止，你甚至可以告诉它应该停在哪里（或提供范围或捕捉点......很多选项）。

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位置，并且子项仍将正常生成动画。 （这就是你要找的，对吗？）

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