How is it that these squares only translate once instead of multiple times within the setInterval?
Question
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>
I am trying to have these balls bounce off the walls and reverse direction when they hit a wall. the first step is setting up an interval for them to continue to animate across the screen. I am trying to accomplish this without the implementation of a canvas. Any help as to why the interval only runs one time would be awesome. Thanks
1 answers
solution1
1 ACCPTED 2021-01-28 19:09:09
Your setInterval runs OK.
The problem is that you always put the circles again at the same point. When you do 'translate(' + dX + 'px' + ',' + dY + 'px' + ')' - The dX and dY are not added to the current location of the circle. They are used as the new location (which always stays 10px.)
2 options for solution:
Increase
dXanddYevery time you callmovement().Probably better solution: When you set the
transformproperty in your element - Sum the current location with thedXanddY. Code to do that:Add the next variable before you set the
transformin the movement function:const matrix = new WebKitCSSMatrix(circleNodeListIndividual.style.transform);then use it in setting the
transform:circleNodeListIndividual.style.transform = 'translate(' + (matrix.m41 + dX) + 'px' + ',' + (matrix.m42 + dY) + 'px' + ')'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.