Блог

Главная - Вопросы по программированию - Как получается, что эти квадраты переводятся только один раз, а не несколько раз в setInterval?

Как получается, что эти квадраты переводятся только один раз, а не несколько раз в setInterval?

#javascript #setinterval

#javascript #setinterval

Вопрос:

 var initialCircle;
var i;
var randomXPos;
var randomYPos;
var colorArray;
var interval01;
var circleNodeList;
var circleNodeListIndividual;
var xDirection = 5;
var yDirection = 5;
var dX = xDirection   5;
var dY = yDirection   5;
colorArray = [
  'aliceblue', 'lavender', 'powderblue', 'lightblue', 'lightskyblue', 'skyblue', 'deepskyblue', 'lightsteelblue', 'dodgerblue', 'cornflowerblue', 'steelblue', 'cadetblue', 'mediumslateblue', 'slateblue', 'darkslateblue', 'royalblue', 'blue', 'mediumblue', 'darkblue', 'navy', 'midnightblue', 'blueviolet', 'indigo'
];
var randomColor;




function startBouncingHoverCircles() {
  interval01 = setInterval(function() {
    randomXPos = Math.floor(Math.random() * 380)   31;
    randomYPos = Math.floor(Math.random() * 235)   31;
    randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    initialCircle = document.createElement('div');
    document.querySelector("#container").appendChild(initialCircle);
    initialCircle.className = "aces";
    initialCircle.style = 'height:30px;width:30px;border-radius:50%;box-sizing:border-box;position:absolute;border:3px solid green;background-color:'   randomColor;
    initialCircle.style.top = randomYPos   'px';
    initialCircle.style.left = randomXPos   'px';
  }, 1);
  setTimeout(function() {
    clearInterval(interval01);
    movement()
  }, 100)
}

function movement() {
  setInterval(function() {
    circleNodeList = document.querySelectorAll(".aces");
    for (i = 0; i < circleNodeList.length; i  ) {
      circleNodeListIndividual = circleNodeList[i];
      circleNodeListIndividual.style.transition = "transform 1s";
      circleNodeListIndividual.style.transform = 'translate('   dX   'px'   ','   dY   'px'   ')'
    }
  }, 1500)
} 
 <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js" integrity="sha512-vPeZ7JCboHcfpqSx5ZD /jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU oujBJKnWmu4hU7r9MMQNWPfXsYw==" crossorigin="anonymous"></script>
  <style>
    #container {
      width: 450px;
      height: 300px;
      position: relative;
      border: 1px solid black;
      margin: auto;
    }
  </style>
</head>

<body>
  <button onClick="startBouncingHoverCircles()">Start</button>
  <div id="container"></div>

  <script src="../Js/bouncingHoverCircles.js"></script>
</body>

</html>

Я пытаюсь заставить эти шары отскакивать от стен и менять направление, когда они ударяются о стену. первым шагом является настройка интервала для продолжения анимации по экрану. Я пытаюсь выполнить это без реализации canvas . Любая помощь относительно того, почему интервал выполняется только один раз, была бы потрясающей. Спасибо

Ответ №1:

Ваш setInterval работает нормально.

Проблема в том, что вы всегда снова помещаете круги в одну и ту же точку. Когда вы это делаете 'translate(' dX 'px' ',' dY 'px' ')' — dX и dY не добавляются к текущему местоположению круга. Они используются в качестве нового местоположения (которое всегда остается 10 пикселей.)

2 варианта решения:

  1. Увеличивайте dX и dY при каждом вызове movement() .
  2. Вероятно, лучшее решение: когда вы устанавливаете transform свойство в своем элементе — суммируйте текущее местоположение с dX помощью и dY . Код для этого:

    Добавьте следующую переменную перед установкой transform в функции перемещения:

     const matrix = new WebKitCSSMatrix(circleNodeListIndividual.style.transform);

    затем используйте его при настройке transform :

     circleNodeListIndividual.style.transform = 'translate('   (matrix.m41   dX)   'px'   ','   (matrix.m42   dY)   'px'   ')'

Комментарии:

1. действительно.. прямо над строкой circleNodeList = document.querySelectorAll(".aces"); , которую я поставил dX =5; dY =5 , и она каждый раз трансформировалась.. хороший улов равид

Метки: