Javascript 如何在HTML5画布中反转动画的方向_Javascript_Canvas_Html5 Canvas

Javascript 如何在HTML5画布中反转动画的方向

javascript canvas html5-canvas

Javascript 如何在HTML5画布中反转动画的方向,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我很难理解HTML5动画是如何工作的。我需要一些启发我想做的是使矩形动画到画布的底部，然后回到画布的顶部。问题似乎是我没有正确设置矩形的y位置。我注意到，当我设置矩形的速度与当前速度不同时，它会以我希望的方式反应。矩形想要向上移动，但它记住它应该向下移动。因此，它一直在努力决定该做什么如何初始设置矩形的y位置，是否需要不断更新 <!doctype html> <html> <head> <title>canvas animation</t

我很难理解HTML5动画是如何工作的。我需要一些启发

我想做的是使矩形动画到画布的底部，然后回到画布的顶部。问题似乎是我没有正确设置矩形的y位置。我注意到，当我设置矩形的速度与当前速度不同时，它会以我希望的方式反应。矩形想要向上移动，但它记住它应该向下移动。因此，它一直在努力决定该做什么

如何初始设置矩形的y位置，是否需要不断更新

<!doctype html>
<html>
<head>
<title>canvas animation</title>
<style>
#animated {
    border: 1px solid black;  
}
</style>
</head>
<body>

<h1>canvas animation</h1>

<canvas id="animated" width="500" height="300"></canvas>

<script>
        var xLoc = 0;
        var yLoc = 0;
        var speed = 5;

        window.requestAnimFrame = (function(callback) {
            return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
         })();

        function animateDown() {
            var canvas = document.getElementById("animated");
            var context = canvas.getContext("2d");

            context.clearRect(0, 0, canvas.width, canvas.height);           

            context.beginPath();
            context.rect(xLoc, yLoc, 300, 150); // yLoc-canvas.height = -300
            context.fillStyle = "rgb(247, 209, 23)";
            context.fill();

            yLoc += 4;

            if (yLoc > canvas.height - 150) {
                yLoc -= speed;
            } else if (yLoc < 0) {
                yLoc += speed;
            }

            requestAnimFrame(function() {
                animateDown();
            });
         }

        window.onload = function() {
            animateDown();
        };
</script>
</body>
</html>


画布动画
#活跃的{
边框：1px纯黑；
}
画布动画
var-xLoc=0；
var-yLoc=0；
无功转速=5；
window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数animateDown（）{
var canvas=document.getElementById（“动画”）；
var context=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
context.rect（xLoc，yLoc，300150）；//yLoc-canvas.height=-300
context.fillStyle=“rgb（2472009,23）”；
context.fill（）；
yLoc+=4；
如果（yLoc>canvas.height-150）{
yLoc-=速度；
}else if（yLoc<0）{
yLoc+=速度；
}
requestAnimFrame（函数（）{
动画向下（）；
});
}
window.onload=函数（）{
动画向下（）；
};

问题在于您没有告诉它反转。你告诉它后退，它就会陷入一个永无止境的循环

更改代码，以使用变量

方向

来告诉它去哪里（向上/向下）：


var-xLoc=0；
var-yLoc=0；
无功转速=5；
变量方向=1；//默认为“向下”
window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数animateDown（）{
var canvas=document.getElementById（“动画”）；
var context=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
context.rect（xLoc，yLoc，300150）；//yLoc-canvas.height=-300
context.fillStyle=“rgb（2472009,23）”；
context.fill（）；
yLoc+=速度*方向；//在给定方向上以速度增加
如果（yLoc>canvas.height-150）{
方向=-1；//再次上移（减少）
}else if（yLoc<0）{
方向=1；//向下移动
}
requestAnimFrame（函数（）{
动画向下（）；
});
}
window.onload=函数（）{
动画向下（）；
};

Eric，为什么我不能使用yLoc--；改变方向？我试图理解为什么我必须创建一个新变量来控制yLoc的方向，而不是使用yLoc自己的属性来反转它自己。我现在明白了。我必须首先设置yLoc的运动增量，以便逻辑语句捕获yLoc的位置以执行逻辑语句。原因是yLoc首先被递减，因此它小于

canvas.height-150

。下次调用它时，它的增量将超过该阈值；这使得它再次减少。因此，基本上，它总是被不断递增/递减的

所卡住。愿力永远与你同在。

<script>
        var xLoc = 0;
        var yLoc = 0;
        var speed = 5;
        var direction = 1;   // Defaults to 'down'

        window.requestAnimFrame = (function(callback) {
            return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
         })();

        function animateDown() {
            var canvas = document.getElementById("animated");
            var context = canvas.getContext("2d");

            context.clearRect(0, 0, canvas.width, canvas.height);           

            context.beginPath();
            context.rect(xLoc, yLoc, 300, 150); // yLoc-canvas.height = -300
            context.fillStyle = "rgb(247, 209, 23)";
            context.fill();

            yLoc += speed * direction;   // Increase by speed in the given direction

            if (yLoc > canvas.height - 150) {
                direction = -1;  // Move up again (decrease)
            } else if (yLoc < 0) {
                direction = 1;   // Move downwards
            }

            requestAnimFrame(function() {
                animateDown();
            });
         }

        window.onload = function() {
            animateDown();
        };
</script>