Need Help!

ncrider88 · #1 Aug 23rd, 2005, 00:38

I am working on a site for my High School and i am trying to animate some pictures so they fly from one position to another. I have it set up to do it for one picture but cant figure out how to do it for two or three( like i need to). here is what i got now

var animateSpeed = 5;
var object = null;
var fX = null;
var fY = null;
var cX = null;
var cY = null;
var dX = null;
var dY = null;
var stepX = null;
var stepY = null;
var slope = null;
function initAnimate(objectID, x, y){
object = document.getElementById(objectID);

fX = x;

fY = y;

cX = object.offsetLeft;
cY = object.offsetTop;
dX = Math.abs(fX-cX);
dY = Math.abs(fY-cY);
if ((dX ==0) || (dY == 0)) slope = 0;

else slope = dY/dX;
if (dX>=dY) {
if (cX<fX) stepX = animateSpeed;
else if (cX>fX) stepX = animateSpeed;
if (cY<fY) stepY = animateSpeed * slope;
else if (cY>fY) stepY= animateSpeed * slope;
}
else if (dX<dY) {
if (cY<fY) stepY= animateSpeed;
else if (cY>fY) stepY=animateSpeed;
if (cX<fX) stepX= animateSpeed/slope;
else if (cX>fX) stepX = animateSpeed/slope;
}
animateObject()
}

function animateObject() {
if ((dX>0) || (dY > 0)) {
object.style.left = Math.round(cX) + 'px';
object.style.top = Math.round(cY) + 'px';
cX = cX + stepX;
cY = cY + stepY;
dX = dX - Math.abs(stepX);
dY = dY - Math.abs(stepY);
setTimeout ('animateObject()',0);
}
else {
object.style.left = fX + 'px';
object.style.top = fY + 'px';

}
return;

}

Webforumz Staff · #2 Aug 23rd, 2005, 03:19

There's a few ways to do it, using classes is one option.

But, the easiest would probably be to change most of your variables to arrays, with as many members as objects. Then you'd have

fx[0] for the first object, fx[1] for the second, etc.

If you need more details post back.

See http://www.w3schools.com/js/js_obj_array.asp

ncrider88 · #3 Aug 23rd, 2005, 19:10

Please elaborate if you dont mind, i dont understand how to change the objectid that i pass into the function initAnimate(), right now i have it set..

<body onload="initAnimate('picOne',700,120)>

im a little confused.

Webforumz Staff · #4 Aug 26th, 2005, 21:04

Still working on this?

ncrider88 · #5 Sep 4th, 2005, 23:58

yes i am still working on it, i tryed a few things and here is what i got.(it doesnt work)

var animateSpeed = 5;
var fX = new Array(200,300,400);
var fY = new Array(200,300,400);

var cX = new Array(null,null,null);
var cY = new Array(null,null,null);
var dX = new Array(null,null,null);
var dY = new Array(null,null,null);
var stepX = new Array(null,null,null);
var stepY = new Array(null,null,null);
var slope = new Array(null,null,null);

function start(){

cX[0] = content2.offsetLeft;
cX[1] = content3.offsetLeft;
cX[2] = content4.offsetLeft;
cY[0] = content2.offsetTop;
cY[1] = content3.offsetTop;
cY[2] = content4.offsetTop;
dX[0] = Math.abs(fX[0]-cX[0]);
dX[1] = Math.abs(fX[1]-cX[1]);
dX[2] = Math.abs(fX[2]-cX[2]);
dY[0] = Math.abs(fY[0]-cY[0]);
if ((dX[0] ==0) || (dY[0] == 0)) slope = 0;
else slope = dY[0]/dX[0];
dY[1] = Math.abs(fY[1]-cY[1]);
if ((dX[1] ==0) || (dY[1] == 0)) slope = 0;
else slope = dY[1]/dX[1];
dY[2] = Math.abs(fY[2]-cY[2]);
if ((dX[2] ==0) || (dY[2] == 0)) slope = 0;
else slope = dY[2]/dX2];

