Animaciones hover

Las animaciones hover se aplican a elementos IMAGE_BUTTON cuando el cursor pasa sobre ellos. Cada tipo tiene su propio comportamiento y parámetro de intensidad.

Cómo se usan

- id: "mi-boton"
  type: IMAGE_BUTTON
  x: 0
  y: 0
  width: 64
  height: 64
  properties:
    texture: "eventui:textures/ui/btn.png"
    hover_animation: "zoom_in"              # tipo de animación
    hover_animation_intensity: "1.15"       # intensidad (varía por tipo)
    hover_animation_duration: "200"         # duración en ms (default: 200)
    hover_animation_easing: "ease_out"      # curva de aceleración
    action: "open:mi-pantalla"

Curvas de aceleración — easing

Controlan cómo progresa la animación en el tiempo:

Tipos disponibles

Detalles por tipo

zoom_in y zoom_out

Ambas usan la misma lógica de escala. La diferencia es que zoom_out usa el complemento de la intensidad (2.0 - intensity) para encoger en lugar de crecer.

# Crece un 5% — efecto muy sutil, ideal para botones pequeños
hover_animation: "zoom_in"
hover_animation_intensity: "1.05"

# Crece un 15% — efecto notorio
hover_animation: "zoom_in"
hover_animation_intensity: "1.15"

# Crece un 20% — efecto pronunciado
hover_animation: "zoom_in"
hover_animation_intensity: "1.20"

shake

La vibración es horizontal y se amortigua progresivamente — empieza fuerte y termina en reposo. El patrón sigue una función sin(progress × π × 6) × intensity × (1 - progress).

# Vibración ligera (2px)
hover_animation: "shake"
hover_animation_intensity: "2.0"

# Vibración fuerte (5px) — útil para botones de peligro o alerta
hover_animation: "shake"
hover_animation_intensity: "5.0"

bounce

El salto sigue un arco sinusoidal (|sin(progress × π)| × intensity × 3). El elemento sube y vuelve exactamente a su posición original.

# Rebote suave
hover_animation: "bounce"
hover_animation_intensity: "1.5"

# Rebote alto
hover_animation: "bounce"
hover_animation_intensity: "3.0"

rotate

Gira el elemento desde 0° hasta el ángulo indicado. La rotación es permanente mientras el cursor está encima — no oscila de vuelta.

# Rotación de 15° — efecto inclinado
hover_animation: "rotate"
hover_animation_intensity: "15"

# Rotación de 360° — vuelta completa lenta
hover_animation: "rotate"
hover_animation_intensity: "360"
hover_animation_duration: "800"

swing

Oscilación continua mientras el cursor está encima. A diferencia de rotate, no para — el elemento sigue oscilando mientras el hover esté activo. La fórmula usa el tiempo del sistema (sin(time × 0.003) × intensity × 15°).

float

Flotación vertical continua y suave mientras el cursor está encima. Basada en el tiempo del sistema (sin(time × 0.002) × intensity × 5px). Ideal para logotipos o elementos decorativos que quieras que "respiren".

wave

Movimiento ondulante en ambos ejes simultáneamente con frecuencias levemente distintas en X e Y, lo que genera una trayectoria orgánica no repetitiva a corto plazo.

heartbeat / pulse

Ambos nombres apuntan al mismo tipo. Pulso de escala continuo basado en el valor absoluto de un seno (|sin(time × 0.004)| × intensity × 0.1). La escala máxima real es 1.0 + intensity × 0.1.

# Pulso muy sutil — como un corazón latiendo
hover_animation: "heartbeat"
hover_animation_intensity: "1.0"   # escala máx ≈ 1.10

# Pulso pronunciado
hover_animation: "heartbeat"
hover_animation_intensity: "3.0"   # escala máx ≈ 1.30

jelly

Deformación elástica que comprime el eje X mientras expande el Y y viceversa, creando el efecto de una gelatina. Usa la misma frecuencia en ambos ejes pero signos opuestos. La deformación máxima real es intensity × 0.1.

spin_3d

Gira el elemento en el eje Y (como una tarjeta dando vuelta) usando una transformación 3D (Axis.YP.rotationDegrees). La velocidad depende del tiempo y la intensidad (time × intensity × 0.1 mod 360°). Mientras mayor la intensidad, más rápido gira.

glow

El único tipo que no modifica la transformación del elemento — en su lugar renderiza un halo dorado (#FFD700) de 3px alrededor. El brillo aparece y desaparece gradualmente con un fade de 0.05 por frame. Se puede combinar con cualquier otro tipo:

# Separados por coma — zoom_in se aplica, glow se renderiza encima
hover_animation: "zoom_in,glow"
hover_animation_intensity: "1.1"

Tabla de referencia rápida