Объясните мне, как вот такой блок можно заанимировать?
Суть анимации такая:
- пользователь наводит курсор на блок (2)
- от основного блока (1) начинает анимироваться линия до блока (2)
- такая же анимация действует на другие элементы
В макете структура компонентов вот этого блока плоская. Нужно ли дизайнеру дорабатывать макет, чтобы такую анимацию сделать? И на чем такое лучше сделать?
Из "сделать рукками" я знаю два варианта - svg и canvas. Сделать не сложно, по факту анимировать два прямых отрезка, которые будут вычисляться динамически. Наверняка есть сторонние библиотеки, но я не подскажу - использовать что-то типа three.js для такого случая будет перебором.
Этот блок откуда изначально взялся? Это просто проект в тильде? (Или где это нарисовано ?)
Как он будет отображатся на сайте - единая картинка, в которой нужно еще разбираться кто куда какой линией ведет, или набор спозиционированных элементов, про которых все и так понятно ?
Очевидно, что у дизайнера неплохо бы поинтересоваться - что он понимает под словом "анимировано", пусть пример нарисует. В зависимости от его видения , возможно , ему придется дополнительным слоем рисовать анимированные линии.
Простой
Простой
