为什么我的动画会在最后传送到左下角

Question

我正在尝试制作一个圆形在正方形中反弹的动画。当前，当动画到达脚本的最后一部分时，它会扭曲到左下角。如果有人知道为什么它会扭曲，或者用一种更简单的方式来写这部动画，请告诉我。谢谢你抽出时间。

function myMove() {
var elem = document.getElementById("color");
var pos = 286;
var num = 0;
var id = setInterval(frame, 10);
function frame() {
if (num >= 183 && num < 512) {
pos--;
num++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
} else if (pos < 469 && num < 183) {
pos++;
num++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
} else if (pos == 140 || num >= 512 && num < 918) {
pos++;
num++;
elem.style.top = pos / 2 + 'px';
elem.style.left = pos + 'px';

} else if (pos <= 140 || num >= 918 && num < 929) {
pos--;
num++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';

}

}
}

.square {
height: 500px;
width: 500px;
background-color: white;
border-style: solid;
border-width: 2px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle {
height: 100px;
width: 100px;
background-color: #555;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div class="square"></div>
<div class="circle" id="color"></div>

Answer 1

我会这样做：

我用所采取的步骤对代码进行了注释。

我将圆圈移到正方形中，并将位置更改为relative，让css处理其余部分。

var timer;
function myMove() {
var circle = document.getElementById("circle");
var square = document.getElementById("square");
var posx = 0, posy = 0;
var squarew = square.clientWidth, squareh = square.clientHeight;

// moved timer to outer scope to clear it evertime the button is clicked
if (timer) clearInterval(timer);
timer = setInterval(frame, 10);

// made the circle configurable to be able to change the size of it
var circleRadius = 50;
circle.style.height = circleRadius * 2 + 'px';
circle.style.width = circleRadius * 2 + 'px';

// this is how fast the ball is going to move (in pixels)
var distance = 10;

// fire off in a random direction
var randomDirection = Math.random(0, 100);
// get the velocity in the x direction and y direction
var vy = distance * Math.sin(randomDirection);
var vx = distance * Math.cos(randomDirection);
function frame() {
// if i hit any edge of the box
if (posy + vy <= 0) {
// reverse the direction
vy *= -1;
}

if (posy + vy >= squareh - circleRadius * 2) {
// reverse the direction
vy *= -1;
}

if (posx + vy <= 0) {
// reverse the direction
vx *= -1;
}

if (posx + vy >= squarew - circleRadius * 2) {
// reverse the direction
vx *= -1;
}

// keep track of the position
posx += vx;
posy += vy;

// apply it to the circle
circle.style.top = posy + 'px';
circle.style.left = posx + 'px';
}
}

#square {
height: 500px;
width: 500px;
background-color: white;
border-style: solid;
border-width: 2px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#circle {
background-color: #555;
border-radius: 50%;
position: relative;
top: 0;
left: 0;
}

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id="square">
<div id="circle"></div>
</div>