@Galdar
Web, JS, PHP, NGINX, Linux

Как сделать анимацию плавающих объектов по экрану?

Стало интересно как можно сделать мелки (10Х10px) анимированные картинки, которые плавали бы в блоке, ударялись об его край и меняли траекторию в обратную сторону. В поисковике пока не нашёл, самому пока не охота с 0 все придумывать, да и уверен что, кто-то да делал такое.
Если есть похожие примеры или идеи как такое можно сделать буду рад почитать, ну это так "баловство". Посмотреть как работает. Так то понятно как заставить двигаться и через CSS и JS, а вот уже рассчитать край блока и отправить обратно с изменением траектории и так по кругу пока затрудняюсь).
Я думаю по описанию и так понятно, но на всякий, накидал как я хочу чтобы зациклились движения картинок. Ну траектория может быть любой, главное что смысл такой:
5d31b2fba0d9a352090446.png
  • Вопрос задан
  • 183 просмотра
Решения вопроса 2
Stalker_RED
@Stalker_RED
if (obj.x >= screen.x) {
  // опа, край!
}

Для отправки в другую сторону введите в вашу программку векторы, описывающие скорость и направление. И меняйте их при столкновении.

Ответ написан
sfi0zy
@sfi0zy Куратор тега JavaScript
UI developer. Верстаю неверстаемое.
Если есть похожие примеры или идеи... Посмотреть как работает...

На ваш вопрос уже ответили, но добавлю от себя еще один пример для изучения. Принцип тот же, но используется SVG. Часто это может быть удобнее, чем анимирование html-элементов, особенно если нужны какие-то еще эффекты, так что полезно знать, что и так тоже можно:

Ну а если таких элементов будет слишком много, то имеет смысл все рисовать на canvas. Не стоит забывать о производительности!
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Александрия Москва
от 200 000 до 250 000 руб.
Foodtronics Москва
от 100 000 до 200 000 руб.
Алгоритмика Москва
от 120 000 до 200 000 руб.
21 авг. 2019, в 12:03
3000 руб./в час
21 авг. 2019, в 11:44
750 руб./в час
21 авг. 2019, в 11:32
1000 руб./в час