Как реализовать анимацию линии?

Question

[Patris546]

Как реализовать анимацию плавного появления, при наведении, линии от левой точки (сделана тегом img) до правой точки. В идеале, чтобы линия не сразу вся показывалась, а в течение определенного времени набирала длину.

Comments

[Ankhena]

В зависимости от того, чем сделана линия.
Можно анимировать её width или позицию градиентного фона или что-нибудь ещё.
Или svg.

[ksnk]

Проще канвасом, наверное. В теге img нужно хранить точку назначения - якорь в тексте справа. При наведении на это img вычислить координаты откуда и куда вести стрелку и рисовать его. элемент canvas накладывается на картинку (поиграть с z-index?) и имеет в стилях pointer-events: none;
Так можно развесистую логику накрутить - когда показывать, когда убирать...

Нужно только подумать, что будет в мобильном разрешении экрана, когда картинка и текст будут друг над другом.

[Patris546]

ksnk, спасибо. За канвас не шарю, но изучу эту тему

Answer 1

[ksnk]

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

Comments

[ksnk]

Ну, раз отметилось ответом, то вот некоторое развитие скрипта https://ksnk.github.io/h014/index.html
Рисуются линии так, чтобы они шли "горизонтально-вертикально-горизонтально". Если не получается, "вертикально-горизонтально-вертикально", если совсем не получается - по прямой.
При изменении размера экрана отрисовывается отрисованное. Подходящим к месту алгоритмом.
Все также анимированы.