Как убрать вибрацию, при JavaScript анимации?

Question

[Сергей Сунцев]

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

codepen.io/Greyewi/pen/ORgWOE

Answer 1

[Александр Аксентьев]

всё идёт гладко достаточно.

Может фпс проседает у вас?
Удаляйте элементы после отработки, чтобы не держать в памяти.

Поставьте FPS счетчик какой-нибудь, не знаю есть ли такие для html страницы обычной.

Comments

[Ильдар Гизетдинов]

Поддерживаю, все идёт очень даже гладко, возможно у вас слабенький пк, или память забивается, как написано выше

[Сергей Сунцев]

Обновил codepen, сделал функцию удаления, но вибрация элементов все равно продолжатся...

[Сергей Сунцев]

Ильдар Гизетдинов: Нет дело не в компьютере, удаление я сделал, и проверил на 3х разных машинах, "дребезжание" элементов все равно остается

[Ильдар Гизетдинов]

Сергей Сунцев: попробуйте в качестве альтернативы сделать анимацию через css (transition). Возможно это баги браузеров, ничего конкретного не могу сказать

[Сергей Сунцев]

Ильдар Гизетдинов: Пробовал, не пмогло... спасибо, буду дальше решать проблему)

Answer 2

[Vitaliy]

1. Не setTimeout, а requestAnimationFrame
2. Delta time

Comments

[Сергей Сунцев]

поменял на requestAnimationFrame, а что с Delta time делать?

[Vitaliy]

Сергей Сунцев: необходимо при каждом кадре записывать время, и по нему вычислять величину перемещения объектов. Например, если на некий кадр почему то потратилось больше времени, чем за все остальные, тогда это нужно компенсировать дальностью перемещения

Answer 3

[Max Pushkarev]

Думаю, более правильно анимацию делать не на setTimeout, а на requestAnimationFrame

Comments

[Сергей Сунцев]

поменял в codepen на requestAnimationFrame, но вибрация все равно остается, особенно через секунд 10