javascript-给定所需的起始速度,计算GSAP缓动补间持续时间
作者：互联网
我有两个GSAP补间的序列.第二个补间依赖于第一个.第一个补间使用Power3.easeIn将元素向右移动.当第一个补间结束时,我计算了元素的瞬时速度,因此我知道它在补间结束时移动的速度有多快.
然后,第二个补间需要使用Power2.easeOut向右移动此元素的子级.此补间应以与上一个补间结束的速度相同的速度开始.孩子在此补间期间移动的距离是固定的.如何计算第二个补间的持续时间,使其以所需的速度开始？
编辑：Here is a jsbin演示我正在尝试做.
解决方法:
如果我能正确理解您的问题,那么这正是GSAP ThrowPropsPlugin的目的.它不仅可以跟踪任何物体的任何属性的瞬时速度,而且还可以创建一个以该精确速度开始的补间,然后自然滑动到停止点,甚至可以告诉它应该在哪里停止(或提供范围或捕捉点…很多选项).
ThrowPropsPlugin.to()方法具有为您确定持续时间的魔力.您要做的就是输入目标值和最终值(或范围或捕捉点).
该文档位于http://greensock.com/docs/#/HTML5/GSAP/Plugins/ThrowPropsPlugin/,您还将在其中找到几个示例.
这是一个基于您的示例的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下载中.
标签：tween,gsap,easing,javascript 来源： https://codeday.me/bug/20191118/2032224.html