bigfella
04-30-2009, 01:29 AM
hey everyone. i need some help with some simple javascript path-based animation. i am trying to get a simple image of a robot to go diagonally across a background image, stop at the corner, come back, and repeat. i have it now so that the robot moves to the bottom right corner, but i can't get it to go back. here's the code with some comments. thanks!
var RoboBall =
{
init: function()
{
RoboBall.frameRate = 25;
RoboBall.duration = 2;
RoboBall.div = document.getElementById("robot");
RoboBall.targetX = 600;
RoboBall.targetY = 150;
RoboBall.originX = parseInt(Core.getComputedStyle(RoboBall.div, "left"), 10);
RoboBall.originY = parseInt(Core.getComputedStyle(RoboBall.div, "top"), 10);
RoboBall.incrementX = (RoboBall.targetX - RoboBall.originX) / (RoboBall.duration * RoboBall.frameRate);
RoboBall.incrementY = (RoboBall.targetY - RoboBall.originY) / (RoboBall.duration * RoboBall.frameRate);
RoboBall.x = RoboBall.originX;
RoboBall.y = RoboBall.originY;
RoboBall.animate();
},
animate: function()
{
RoboBall.x += RoboBall.incrementX;
RoboBall.y += RoboBall.incrementY;
//I'm assuming this is the if statement that i need to edit to get the image to //turn around and come back.
if ((RoboBall.targetX > RoboBall.originX &&
RoboBall.x >= RoboBall.targetX) ||
(RoboBall.targetX < RoboBall.originX &&
RoboBall.x <= RoboBall.targetX))
{
RoboBall.x = RoboBall.targetX;
RoboBall.y = RoboBall.targetY;
}
else if (RoboBall.targetX == RoboBall.x && RoboBall.targetY == Roboball.y)
{
RoboBall.x -= RoboBall.incrementX;
RoboBall.x -= RoboBall.incrementY;
}
else
{
setTimeout(RoboBall.animate, 1000 / RoboBall.frameRate)
}
RoboBall.div.style.left = Math.round(RoboBall.x) + "px";
RoboBall.div.style.top = Math.round(RoboBall.y) + "px";
}
};
Core.start(RoboBall);
var RoboBall =
{
init: function()
{
RoboBall.frameRate = 25;
RoboBall.duration = 2;
RoboBall.div = document.getElementById("robot");
RoboBall.targetX = 600;
RoboBall.targetY = 150;
RoboBall.originX = parseInt(Core.getComputedStyle(RoboBall.div, "left"), 10);
RoboBall.originY = parseInt(Core.getComputedStyle(RoboBall.div, "top"), 10);
RoboBall.incrementX = (RoboBall.targetX - RoboBall.originX) / (RoboBall.duration * RoboBall.frameRate);
RoboBall.incrementY = (RoboBall.targetY - RoboBall.originY) / (RoboBall.duration * RoboBall.frameRate);
RoboBall.x = RoboBall.originX;
RoboBall.y = RoboBall.originY;
RoboBall.animate();
},
animate: function()
{
RoboBall.x += RoboBall.incrementX;
RoboBall.y += RoboBall.incrementY;
//I'm assuming this is the if statement that i need to edit to get the image to //turn around and come back.
if ((RoboBall.targetX > RoboBall.originX &&
RoboBall.x >= RoboBall.targetX) ||
(RoboBall.targetX < RoboBall.originX &&
RoboBall.x <= RoboBall.targetX))
{
RoboBall.x = RoboBall.targetX;
RoboBall.y = RoboBall.targetY;
}
else if (RoboBall.targetX == RoboBall.x && RoboBall.targetY == Roboball.y)
{
RoboBall.x -= RoboBall.incrementX;
RoboBall.x -= RoboBall.incrementY;
}
else
{
setTimeout(RoboBall.animate, 1000 / RoboBall.frameRate)
}
RoboBall.div.style.left = Math.round(RoboBall.x) + "px";
RoboBall.div.style.top = Math.round(RoboBall.y) + "px";
}
};
Core.start(RoboBall);