freislot
@freislot
Frontend-разработчик

С помощью чего реализовать подобную анимацию?

e2478527ca7d45a78f376d70b51e9548.png
Задача: анимировать все маленькие обьекты, большой круг по середине неподвижный.
1. Все объекты вращаются вокруг большого круга.
2. Они немного меняют свою позицию +/- 100 пикселей например. Т.е хаотично двигаются в пределах 100 пикселей относительно себя.
3. Все маленькие объекты соединены с большим кругом и при движении линия как-то должна тоже двигаться вместе с объектом.

Быть может такой эффект как-то правильно называется, не могу понять как гуглить.
Интересует любая подсказка, в какую сторону копать, что гуглить, может что-то подобное уже есть, или может движки/фреймворки посмотреть какие-нибудь?

По 2-му пункту нагуглил вот что JSFiddle, но там анимация какая-то дерганая, но смысл такой как мне нужно, квадрат двигается рандомно в пределах 100 на 100px.
Но нужно больше плавности, уменьшение скорости не помогло, т.к видно как анимация проигрывается 1 за 1 и тд.
  • Вопрос задан
  • 338 просмотров
Решения вопроса 1
freislot
@freislot Автор вопроса
Frontend-разработчик
Пока реализовал так codepen.io/freislot/pen/PbMpow
Прорисовку линий от иконок к центру тоже реализовал но закомментировал, дизайнер передумал :)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
riot26
@riot26
<:З )~~
может движки/фреймворки посмотреть какие-нибудь?

paperjs.org
Ответ написан
@lx0
Уверен, такое или подобное уже есть на codepen'e :)
Ответ написан
lightglams
@lightglams
не совсем то
но вдруг поможет

http://vincentgarreau.com/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы