Realizando Animaciones a DiplayObjects en flex

Jurungando entre los excelentes componentes que se encuentran en Quietly Scheming encontramos una clase muy interesante, que permite realizar camibios a las propiedades X, Y, Width, Height, Alpha, entre muchas otras, de cualquier objeto Flex cuya clase implemente la interfaz IFlexDisplayObject.

Ustedes se preguntaran, ¿Qué hay de nuevo en esto?, pero la gran utilidad esta en la manera como esta clase raliza los cambios a estas propiedades, y es que, por ejemplo, cuando queremos pasar un objeto de un width determinado a otro, la clase se encarga de realizar efecto muy estilizado y vistoso mientras realiza la transicion entre el width original y el width deseado, y asi realiza con todaslas propiedaes.


El efecto se logra aplicando una funcion exponencial al cambio de la propida, asi q a medida que se acerca mas al valor final deseado, mas lento se realiza el cambio.

Para utilizar la clase debemos definir una funcion "generateLayout" y debemos pasarsela al objeto de tipo LayourAnimato, esta funcion va a realizar los cambios a las respectivas propiedades de nuestro LayoutTarget definido en la función. Un ejemplo de funcion sería:

public function generateLayout() : void
{
layoutTarget = layoutAnimator.targetFor(displayObject);
layoutTarget.x = Number(200);
layoutTarget.y = Number(300);
layoutTarget.unscaledWidth = Number(400);
layoutTarget.unscaledHeight = Number(600);
layoutTarget.alpha = Number(0.4);
}

Una vez construida esta funcion debemos llamar al metodo invalidateLayout(true) del objeto de tipo LayoutAnimator, en ese momento se iniciará el efecto para cambiar los valores del DisplayObject de su valor actual al nuevo valor deseado.

Tambien se puede especificar que velocidad queremos para la animacion con un numero del 0 al 1, siendo 1 el valo maximo de velocidad.

Una vez terminado el efecto, la clase dispara un evento de tipo AnimationEvent.ANIMATION_COMPLETE.

El codigo completo del proyecto lo pueden encontrar aqui, y el codigo de la aplicación principal seria el siguiente:

Código

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

 public var layoutAnimator : LayoutAnimator = new LayoutAnimator();
 public var layoutTarget : LayoutTarget;

public function init() : void
{
 layoutAnimator.layoutFunction = generateLayout;
}

public function generateLayout() : void
{
 layoutTarget = layoutAnimator.targetFor(panel1);
 layoutTarget.x = Number(txtx.value);
 layoutTarget.y = Number(txty.value);
 layoutTarget.unscaledWidth = Number(txtwidth.value);
 layoutTarget.unscaledHeight = Number(txtheight.value);
 layoutTarget.alpha = Number(txtalpha.value);
}

public function aplicarHandler() : void
{
 if(animatingPicker.selected) layoutAnimator.animationSpeed = animationSpeedPicker.value;
 else layoutAnimator.animationSpeed = 1;
 layoutAnimator.invalidateLayout(true);
}
]]>
</mx:Script>
<mx:Label x="124" y="297" text="y"/>
<mx:Label x="124" y="269" text="x"/>
<mx:Label x="10" y="297" text="Height"/>
<mx:Label x="10" y="323" text="Alpha"/>
<mx:Label x="10" y="269" text="Width"/>
<mx:HSlider x="54" y="329" width="133" maximum="1" minimum="0" snapInterval="0.1" id="txtalpha" value="1"/>
<mx:Canvas x="10" y="10" width="458" height="249" borderStyle="solid" borderThickness="3">
<mx:Panel id="panel1" x="10" y="10" width="263" height="107" layout="absolute" cornerRadius="11" clipContent="false">
 <mx:Label x="10" y="10" text="Internet Developing" height="29" fontSize="20"/>
 <mx:Label x="10" y="36" text="http://internetdeveloping.blogspot.com/"/>
</mx:Panel>
</mx:Canvas>
<mx:Button x="195" y="321" label="Aplicar" click="aplicarHandler()"/>
<mx:Label x="278" y="269" text="Animation Speed"/>
<mx:NumericStepper id="animationSpeedPicker" x="386" y="267" width="58" stepSize="0.05" maximum="1" minimum="0.1" value="0.1"/>
<mx:CheckBox id="animatingPicker" x="278" y="295" label="Animating" selected="true"/>
<mx:NumericStepper id="txtheight" x="59" y="295" width="58" stepSize="1" maximum="249" minimum="10" value="107"/>
<mx:NumericStepper id="txtx" x="140" y="267" width="58" stepSize="1" maximum="450" minimum="5" value="10"/>
<mx:NumericStepper id="txty" x="140" y="295" width="58" stepSize="1" maximum="240" minimum="5" value="10"/>
<mx:NumericStepper id="txtwidth" x="58" y="267" width="58" stepSize="1" maximum="458" minimum="10" value="263"/>

</mx:Application>

Ejemplo