时间戳

首页 > 解决方案 > 为什么这些方块在 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>

我试图让这些球在撞到墙上时从墙上反弹并反转方向。第一步是为他们设置一个间隔，以便继续在屏幕上播放动画。我正在尝试在不实现画布的情况下完成此操作。关于为什么间隔只运行一次的任何帮助都会很棒。谢谢

标签： javascriptsetinterval

解决方案

您的 setInterval 运行正常。

问题是您总是将圆圈再次放在同一点上。当你这样做'translate(' + dX + 'px' + ',' + dY + 'px' + ')'-dX和dY不会添加到圆圈的当前位置。它们被用作新位置（始终保持 10 像素。）

2个解决方案：

  1. 每次调用都会增加dX和。dYmovement()

  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' + ')'

推荐阅读