@wakenbyWork

Как лучше всего сделать данную анимацю?

Вот дизайн svg:

615195cf7264c647253455.png

Нужно чтобы кружки плавно двигались в центр.

Сейчас пришел к тому что с помощью видео будет самое лучшее решение. Ибо не понимаю как на css такое сделать. Не подскажите примеры такой реализации? Ну или совет нужен как сделать лучше))
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
svg

В SVG есть тег animateMotion, чтобы как раз двигать элементы SVG вдоль какого-то path, в вашем случае этих пунктиров. Все более-менее популярные библиотеки для анимаций имеют такую же функциональность, но без необходимости лезть в SMIL. Например вот.

на css такое сделать

Поскольку пути простые, все под 90 градусов - можно и на CSS сделать все это:


Если сравнивать варианты CSS vs SVG, то у SVG преимущество по скорости разработки, т.к. картинка уже есть, накопипастить анимаций ничего не стоит. С CSS нужно верстать и расставлять всю картинку абсолютным позиционированием. Это время. Но у CSS есть преимущество в виде адаптивности, т.к. мы можем в зависимости от размера экрана легко менять какие-то вещи, переставлять их, и нет проблемы толщины линий, которые в SVG будут так или иначе завязаны на размер SVG и могут стать слишком толстыми или тонкими (вплоть до пропадания) на разных экранах, а в CSS их можно привязать к пикселям. По производительности что то, что это, будет плюс-минус одинаково, не прям супер (много элементов анимируются одновременно), но и явно тормозить нигде не должно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@strelok011
Можно тут посмотреть. Видео - не наш выбор
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы