Multiple instances of the same object interfere with each other

H

Hedgehog

Hi all,
I'm new to the group, I looked for some threads about this problem, but
never managed to find a solution, thus here is my question:

I'm coding an Animation class to give web pages the ability to move,
tween, resize and change alpha to objects (say div, img, and other DOM
nodes), the problem arises when I try to instantiate a new animation on
a different object, if I instatiate a new animation on a different HTML
object, the object animated before stops to move (or resize or
whatever), I thought it could have to do with closures, but I can't
figure out how to handle this problem, here is the code (excerpts):

----------------------------------------------
Here is the code that instatiates objects.
The animationMoveTo method requires these parameters:
(endingXCoordinate, endingYCoordinate, millisecondsForTheAnimation,
indexForTheSetInterval, intervalForTheSetInterval).
As you can see, I call the Animation constructor two subsequent times,
in this case, I can't see the aquila div object to slide into the page,
but if I delay (say with a setTimout with interval 200), the
instatiation of the second Animation (the one with sinistro as
argument), I can see the first move for just 200ms then stop and start
the animation for "sinistro", another (frustrating) note: 'sinistro'
starts the animation from the would-be arriving coordinates of the
'aquila' object:

animazioneAquila = new Animation('aquila');
larghezza = animazioneAquila.cssValue.getWidth();
sinistra = animazioneAquila.cssValue.getLeft();
dove = sinistra - larghezza;
animazioneAquila.animationMoveTo(dove, "40%", 600, 0,
100);

animazioneSinistro = new Animation('sinistro');
animazioneSinistro.animationMoveTo(0, "40%", 200, 1, 100);
----------------------------------------------------------------------
Here are excerpts from the Animation and Css classes that are
referenced by the code:

function Animation(identificativo) {

var now = (new Date()).getTime();
eval('tmp' + now + ' = this');
eval('tmp' + now + '.cssValue = new Css(identificativo)');

// MOVE OBJECTS
this.animationMoveTo = animationMoveTo;

[...]

function moveBy (dx, dy, tx, ty, index) {
var newX = eval('tmp' + now + '.cssValue').getLeft() + dx;
var newY = eval('tmp' + now + '.cssValue').getTop() + dy;
eval('tmp' + now + '.cssValue').setStyle("left", newX);
eval('tmp' + now + '.cssValue').setStyle("top", newY);
if (dx * (tx - newX) >= 0 && dy * (ty - newY) >= 0) {
return 1;
}
eval('tmp' + now + '.cssValue').setStyle("left", tx);
eval('tmp' + now + '.cssValue').setStyle("top", ty);
clearInterval(moving[index]);
return 0;
}

move = moveBy;

function animationMoveTo(tx, ty, interval, index, fluidity) {
if (typeof tx == "string") tx = checkPercentage(tx, "w");
if (typeof ty == "string") ty = checkPercentage(ty, "h");
if (typeof moving != 'undefined') {
if (typeof moving[index] != 'undefined')
clearInterval(moving[index]);
} else moving = new Array();
var iterazioni = interval/fluidity;
var dx = (tx - eval('tmp' + now + '.cssValue').getLeft())/iterazioni;
var dy = (ty - eval('tmp' + now + '.cssValue').getTop())/iterazioni;
if (dx || dy) {
moving[index] = setInterval("move(" + dx + "," + dy + "," + tx + ","
+ ty + "," + index + ")", fluidity);
}
}

[...]

function Css(identificativo) {
this.id=identificativo;

var now = (new Date()).getTime();
eval('cssVar' + now + ' = this');

// Object POsition
this.getLeft = getLeft;
this.getTop = getTop;

[...]

function getLeft() {
obj = document.getElementById(eval('cssVar' + now + '.id'));
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x) curleft += obj.x;
return curleft;
}

function getTop() {
obj = document.getElementById(eval('cssVar' + now + '.id'));
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop+= obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y) curtop += obj.y;
return curtop;
}
[...]

---------------------------------------------------------------------------

Thank you for the help, and sorry for this long post, but I can't
imagine why instatiating 2 new objects (new means new, i thought) has
this interfered bahaviour.

Hedgehog
 
M

Michael Winter

Hedgehog wrote:

[snip]
[...] new means new, i thought [...]

It does, but you're not using the objects to contain data. Instead
you're creating global variables in a way which might cause conflicts
if two objects are constructed (almost) simultaneously.

Get rid of the eval rubbish and create members properly:

function Animation(id) {
this.cssValue = new CSS(id);
}

function CSS(id) {
this.getLeft = function() {
var o = document.getElementById(id),
l = 0;

if(o.offsetParent) {
while(o.offsetParent) {
l += o.offsetLeft;
o = o.offsetParent;
}
} else if(o.x) {l += o.x;}
return l;
};
this.getTop = function() {
var o = document.getElementById(id),
t = 0;

if(o.offsetParent) {
while(o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
} else if(o.y) {t += o.y;}
return t;
};
}

It would seem that the methods of the Animation object should be added
via the prototype object as they don't necessarily seem to need to
form a closure within the constructor function. However, that
assessment might change based on the timer mechanism you use. That too
is based around global identifiers and it probably shouldn't be.

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript animation 3

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top