Here is a Jsfiddle implementation of my code. Hope this helps. http://jsfiddle.net/WRRns/5/
If I run it without the animate function it works fine. But otherwise.. You got to see it in a browser console to understand whats happening. You could find the usage of the function here. http://forvar.de/js/mcl/examples.interactive.html Thanks Shouvik On Oct 4, 10:50 am, Oskar Krawczyk <[email protected]> wrote: > 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
