Question

我想知道如何计算我试图使用JavaScripts setInterval设置动画的元素的新X，Y位置。我想以一定角度和每秒像素移动元素，在每帧期间为元素计算新的X，Y。

非常感谢任何帮助。

点击球，然后在我的代码中查看throwBall函数。我有硬编码也是以90度角移动球，每帧1像素的速度@ 60 FPS，每秒60像素。但是如果我想以每秒100像素的速度以62度的角度移动球呢？

<!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>

Answer 1

您需要计算速度的x和y分量，以每帧像素为单位：这是小提琴：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以可变角度和速度动画元素运动？

1 个答案: