@Galdar
Web, JS, PHP, NGINX, Linux

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

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

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

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

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

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

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

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