Anyone know how to animate the size/position of child elements of a layout in Flex 4 ?
Example:
I have a list component with a custom layout. I want when I change the positions of the child elements I want them to animate their move to the new positions.
There is currently no built in way, nor plans, to make animated layouts in Flex 4 :/.
What I've done to make this happen is to animate the setting of "setLayoutBoundsPosition" and "setLayoutBoundsSize" in the layout. So instead of creating a "Move" and "Resize" effect for each item in the layout, which would actually set the width and height explicitly, set the matrix. Then make sure the layout isn't invalidated again (which will happen if you set the width/height directly), or you might start getting an infinite loop. You might have to do some tricks to get this to work right (I haven't got it to work quite right with the Spark Effects, but it's really easy to do with Tweener/Tweenmax, since they have plugins and such to use "setActualSize" or "setLayoutBoundsSize", etc.).
I use TweenMax to animate layouts, and they have a few plugins to make this easy. TweenMax visibly looks like 3x faster (20 fps vs 7fps) than Spark Effects, too, so I'd go with that. It looks something like this, in the updateDisplayList method of your layout.
TweenMax.to(child, duration, {setLayoutBoundsPosition:{x:childX * i, y:childY * i}});
BUMP.
Just like you would normally...
public override function updateDisplayList(width:Number, height:Number) : void {
for (var i:uint = 0; i < target.numElements; i++)
{
var resizeElement:Resize = new Resize(target.getElementAt(i) as IVisualElement);
resizeElement.widthTo = 500;
resizeElement.play();
}
}