PDA

View Full Version : Looping animation seems to leak memory in all browsers



ykey
17 Nov 2011, 7:33 PM
I am trying to create a simple looping animation using the animate api.

I have tried several variations of the following code and they all seem to leak memory in all browsers I have tested. I was wondering if there was something wrong with my approach or a different approach I could be taking.



function animation(component) {
component.animate({
duration: 1500,
keyframes: {
50: {
opacity: 0
},
100: {
opacity: 1
}
}
});
}

Ext.onReady(function() {
var component = Ext.create('Ext.Component', {
html: 'DEBUGGING',
width: 300,
height: 200,
renderTo: Ext.getBody()
});

Ext.TaskManager.start({
run: Ext.bind(animation, this, [component]),
interval: 3000
});
});

18 Nov 2011, 9:37 AM
I expect this because it has to set attributes on the dom element one "frame" at a time. I'm any JavaScript-style animations will do the same.

ykey
18 Nov 2011, 12:06 PM
Is it possible for these attributes to be cleaned up when the animation is over?

tobiu
18 Nov 2011, 1:24 PM
it should be. you can create a callback-function for the animation, the get the animated element and inspect it / its dom in the console to see what can get removed.