LibUIGL  3.17.5
Transiciones

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>