|
LibUIGL
3.17.5
|
Una animación o línea de tiempo consta de una serie de fotogramas que definen cambios en atributos visuales, y que pueden ejecutarse o bien manualmente desde la aplicación, o de forma automática en respuesta a eventos en la interfaz.
Cada animación tiene una duración concreta y opcionalmente una función easing, que define diferentes curvas de velocidad, como desaceleración, rebote, etc. Puede ser linear (sin efecto), o una de las 30 funciones predefinidas en [https://easings.net/]()
El elemento timeline define la estructura básica de la animación. La duración puede indicarse de dos formas:
duration, que indica el tiempo en milisegundos<keyframe>. La duración coincide con el instante del último keyframe.| 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 |
loop | hace que la animación se repita | true o false (por defecto) |
El elemento keyframe define cada uno de los puntos de animación. Debe estar obligatoriamente dentro de un elemento <timeline>, no pueden definirse fuera.
| Atributo | Descripción | valores |
|---|---|---|
time | instante en el tiempo | valor absoluto en ms, o porcentaje (0%-100%) |
command | comando a ejecutar (opcional) | CMD_START para iniciar animación secundaria |
param1 | primer parámetro para command | nombre de la animación <timeline> a iniciar |
param2 | segundo parámetro para command | nombre del control que iniciará la animación |
Si no se especifica el atributo time, se asume que es el último frame de animación.
Por defecto, el valor de los atributos se establece tal como se indica. No obstante hay veces en las que es interesante definir un atributo en relación al valor que ya tiene en el momento de iniciar la animación. En este caso, debe anteponerse el signo + o - al valor del atributo.
Define una animación de 250 ms, donde el tamaño pas al 120% y establece el color naranja. Usa animación con efecto rebote:
Desplaza el control 15 píxeles hacia arriba desde su posición inicial, y aclara un poco el color:
Define una animación de aparición (fade-in), y otra en la que aplica progresivamente dicho fundido a una serie de controles en una escena:
1.8.18