我想知道如何着手计算我尝试使用 JavaScript setInterval 设置动画的元素的新 X、Y 位置。我想以特定 Angular 和每秒像素移动元素，在每一帧期间为元素计算新的 X、Y。
如有任何帮助，我们将不胜感激。
点击球，检查代码中的 throwBall 函数。我也对其进行了硬编码，以每帧 1 像素 @ 60 FPS 的速度以 90 度 Angular 移动球，因此每秒 60 像素。但是，如果我想以每秒 100 像素的速度以 62 度 Angular 移动球怎么办？
<!DOCTYPE html>
<html>
<head>
<script>
var ball;
var ballX = 100;
var ballY = 100;
var ballClicked = false;
window.onload = function() {
ball = document.createElement("div");
ball.style.backgroundColor = "white";
ball.style.border = "2px solid black";
ball.style.width = "50px";
ball.style.height = "50px";
ball.style.position = "absolute";
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
ball.style.borderRadius = "50%";
ball.addEventListener('mousedown',function(e) { onBallMouseDown(e); }, false);
ball.addEventListener('mouseup',function(e) { onBallMouseUp(e); }, false);
ball.addEventListener('touchstart',function(e) { onBallMouseDown(e); }, false);
ball.addEventListener('touchend',function(e) { onBallMouseUp(e); }, false);
document.body.appendChild(ball);
document.addEventListener('mousemove',function(e) { onMouseMove(e); }, false);
document.addEventListener('touchmove',function(e) { onTouchMove(e); }, false);
};
function onMouseMove(e) {
if (ballClicked == true) {
ballX = e.pageX - 25;
ballY = e.pageY - 25;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
}
};
function onTouchMove(e) {
if (ballClicked == true) {
ballX = e.targetTouches[0].pageX - 25;
ballY = e.targetTouches[0].pageY - 25;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
}
};
function onBallMouseDown(e) {
ballClicked = true;
};
function onBallMouseUp(e) {
ballClicked = false;
//When the ball is released, it will be thrown at an angle relative to it's original position when it is thrown..
//For testing purposes, let's throw a the ball at 90 degrees with a speed of 60 pixels per second.
throwBall(60,50);
};
function throwBall(angle, speed) {
var animationComplete = false;
var interval = setInterval(function() {
//How do I Calculate the new X and Y position for the ball during each frame, based on the angle and speed which it was thrown?
//This will move the ball at a 90 degree angle (north) at a speed of 1 pixel per frame.
ballX = ballX + 0;
ballY = ballY - 1;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
if (animationComplete == true) {
clearInterval(interval);
console.log("ball throw animation complete.");
}
}, 1000 / 60);
};
</script>
</head>
<body>
</body>
</html>
最佳答案
您需要计算速度的 x 和 y 分量(以每帧像素为单位): 这是 fiddle :http://jsfiddle.net/8kkv9973/2/
我不知道您对所需的数学知识有多熟悉，但如果您对此有任何疑问，请告诉我。
不过，您绝对应该对 javascript 动画做一些研究。
这是更新后的函数:
function throwBall(angle, speed) {
var animationComplete = false;
//put the angle in radians
var rads = angle * Math.PI / 180;
//calculate the x and y components of the velocity in pixels per frame
//speed is in pixels per second, so divide by 60 to get pixels per frame
var vx = Math.cos(rads)*speed/60;
var vy = Math.sin(rads)*speed/60;
var interval = setInterval(function() {
//How do I Calculate the new X and Y position for the ball during each frame, based on the angle and speed which it was thrown?
ballX = ballX + vx;
ballY = ballY - vy;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
if (animationComplete == true) {
clearInterval(interval);
console.log("ball throw animation complete.");
}
}, 1000 / 60);
};
关于Javascript动画元素以可变 Angular 和速度移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27586410/