Animaciones a nivel de Frame


De la misma manera que se han implementado las animaciones para Colecciones y Grupos, también se han implementado animaciones a nivel de frames.

Estas se habilitan definiendo los atributos animation-in y animation-out en la declaración del frame, que pueden tomar los valores siguientes:

Efectos Valor del Atributo animation_in/out
Entrada/Salida desde arriba “##PUSH_DOWN_IN##” o “##PUSH_OUT##”
Entrada/salida desde abajo “##PUSH_IN##” o “##PUSH_DOWN_OUT##”
Entrada/salida por la izquierda “##LEFT_IN##” o “##RIGHT_OUT##”
Entrada/salida por la derecha “##RIGHT_IN##” o “##LEFT_OUT##”
Rotación 3D “##ROTATE3D_IN##” o “##ROTATE3D_OUT##”
Efecto de ZOOM “##ZOOM_IN##” o “##ZOOM_IN##”
Aparece/Desaparece “##ALPHA_IN##” o “##ALPHA_OUT##”



Entrada/Salida desde arriba

Atributo Valor del atributo
animation_in / animation_out “##PUSH_DOWN_IN##” o “##PUSH_OUT##” 
<frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_DOWN_IN##" animation-out="##ROTATE3D_OUT##">


Entrada/Salida desde abajo

Atributo Valor del atributo
animation_in / animation_out “##PUSH_IN##” o “##PUSH_DOWN_OUT##” 
<frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">


Entrada/salida por la izquierda

Atributo Valor del atributo
animation_in / animation_out “##LEFT_IN##” o “##RIGHT_OUT##” 
  <frame name="frmnuevochat" animation-in-delay="250" animation-out-delay="250" animation-out="##LEFT_IN##" disablevisible="MAP_VERFLOTANTE=0" bgcolor="#ffffff" modal="true" floating="true" top="0" left="0" width="100%" height="100%">


Entrada/salida por la derecha

Atributo Valor del atributo
animation_in / animation_out “##RIGHT_IN##” O “##LEFT_OUT##” 
 <frame name="frmnuevochat" animation-in-delay="250" animation-out-delay="250" animation-in="##RIGHT_IN##" animation-out="##LEFT_OUT##" disablevisible="MAP_VERFLOTANTE=0" bgcolor="#ffffff" modal="true" floating="true" top="0" left="0" width="100%" height="100%">


Rotación 3D

Atributo Valor del atributo
animation_in / animation_out “##ROTATE3D_IN##” o “##ROTATE3D_OUT##“ 
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">


Efecto de ZOOM

Atributo Valor del atributo
animation_in / animation_out ”##ZOOM_IN##” o “##ZOOM_IN##” 
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in="##ZOOM_IN##">
 


Aparece/Desaparece

Atributo Valor del atributo
animation_in / animation_out “##ALPHA_IN##” o “##ALPHA_OUT##” 
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in=""##ALPHA_IN##"">


Nótese que se hace uso en algunas animaciones del atributo animation-in-delay=“250” o animation-out-delay=“250” conjuntamente con el tipo de animación, este se utiliza para definir el tiempo que èsta se ejecuta.


Ejemplos de animaciones definidas en .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##;
 
}
 
.FrameAnimateZoom
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;	
}