У меня есть анимация GSAP (Greensock), которая «безразлична», это означает, что когда она воспроизводится по бесконечному циклу, вы не можете определить, какая часть является началом, а какая - концом.
Допустим, у меня есть две метки: одна возле начала (около 10% пути), а другая около конца (около 90% завершено):
| start end |
|----|----|----|----|----|----|----|----|----|
Если я создам tweenTo от «начала» до «конца», он пойдет «в долгий путь», протирая точку воспроизведения вперед с 10% до 90%.
Tween from 'start' to 'end' would go
"long ways" from the left to the right
:==================================>
| start end |
|----|----|----|----|----|----|----|----|----|
Пока все хорошо, это имеет смысл для меня.
Но что, если я не хочу, чтобы это случилось? Так как моя анимация кажется бесполезной, технически анимация может начинаться с 10% и идти назад , пока не достигнет начала, затем переходит к концу анимации и продолжается в обратном направлении, пока не достигнет метки «конец». на 90%.
But what if I wanted to go "backwards" from
'start' and loop around to 'end'?
/====: <====/
| start end |
|----|----|----|----|----|----|----|----|----|
Это был бы «короткий путь» между этими двумя метками.
У меня вопрос, как бы мне создать такой эффект?
То есть, если у меня есть две метки, можно ли анимировать между ними, когда моя анимация «оборачивается» по временной шкале, вместо того, чтобы оставаться внутри временной шкалы?
См. Следующий код для примера этого - https://codepen.io/romellem/pen/yQOQar?editors=0010
Внутри этой кодовой ручки слева находится проблема, с которой я сталкиваюсь, а справа - фальшивый "пример, который показывает, что я хочу сделать, чтобы анимация слева делалась при анимации" вокруг "моих двух меток.