It would be better if you posted a jsfiddle.net instead of pasting the code
here.
O.
On 2010-10-04, at 06:59, shouvik wrote:
> 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
