给定所需的起始速度，计算 GSAP 缓和补间持续时间答案

【问题标题】：Calculate GSAP eased tween duration given desired starting velocity给定所需的起始速度，计算 GSAP 缓和补间持续时间
【发布时间】：2016-06-23 07:35:10
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

如果我正确理解了您的问题，这就是完全 GSAP 的ThrowPropsPlugin 的用途。它不仅可以跟踪任何对象的任何属性的每时每刻的速度，而且可以创建一个以该精确速度开始然后自然滑行到停止的补间，您甚至可以告诉它应该停止的位置（或提供范围或捕捉点......很多选项）。

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

这是基于您的示例的 codepen 演示：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 下载中。

【讨论】：