JavaScript анимация перемещение элемента

225

16 июля 2021, 18:00

У меня возникли проблемы с написанием одного на первый взгляд простенького кода. Я хотел создать небольшую анимацию, в ходе которой текстовый элемент html должен был перемещаться по экрану веб-страницы и менять направления после столкновения с краями. Проблема заключается в том, цикл, в котором происходит изменение параметров Margin элемента не обновляет отображение элемента на странице. Т.е. если сделать цикл конечным, элемент мгновенно переместится на свою конечную позицию, если же цикл бесконечный то страница просто будет грузиться вечно.

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <script> 
        'use strict'; 
        window.onload = function() { 
            let movingElement = document.getElementById("movingThing"); 
            let destiny = [1, -1]; 
            let xDirection = destiny[Math.round(Math.random() * 1)]; 
            let yDirection = destiny[Math.round(Math.random() * 1)]; 
            let speed = 1; 
            movingElement.style.marginTop = 200 + 'px'; 
            movingElement.style.marginLeft = 200 + 'px'; 
            for (let i = 0; i < 99; i++) { 
                if (movingElement.style.marginTop >= document.body.clientHeight || 
                    movingElement.style.marginTop <= 0) 
                    yDirection *= -1; 
                if (movingElement.style.marginLeft >= document.body.clientWidth || 
                    movingElement.style.marginLeft <= 0) 
                    xDirection *= -1; 
                movingElement.style.marginTop = parseInt(movingElement.style.marginTop) + speed * yDirection + 'px' 
                movingElement.style.marginLeft = parseInt(movingElement.style.marginLeft) + speed * xDirection + 'px' 
            } 
        } 
    </script> 
</head> 
 
<body> 
    <p style="font-size: 45px" id="movingThing">$</p> 
</body> 
 
</html>

Answer 1

использовать вместо цикла setInterval

let movingElement = document.getElementById("movingThing"); 
 
const windowWidth = document.documentElement.clientWidth; 
const windowHeight = document.documentElement.clientHeight; 
const elemWidth = movingElement.clientWidth; 
const elemHeight = movingElement.clientHeight; 
 
let destiny = [1, -1]; 
let xDirection = destiny[Math.round(Math.random() * 1)]; 
let yDirection = destiny[Math.round(Math.random() * 1)]; 
let speed = 1; 
 
movingElement.style.top = 100 + 'px'; 
movingElement.style.left = 100 + 'px'; 
 
setInterval(() => { 
  const top = parseInt(movingElement.style.top); 
  const left = parseInt(movingElement.style.left); 
  if (top == (windowHeight - elemHeight) || top == 0) yDirection *= -1; 
  if (left == (windowWidth - elemWidth) || left == 0) xDirection *= -1; 
  movingElement.style.top = top + speed * yDirection + 'px' 
  movingElement.style.left = left + speed * xDirection + 'px' 
}, 10)

p { 
  margin: 0; 
  position: absolute; 
}

<p style="font-size: 45px" id="movingThing">$</p>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проверка инпута ФИО + появление новых инпутов по мере заполнения(javascript)

Задача в том что по окончанию заполнения первого инпута "Фамилия", ниже появлялся второй "Имя" и затем третий "Отчество" (который к заполнению...

386

HTML

JavaScript анимация перемещение элемента

Проверка инпута ФИО + появление новых инпутов по мере заполнения(javascript)

Почему не парсится RSS

POST запрос с получением ответа

Activator.CreateInstance MissingMethodException