Как с помощью js сделать анимацию движения объектов в рандомном направлении?

Question

[stetxems]

Есть вот такие элементы на странице.

Скрин

Нужно что б они двинались в рандомном направлении где-то в пределах фиксированой ширины +-
Нашел вот такой пример https://codepen.io/monsmado/details/bGEdaLB
Но там две огромные библиотеки.Хотелось бы без них обойтись, есть ли у кого то идеи, как лучше сделать.Максимум использовать небольшую одну библиотеку

Comments

[Rerurk]

А что мешает сделать position : absolute и начинать их двигать по x и y рандомно в пределах допустимых значений? Линейная геометрия y=k*x+c не или по по формуле окружности или квадратичная функция

[stetxems]

Rerurk, через css,Они и так Absolute.Но я думал с помощью JS сделать.Чтоб это выглядело как то красиво.Хотя б пример,а то пока не сильно понимаю как правильно сделать , что б работало нормально через js

[Rerurk]

stetxems, блин, вы хотите что бы за вас это кто то сделал? Ну это через магазин только же

[stetxems]

Rerurk, я сюда пришел за помощью а не решением.Спасибо за помощь!

[Rerurk]

stetxems, так я не понял, чем вам мой алгоритм не угодил то?

[twobomb]

Чё ты паришься, пропиши конкретные пути используя CSS, будто бы кто-то там будет запоминать как оно двигалось. Проще и производительнее

Answer 1

[Сергей Соколов]

Может, такой вариант подойдёт: https://qna.habr.com/answer?answer_id=1077800#answ...
Демо

Для каждого объекта выбирать случайную точку внутри допустимой области. С каждым кадром к ней приближается 2-я точка. Ко 2-й так же стремится 3-я, и т.д - цепочка из, к примеру, 5 точек. Объект последний, в хвосте. Такая цепочка делает движение плавным, хотя цель выбирается случайно. Когда приближается ближе, чем X, выбирается новое случайное положение для 1-й точки.

p.s. вообще особенности анимации должен был подробно описать дизайнер.

Comments

[stetxems]

Он не ставил каких то конкретных задач.Сказал хочет видеть что-то похожее.То что я скинул в примере.Но я не хочу реализововать с помощью библиотек.Буду пробовать ваш вариант)