if (dX[0]>=dY[0]) {
if (cX[0]<fX[0]) stepX[0] = animateSpeed;
else if (cX[0]>fX[0]) stepX[0] = animateSpeed;
if (cY[0]<fY[0]) stepY[0] = animateSpeed * slope;
else if (cY[0]>fY[0]) stepY[0]= animateSpeed * slope;
}

else if (dX[0]<dY[0]) {
if (cY[0]<fY[0]) stepY[0]= animateSpeed;
else if (cY[0]>fY[0]) stepY[0]=animateSpeed;
if (cX[0]<fX[0]) stepX[0]= animateSpeed/slope;
else if (cX[0]>fX[0]) stepX[0] = animateSpeed/slope;
}

if (dX[1]>=dY[1]) {
if (cX[1]<fX[1]) stepX[1] = animateSpeed;
else if (cX[1]>fX[1]) stepX[1] = animateSpeed;
if (cY[1]<fY[1]) stepY[1] = animateSpeed * slope;
else if (cY[1]>fY[1]) stepY[1]= animateSpeed * slope;
}

else if (dX[1]<dY[1]) {
if (cY[1]<fY[1]) stepY[1]= animateSpeed;
else if (cY[1]>fY[1]) stepY[1]=animateSpeed;
if (cX[1]<fX[1]) stepX[1]= animateSpeed/slope;
else if (cX[1]>fX[1]) stepX[1] = animateSpeed/slope;
}

if (dX[2]>=dY[2]) {
if (cX[2]<fX[2]) stepX[2] = animateSpeed;
else if (cX[2]>fX[2]) stepX[2] = animateSpeed;
if (cY[2]<fY[2]) stepY[2] = animateSpeed * slope;
else if (cY[2]>fY[2]) stepY[2]= animateSpeed * slope;
}

else if (dX[2]<dY[2]) {
if (cY[2]<fY[2]) stepY[2]= animateSpeed;
else if (cY[2]>fY[2]) stepY[2]=animateSpeed;
if (cX[2]<fX[2]) stepX[2]= animateSpeed/slope;
else if (cX[2]>fX[2]) stepX[2] = animateSpeed/slope;

}
animateObject()
}

function animateObject() {
if ((dX[0]>0) || (dY[0] > 0)) {
content2.style.left = Math.round(cX[0]) + 'px';
content2.style.top = Math.round(cY[0]) + 'px';
cX[0] = cX[0] + stepX[0];
cY[0] = cY[0] + stepY[0];
dX[0] = dX[0] - Math.abs(stepX[0]);
dY[0] = dY[0] - Math.abs(stepY[0]);
setTimeout ('animateObject()',0);
}
else {
content2.style.left = fX[0] + 'px';
content2.style.top = fY[0] + 'px';

}
if ((dX[1]>0) || (dY[1] > 0)) {
content3.style.left = Math.round(cX[1]) + 'px';
content3.style.top = Math.round(cY[1]) + 'px';
cX[1] = cX[1] + stepX[1];
cY[1] = cY[0] + stepY[1];
dX[1] = dX[0] - Math.abs(stepX[1]);
dY[1] = dY[0] - Math.abs(stepY[1]);
setTimeout ('animateObject()',0);
}
else {
content3.style.left = fX[1] + 'px';
content3.style.top = fY[1] + 'px';

}
if ((dX[2]>0) || (dY[2] > 0)) {
content4.style.left = Math.round(cX[2]) + 'px';
content4.style.top = Math.round(cY[2]) + 'px';
cX[2] = cX[2] + stepX[2];
cY[2] = cY[2] + stepY[2];
dX[2] = dX[2] - Math.abs(stepX[2]);
dY[2] = dY[2] - Math.abs(stepY[2]);
setTimeout ('animateObject()',0);
}
else {
content4.style.left = fX[2] + 'px';
content4.style.top = fY[2] + 'px';

}
return;

}

If any one sees where I messed up please post, I would greatly appreciate it.

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Need Help!