0

Здраствуйте всем! Искал решение проблемы, но конкретного ответа не нашёл. Везде по кускам собирал информацию и ничего не склеилось.

В общем, вопрос следующий: есть в макете Figma картинка ракеты с нарисованной пунктирной траекторией. Её нужно анимировать так, чтобы img картинка ракеты двигалась по заданной траектории и оставляла за собой пунктирную линию введите сюда описание изображения

2
  • на css самое простое что приходит в голову, куча блоков разбросаных по всему макету, с border-radius: 100500px; border: 3px orange dashed; (или доттер... вечно путаю типы линий бордеров...) изначально все блоки display: none по мере движения ракеты включать блоки. но лучше таки глянь в сторону svg или хотя бы canvas, на css кривые рисовать тот еще геморрой.
    – puffleeck
    28 сен 2022 в 21:49
  • чудоковатый человек но посмотрите как он делает эту анимашку: youtu.be/fR0tHI0nFYk 29 сен 2022 в 3:18

1 ответ 1

0

Делать как написал puffleeck точно не надо. Следует анимацию ракеты сделать при помощи библиотеки gsap, как советовал Monkey Mutant. Пунктирный появляющийся путь делается следующим образом: добавляем две картинки SVG, одну линию пунктирную как на вашей картинки, другую точно такую же, но сплошную и белую. Далее помещаем их обе в HTML, но белую поверх пунктирной. Потом по принципу, который описан в ссылке ниже
https://css-tricks.com/svg-line-animation-works
анимируем белую, полностью убирая её. Получается так, что изначально она закрывает пунктирную, но затем она "уменьшается", показывая пунктирную. Это создаёт видимость того, будто пунктирная появляется сама.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.