Как сделать анимацию на JS без использования jQuery и setInterval?

Question

[andymitrich]

Привет, что-то давно не писал на js :)

Надо сделать анимацию пошагового передвижения - то есть, перс делает шаг влево, вверх и так далее. Движение происходит на постоянное коливество px. Анимация происходит без нажатия кнопок, то есть, один раз жмем кнопку "Запуск", а дальше смотрим как перс движется. Как сделать, без использования jQuery и setInterval?

Comments

[Владимир Кашутин]

Такую простую задачу можно и на css сделать
popel-studio.com/blog/article/vozmozhnosti_css-ani...

Answer 1

[Ди Ма]

Маршрут перса - это массив вида: ['5x', '3y', '-1x', '6y']
где цифра - это "расстояние", а буква - направление.
Формат не важен. Можно например и так: [[0, 3], [6, 0], ...]
где первый элемент смещение по Икс, второй по Игрек.

Пусть шаг будет 10px.
5x - это пять раз, с определенным промежутком времени, прибавить к координате икс величину шага. Перс сделает 5 перебежек по 10px
Поочередно выполняем анимацию по каждому элементу массива.

Промежутки времени можно задавать через setInterval или setTimeout.