Transiciones

Tabla de contenidos

• Elemento <transition>
• Sub-elemento <frame_leave>
• Sub-elemento <frame_enter>
• Ejemplos

Una transición es una animación entre dos escenas: la actual desaparece para dar paso a la nueva, cargada con la función GUI_SetScene(), de forma suave. Las propiedades visuales del estado inicial de la escena que entra, y los finales de la escena que sale son configurables, así como la duración o la función easing aplicada (ver [https://easings.net/]()).

Una transición comparte muchas similitudes con una animación, pero en vez de aplicarse a un control, se aplica a la totalidad de la escena.

Elemento <transition>

El elemento <transition> define una transición. Acepta los siguientes atributos:

Atributo	Descripción	valores
duration	duración total de la animación	número de milisegundos
easing	nombre de la función easing	Por defecto QuadraticOut
bgcolor	color de fondo	formato de color html #RRGGBB, por defecto negro
background	imagen de fondo	nombre de elemento <image> o nombre de archivo

Sub-elemento <frame_leave>

El elemento <frame_leave> define los atributos finales de la escena que se marcha. Los atributos comunes que pueden definirse son: left, top, width, height, scale, angle, opacity, color. Debe aparecer anidado dentro de un elemento <transition>.

Sub-elemento <frame_enter>

El elemento <frame_enter> define los atributos iniciales de la escena que entra. Los atributos comunes que pueden definirse son los mismos que en <frame_leave>. De igual modo debe aparecer anidado dentro de un elemento <transition>.

Ejemplos

A continuación se muestran varios ejemplos de transiciones

<!-- fundido de 750 ms de la nueva escena sobre la antigua, no se mueven -->
<transition name="crossfade" duration="750">
    <frame_enter opacity="0%" />
</transition>
 
<!-- zoom de la escena que entra sobre la que sale que se amplía y desvanece -->
<transition name="zoom_in" duration="500">
    <frame_leave scale="500%" />
    <frame_enter scale="20%" opacity="0%" />
</transition>
 
<!-- desplazamiento simple hacia la izquierda -->
<transition name="next" duration="500" >
    <frame_leave left="-100%"/>
    <frame_enter left="100%"/>
</transition>
 
<!-- cubo que gira y rebota hasta estabilizarse -->
<transition name="box_bounce" duration="900" easing="BounceOut">
    <frame_leave width="0%" opacity="20%"/>
    <frame_enter left="100%" width="0%" opacity="20%"/>
</transition>