==== Animaciones en Grupos ====
\\
^ Definir animación en el Grupo                                                                                                                       ^
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_group:#start:En la declaración del Grupo|En la declaración del Grupo]]      |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_group:#start:A través de función showGroup|A través de función showGroup]]  |
\\
\\
=== En la declaración del Grupo ===


Para definir las animaciones en los Grupos se definirán en la declaración de las cabeceras a través de los atributos **animation-in** y **animation-out** definiendo el efecto que le queramos dar:

\\
 
<code xml>
  <group name="General" id="1" height="100%" animation-out="animación de salida" animation-in="animación de entrada" >
  <frame name="frmFlotante" floating="true" top="300px" left="200px" width="600px" height="300px" class="FrameAnimateFromRight" >
</code>  

\\
Ejemplos:
\\
<WRAP center round box 60%>
{{ :b.-programacion:animaciones.gif?nolink |}}
</WRAP>
<code css>
.FrameAnimateFromTop
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por arriba. */
	animation-in:##PUSH_DOWN_IN##;		/* Aparece por arriba */
	animation-out:##PUSH_OUT##;		/* Se va por arriba */
}

.FrameAnimateFromBottom
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por abajo. */
	animation-in:##PUSH_IN##;		/* Aparece por abajo */
	animation-out:##PUSH_DOWN_OUT##; 	/* Se va por abajo */
}

.FrameAnimateFromRight
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por la derecha. */
	animation-in:##RIGHT_IN##;
	animation-out:##LEFT_OUT##;
}

.FrameAnimateFromLeft
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por la izquierda. */
	animation-in:##LEFT_IN##;
	animation-out:##RIGHT_OUT##;
}

.FrameAnimateRotate3D
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale rotando en 3D. */
	animation-in:##ROTATE3D_IN##;
	animation-out:##ROTATE3D_OUT##;
}

.FrameAnimateAlpha
{
	animation-in-delay:500;
	animation-out-delay:500;

	/* Aparece y desaparece;. */
	animation-in:##ALPHA_IN##;
	animation-out:##ALPHA_OUT##;
	
	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;
}

.FrameAnimateZoom
{
	animation-in-delay:500;
	animation-out-delay:500;

	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;	
}
</code>
\\
=== A través de función showGroup ===

\\ 
Se llama a la función dentro de un nodo. Cumple las mismas macros que el script. También puedes ocultar la ventana de espera que sea por defecto en la ejecución de los script para que el efecto sea más limpio. \\
\\  

<note tip>Para utilizarse, declarar en la cabecera del nodo de script los siguientes atributos:
 
 **show-wait-dialog**="false" **refresh**="false"</note>

\\
Eso permite que no se muestre el diálogo de espera y que tampoco se refresque la pantalla. Ya lo hará la animación de forma automática.
\\
\\
**Ejemplo:**
\\
<code xml>
<button1_Click show-wait-dialog="false" refresh="false">
	<action name="runscript">
		<script language="javascript">
			ui.showGroup ("3","##ROTATE3D_IN##",1000,"##ROTATE3D_OUT##",1000);
		</script>
	</action>
</button1_Click>
</code>