Рассчитайте продолжительность продолжительности анимации GSAP с заданной начальной скоростью

Question

У меня есть последовательность из двух GSAP твинов. Вторая анимация зависит от первого. Первый движок перемещает элемент вправо, используя Power3.easeIn. Когда эта первая анимация заканчивается, я вычисляю мгновенную скорость элемента, поэтому я знаю, как быстро он двигался прямо в конце анимации.

Вторая анимация затем должна переместить дочерний элемент этого элемента вправо, используя Power2.easeOut. Эта анимация должна начинаться с той же скорости, с которой закончилась предыдущая анимация. Исправлено расстояние, которое ребенок перемещает во время этой анимации. Как я могу рассчитать продолжительность второй анимации так, чтобы она начиналась с желаемой скорости?

EDIT: Here is a jsbin, демонстрирующий, что я пытаюсь сделать.

Answer 1

Если я правильно понял ваш вопрос, это ТОЧНО, что для 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}); 

Примечание Вы можете изменить длительность первой анимации, а также х положение, и ребенок все равно будет анимировать правильно. (Это то, что вы искали, правда?)

Отказ от ответственности: ThrowPropsPlugin является преимуществом членства Club GreenSock, так что он не находится в общедоступных загрузках GSAP.