Как остановить элемент в определённых точках координат SVG?

Question

[Конан Варвар]

Коллеги, всем привет.
Столкнулся с очень интересной задачей, но в одиночку мне не справиться.
И так задача:
Есть SVG внутри которого есть линия, по которой должен двигаться элемент. Движение элемента по траектории сделал(точнее нагуглил), но теперь стоит задача в том, чтобы в определенных точках на линии делать остановку элемента на несколько секунд (таких точек может быть несколько). Заранее всем спасибо.

Answer 1

[0xD34F]

Делаем массив объектов - точки остановки и длительность. На каждом шаге проверяем, есть ли в массиве элемент с текущей координатой и если да - добавляем к дефолтному таймауту длительность из найденного элемента. Типа так.

UPD. Вынесено из комментариев:

а как добавить классы к движущемуся объекту в местах остановки?

Добавляем элементам массива остановок ещё одно свойство - имя класса. При остановке делаем classList.add, после окончания остановки classList.remove (если надо) - ничего сложного.

Comments

[Конан Варвар]

Это божественно, скажите пожалуйста, а как добавить классы к движущемуся объекту в местах остановки? В идеале каждой точке остановки отдельный.

[0xD34F]

Конан Варвар, дополнил ответ.

[Максим]

0xD34F, там же есть в input цифры ? анимация закончилась а счётчик тикает ...

[0xD34F]

Максим Ленский, как и в исходном примере. Может, так и должно быть - в тексте вопроса об этом нет ни слова.

[Максим]

0xD34F, аа....понял ....мне тоже познавательно это ..спс

[Конан Варвар]

0xD34F, Максим Ленский, всем спасибо, по поводу "анимация закончилась а счётчик тикает", поправлю, еще все в процессе :)