Hi Guys,
Newbie here. I may lack my knowledge in understanding of mootools but
here is an issue I am facing.
I am facing some trouble implementing an animation function.
specifically the Cmorph function. If I hard set the new position of
the tiles on the canvas element the position changes directly, but
when I try animate into that position instead of just replacing the
value. All the items from my canvas just disappear.
Here is the function:
CANVAS.reanimate = function ()
{
//not optimised yet: animations are not working
properly.
console.log("calling the reanimate function");
for(i=0; i<(gridSize*gridSize); i++)
{
var cfn = currentCoinPositions[i];
var xycoord = positionCoordinates[i].split(",");
//hold
the new position of the elements
var x_cord_new = xycoord[0];
var y_cord_new = xycoord[1];
currentCoinPositions[i].x = x_cord_new; //assigning
positions
from an object array which is a copy of all the items on canvas
currentCoinPositions[i].y = y_cord_new;
if(cfn !=
'nill') //
changing the position of the elemet
{
var x_cord =
CANVAS.layers.get("myLayer").get("coin_"+i).x;
CANVAS.layers.get("myLayer").get("coin_"+i).y =
y_cord_new; //
comment when using animation function.
}
}
//uncomment it and comment above to see animation(animations not
working yet)
/*
for(i=0; i<(gridSize*gridSize); i++) //loop
initialized for
animation of the coins to the new position.
{
//If I use
this code in my implementation, all the coins are removed from the
canvas when the reanimate function is called.
if(currentCoinPositions[i] != 'nill')
{
coin = "coin_"+i;
x = currentCoinPositions[i].x;
y = currentCoinPositions[i].y;
console.log(x+","+y)
new
Cmorph(CANVAS.layers.get("myLayer").get(coin),
{
duration : 1000,
transition : 'back:out',
}).morph({
x : x,
y : y
});
}
} */
}
Now if you look at the finction I have commented out, I have noticed a
very peculiar behavior here.
I randomly clicked on the canvas after all the items vanished from it,
dragged the pointer around the canvas and saw really funny positions
for where the items are located on my console!
I also used the animation function in the redraw thread and noticed
that the position of x and y coordinates of my canvas items
exponentially increase. Please advice.
Log collection of position.
calling animate down
examples.interactive.js:352195,163 //returns the xy coordinates of the
items in the canvas.
examples.interactive.js:361195,163
examples.interactive.js:352245,135
examples.interactive.js:361245,135
examples.interactive.js:352295,163
examples.interactive.js:361295,163
examples.interactive.js:35245,192
examples.interactive.js:361450-405,13557-13365
examples.interactive.js:35295,220
examples.interactive.js:361950-855,16357-16137
examples.interactive.js:352145,192
examples.interactive.js:3611450-1305,13557-13365
examples.interactive.js:352195,220
examples.interactive.js:361195,220
examples.interactive.js:352245,192
examples.interactive.js:361245,192
examples.interactive.js:352295,220
examples.interactive.js:361295,220
examples.interactive.js:35245,249
examples.interactive.js:361450-405,19257-19008
examples.interactive.js:35295,277
examples.interactive.js:361950-855,22057-21780
examples.interactive.js:352145,249
examples.interactive.js:3611450-1305,19257-19008
examples.interactive.js:352195,277
examples.interactive.js:361195,277
examples.interactive.js:352245,249
examples.interactive.js:361245,249
examples.interactive.js:352295,277
examples.interactive.js:361295,277
examples.interactive.js:35245,306
examples.interactive.js:361450-405,24957-24651
examples.interactive.js:35295,334
examples.interactive.js:361950-855,27757-27423
examples.interactive.js:352145,306
examples.interactive.js:3611450-1305,24957-24651
examples.interactive.js:352195,334
examples.interactive.js:361195,334
examples.interactive.js:352245,306
examples.interactive.js:361245,306
examples.interactive.js:352295,334
examples.interactive.js:361295,334
examples.interactive.js:35245,363
examples.interactive.js:361450-405,30657-30294
examples.interactive.js:35295,391
examples.interactive.js:361950-855,33457-33066
examples.interactive.js:352145,363
examples.interactive.js:3611450-1305,30657-30294
examples.interactive.js:352195,391
examples.interactive.js:361195,391
examples.interactive.js:352245,363
examples.interactive.js:361245,363
examples.interactive.js:352295,391
examples.interactive.js:361295,391
examples.interactive.js:35245,420
examples.interactive.js:361450-405,36357-35937
examples.interactive.js:35295,448
examples.interactive.js:361950-855,39157-38709
examples.interactive.js:352145,420
examples.interactive.js:3611450-1305,36357-35937
examples.interactive.js:352195,448
examples.interactive.js:361195,448
examples.interactive.js:352245,420
examples.interactive.js:361245,420
examples.interactive.js:352295,448
examples.interactive.js:361295,448
examples.interactive.js:317calling the reanimate function
examples.interactive.js:344calling animate down
examples.interactive.js:352195,163
examples.interactive.js:361195,163
examples.interactive.js:352245,135
examples.interactive.js:361245,135
examples.interactive.js:352295,163
examples.interactive.js:361295,163
examples.interactive.js:35245,192
examples.interactive.js:361450-405NaN,13557-13365NaN
examples.interactive.js:35295,220
examples.interactive.js:361950-855NaN,16357-16137NaN
examples.interactive.js:352145,192
examples.interactive.js:3611450-1305NaN,13557-13365NaN
examples.interactive.js:352195,220
examples.interactive.js:361195,220
examples.interactive.js:352245,192
examples.interactive.js:361245,192
examples.interactive.js:352295,220
examples.interactive.js:361295,220
examples.interactive.js:35245,249
examples.interactive.js:361450-405NaN,19257-19008NaN
examples.interactive.js:35295,277
examples.interactive.js:361950-855NaN,22057-21780NaN
examples.interactive.js:352145,249
examples.interactive.js:3611450-1305NaN,19257-19008NaN
examples.interactive.js:352195,277
examples.interactive.js:361195,277
examples.interactive.js:352245,249
examples.interactive.js:361245,249
examples.interactive.js:352295,277
examples.interactive.js:361295,277
examples.interactive.js:35245,306
examples.interactive.js:361450-405NaN,24957-24651NaN
examples.interactive.js:35295,334
examples.interactive.js:361950-855NaN,27757-27423NaN
examples.interactive.js:352145,306
examples.interactive.js:3611450-1305NaN,24957-24651NaN
examples.interactive.js:352195,334
examples.interactive.js:361195,334
examples.interactive.js:352245,306
