Как сделать плавную анимацию по траектории на TweenLite?

Здравствуйте, мне нужно сделать анимацию движения машины. Я пытаюсь сделать её с помощью Greensock.
Всё получилось, машинка едет, но проблема в её скорости. Нужно, чтоб всю дистанцию она двигалась с 1 скоростью.
Вот как выглядит траектория:
aa7a8f3a64354579ab46a92843d149c3.png
Вот как я сделал это:
$('#cargo');
var tl = new TimelineLite();
tl.to(cargo, 0.5, {right:'200px', top: '110px'});
tl.to(cargo, 0.5, {right:'250px', top: '260px', transform: 'rotate(-90deg)'});
tl.to(cargo, 0.5, {right:'140px', top: '510px', transform: 'rotate(-120deg)'});
tl.to(cargo, 0.5, {right:'125px', top: '610px', transform: 'rotate(-120deg)'});
tl.to(cargo, 0.5, {right:'225px', top: '695px', transform: 'rotate(-120deg)'});
tl.to(cargo, 0.5, {right:'425px', top: '685px', transform: 'rotate(-120deg)'});
tl.to(cargo, 0.5, {right:'550px', top: '555px', transform: 'rotate(-120deg)'});

Я разделил траекторию на несколько промежутков и просто двигаю картинку и поворачиваю, но при такой реализации, чтоб скорость была равномерной нужно ОЧЕНЬ четко указать время для каждой дистанции(есть которые, есть длинные). Мне кажется это не реально.
Вопрос: можно как-то записать много шагов и указать им всем общее время выполнения?
В идеале было бы так:
tl.to(cargo, 0.5, {right:'250px', top: '260px', transform: 'rotate(-90deg)'}, {right:'140px', top: '510px', transform: 'rotate(-120deg)'});

Если так сделать нельзя, подскажи как по-другому реализовать данную задачу?
  • Вопрос задан
  • 321 просмотр
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
20 июн. 2019, в 10:25
3500 руб./за проект
20 июн. 2019, в 10:21
5000 руб./за проект
20 июн. 2019, в 10:15
10000 руб./за проект