Tema 3: Tiempo de Vida - Triggers y Animación Web

Tema 3: Tiempo de Vida - Desarrollo de Recursos Animados para Web

• El enfoque es el concepto de activadores (triggers)
• Se examinarán las funciones de aceleración y los tiempos adecuados de duración.

3.1 Introducción y Objetivos

• Se responderán ciertas preguntas a lo largo de este tema.
• ¿Cómo y cuándo se inicia una animación?
• ¿Cuánto tiempo debe durar?
• ¿Si tienen la misma duración se reproducen igual?
• Los objetivos son:
• Comprender el funcionamiento de los "triggers"
• Conocer las funciones de aceleración disponibles en el navegador
• Mostrar los conceptos de tiempos correctos de duración
• Conocer las propiedades de "opacity", "color", y "background" de CSS

3.2 Triggers

• Se consideran dos tipos de animaciones
• Las que se repiten en bucle
• Las se ejecutan después de un evento
• Triggers que inician una animación pueden ser:
• Generados por el navegador via interacciones del usuario
• Generados por el sistema (llamadas asíncronas, temporizadores, web sockets)
• La elección de cada disparador es vital para la comprensión de los efectos
• Pseudoclases CSS usadas como disparadores:
  • :hover: Se dispara dos veces, al posicionar el ratón sobre un elemento (activación) y al salir (desactivación).
  • :focus: En botones o elementos de formulario. Dispone de activación y desactivación.
  • :checked: Se usa para evitar el uso de JavaScript en checkboxes, radios u options.
• Modificar clases en HTML puede iniciar o eliminar animaciones.
• Eventos de JavaScript como disparadores:
  • Clic: Permite detectar el clic, añadir o eliminar clases y controlar o animar elementos.
  • Scroll: Requiere conocimiento avanzado de JavaScript y puede usar la API de Intersection Observer.
• Llamadas asíncronas de JavaScript, para añadir elementos de carga sin interacción del usuario.

Ciclo de Vida de los Triggers

• Selección de objeto (getElementByld, querySelector, querySelectorAll)
• Subscripción a evento (addEventListener, removeEventListener)
• Asignar acción (classList.add, classList.remove, classList.toggle)

3.3 Aceleración

• La propiedad "transition" permite ajustar la aceleración
• Funciones de "easing" o aceleración producen efectos de suavizado o brusquedad mediante funciones matemáticas.
• En CSS hay cinco valores o funciones de "easing":
  • Linear: Animaciones sin aceleración, valor aumenta en cantidades iguales.
  • Ease: Curva asimétrica de aceleración y desaceleración.
  • Ease-in: Curva de aceleración, con inicio lento y final rápido.
  • Ease-out: Curva de desaceleración, con inicio rápido y final lento.
  • Ease-in-out: Curva simétrica de aceleración-desaceleración, con inicio y final lentos.
  • Steps(n,<tipo de salto>): Realiza "n" saltos en lugar de ser fluida.
    • Jump-start: Incluye salto en el 0%.
    • Jump-end: Incluye salto en el 100%.
    • Jump-both: Incluye salto en 0% y 100%.
    • Jump-none: No incluye salto en 0% ni 100%.
  • "Cubic-bezier(x1, y1, x2, y2)": Permite una aceleración personalizada.
• Curvas de Bézier
  • Curvas de Bézier son para el trazado técnico, con nodos P0 y P1 definiendo la curvatura.
  • Se puede expresar cualquier curva de "ease" con una curva de Bézier.
• Librerías de JavaScript para curvas personalizables
  • Dos desarrolladores web, Andrey Sitnik e Ivan Solovev, crearon funciones de aceleración populares para simular objetos reales.

3.4 Tiempos Adecuados

• Deben ser adecuadas y tener una duración correcta para la usabilidad
• Un tiempo muy corto es agresiva y un tiempo muy largo aburrida.
• El intervalo más común es de 100 ms a 500 ms.
• Puede variar según la función de easing y si incluye rebotes.
• Se pueden usar dos tiempos diferentes para la entrada y la salida
• Material Design establece tres tiempos según el tamaño:
• Pequeño: 100 ms (botones)
• Medio: 250 ms (entrada), 200 ms (salida) (pop up, toast)
• Grande: 300 ms (entrada), 250 ms (salida) (cambio de página, modal)
• Es importante añadir tiempo de animación para no tener errores con el ratón para acceder a enlaces, botones etc.
• La selección de tiempo es dependiente las interacciones
• Los cambios de color se efectuarán en 0.1 segundos
• Los cambios de iconos se efectuarán en 0.2 segundos.
• La aparición de modales empleará 0.1 segundos en crear un oscurecimiento de la pantalla y 0.2 segundos en mostrar el cuadro informativo.
• Las micro-animaciones de cambio de estado serán de 0.15 segundos.
• Los cambios lentos de valor serán de 0.4 segundos, etc.

3.5 Propiedad: Opacity

• Permite modificar la transparencia de un elemento y su contenido
• Valores entre 0 (transparente) y 1 (visible).

3.6 Propiedad: Color

• Modidica el color de los textos
• Los valores permitidos son:
• Lista de nombres (140 colores soportados)
• Valor hexadecimal (#RRGGBB o #RRGGBBaa)
• Función rgb() o rgba() (rojo, verde, azul, alpha)
• Función hsl() o hsla() (tono, saturación, luminosidad, alpha)
• Palabras clave (currentColor, transparent)
• Función hwb (futura función, tono, blanco, negro)
• El navegador transforma el color en coordenadas numéricas para aplicar las funciones de easing.
• Evitar el color transparente puede ocasionar problemas de animación, por lo tanto, se suele utilizar un hack o truco para poder realizar la transición.

3.7 Propiedad: Background

• Permite establecer propiedades sobre el fondo
• La propiedad abre 8 propiedades
• Background-attachment: Determina la posición de la imagen al hacer scroll
• Background-color: Especifíca el color del fondo
• Background-clip: Determína hasta donde se puede extender el fondo
• Background-image: Especifica una o más imágenes de fondo
• Background-origin: Determina el área de una imágen de fondo
• Background-position: La imágen inicial
• Background-repeat: La forma en la que se repiten las imágenes
• Background-size: El tamaño que ocupará la imagen

Importante tener en cuenta:

• Solo se pueden animar propiedades numéricas como background-color, background-position, background-size.