Javascript以可变的角度和速度为元素移动制作动画

Javascript animate element movement at a variable angle and speed?

本文关键字：元素 移动 动画 速度 Javascript      更新时间：2023-09-26

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

任何帮助将不胜感激。

http://jsfiddle.net/v8tcgezj/

单击球，然后查看我的代码中的 throwBall 函数。 我也让它硬编码，以每帧 1 像素 @ 60 FPS 的速度以 90 度角移动球，因此每秒 60 像素。 但是，如果我想以每秒 62 像素的速度以 100 度角移动球怎么办？

<!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 分量：这是小提琴：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);
};
相关文章：