How to reverse the direction of an animation in HTML5 canvas
Question
I'm having a hard time understanding how HTML5 animation works. I need some enlightenment.
What I want to do is make the rectangle animate to the bottom of the canvas then, come back up to the top of the canvas. It seems the problem is I am not setting the rectangle's y location properly. I noticed when I set the rectangle's speed different from the current speed it reacts the way I want it to. The rectangle wants to go back up, but it is remembering that it is suppose to go down. So it is stuck trying to decide what to do.
How do I initially set the rectangle's y location, and do I need to update it constantly?
<!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>
1 answers
solution1
0 ACCPTED 2013-07-02 16:41:22
The problem is that you are not telling it to reverse. You are telling it to back off, and it gets caught in a never-ending cycle.
Alter your code, to have a variable direction to tell it where to go (up/down):
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.