Términos de animación, explicados con claridad.
Las palabras que vas a encontrar al llevar animación de personajes a apps y a la web.
- Alfa de 1 bit
- Transparencia en la que cada píxel es totalmente opaco o totalmente transparente, como en GIF. Los bordes suaves con antialiasing se ven dentados o muestran un halo. Guía
- Animación en reposo (idle)
- El loop tranquilo y de poco movimiento que reproduce un personaje cuando no pasa nada más, como respirar o parpadear. Mantiene al personaje vivo en pantalla sin distraer del contenido. Guía
- AnimatedVectorDrawable
- El formato integrado de Android para animar gráficos vectoriales. La splash screen de Android 12+ acepta uno como ícono, y Google recomienda que esa animación dure 1000 ms o menos en teléfonos. Guía
- Archivo .riv
- El formato de exportación binario y compacto de Rive. Un .riv puede contener artboards, animaciones y máquinas de estados, y se reproduce con una librería de runtime de Rive; no necesitas el editor de Rive para reproducirlo ni controlarlo en una app. Guía
- Blend (transición)
- Una transición que mezcla dos animaciones durante un tiempo determinado en lugar de cortar de una a otra, para que el personaje pase suavemente de un estado al siguiente. Los blend states también pueden mezclar varias animaciones según un valor numérico. Guía
- Bodymovin
- El plugin de Adobe After Effects que exporta composiciones como JSON de Lottie. Es el puente tradicional entre una línea de tiempo de After Effects y un reproductor Lottie en una app o sitio web. Guía
- Bumper
- Un clip breve que marca una pausa entre un programa y lo que sigue. Los anuncios bumper de YouTube, un formato relacionado, duran hasta 6 segundos. Guía
- Canal alfa
- Un canal adicional de una imagen o video que almacena la opacidad de cada píxel, desde totalmente transparente hasta totalmente sólido. El alfa parcial es lo que permite que los bordes suaves y las sombras se integren sin cortes sobre cualquier fondo. Guía
- Data Binding (view model)
- La forma más reciente de Rive de conectar los datos de la app con una animación. Un view model define propiedades tipadas, como números, cadenas, enums, colores, listas, imágenes y triggers, a las que se vincula el archivo, y reemplaza los inputs de la máquina de estados en proyectos nuevos. Guía
- Deformación de malla
- Doblar una imagen fijándola a una cuadrícula de puntos y moviendo esos puntos, en lugar de redibujarla. Permite que un arte rasterizado, como un logo en PNG, se doble y flexione conservando sus píxeles originales. Guía
- dotLottie (.lottie)
- Un formato contenedor comprimido, con licencia MIT, mantenido por LottieFiles. Un solo archivo .lottie puede empaquetar varias animaciones Lottie, recursos compartidos, temas y máquinas de estados interactivas. Guía
- Emote
- Una pequeña imagen de chat asociada a un código de texto. En Twitch, los emotes animados son GIF cuadrados de 28, 56 y 112 px con un máximo de 60 fotogramas. Guía
- GIF
- Un formato de imagen con décadas de antigüedad que admite animación simple. Cada fotograma está limitado a una paleta de 256 colores y a un solo color totalmente transparente, por eso los GIF muestran bandas de color, tienen bordes dentados y suelen pesar mucho más que un video equivalente. Guía
- HEVC (H.265)
- Un códec de video que comprime mejor que H.264. Apple añadió HEVC con alfa en iOS 13 y macOS Catalina, y Safari lo usa para reproducir video con fondo transparente, normalmente guardado en un .mov con la etiqueta
hvc1. Guía - Ícono adaptable
- El formato de ícono del launcher de Android: capas de primer plano y de fondo de 108 x 108 dp, más una capa monocromática opcional, que el dispositivo recorta según su forma con una zona segura de 66 x 66 dp. Los efectos de movimiento los genera el launcher. Guía
- Ícono alternativo de la app
- Un set de íconos adicional incluido en una app al que el usuario puede cambiar en tiempo de ejecución, con setAlternateIconName en iOS o entradas activity-alias en Android. Cambia imágenes fijas y no puede animarse. Guía
- Ícono temático (monocromático)
- Un ícono de Android 13+ que se tiñe según el fondo de pantalla y el tema del usuario, usando la capa monocromática del ícono adaptable. Guía
- Input de la máquina de estados
- Un valor con nombre que tu código establece para controlar una máquina de estados de Rive. Hay tres tipos de inputs: número, booleano y trigger. Rive ahora considera los inputs un sistema heredado y recomienda Data Binding para proyectos nuevos, aunque los archivos existentes siguen funcionando. Guía
- Liquid Glass
- El material de diseño de Apple, que el sistema aplica a los íconos de app por capas en forma de brillos, refracción y translucidez. Las apps no pueden programarlo y no sirve para animar un ícono. Guía
- Logo reveal
- Movimiento que va construyendo un logo y termina en él, normalmente al inicio de un video. No tiene una definición formal, así que el término se usa a menudo para cualquier intro de logo. Guía
- Logo sting
- Una animación de logo de marca muy corta, de unos pocos segundos como máximo y a menudo acompañada de un efecto de sonido breve, que se usa como identificador de marca o como transición entre segmentos. Guía
- Loop vs reacción puntual
- Un loop se repite mientras su estado esté activo, como reposo (idle) o carga. Una reacción puntual se reproduce una vez en respuesta a un evento, como éxito o error, y luego vuelve al loop actual. Guía
- Lottie
- Un formato de animación abierto y un conjunto de reproductores para web, iOS, Android, React Native y Windows que renderizan animaciones de After Effects exportadas como JSON. Con las máquinas de estados de dotLottie, creadas en Lottie Creator, los archivos Lottie también pueden ser interactivos. Guía
- Máquina de estados
- Lógica guardada dentro de un archivo de animación que conecta estados, como reposo (idle), carga y éxito, mediante transiciones. El código de la app cambia valores y la máquina de estados decide qué animación se reproduce y cómo se funde con la siguiente. Guía
- Mascota
- Un personaje que representa a una marca o producto. En las apps, una mascota de marca animada suele encarnar estados del producto como la carga, las pantallas vacías, el éxito y los errores, y da a la respuesta visual una personalidad coherente. Guía
- MOV
- El formato contenedor QuickTime de Apple. En la web se usa sobre todo para entregar video HEVC con alfa a Safari; en las herramientas de edición suele contener másteres ProRes. Guía
- MP4 apilado
- Un video H.264 común con la imagen a color y una máscara alfa en escala de grises empaquetadas en un mismo fotograma. Un reproductor personalizado las recombina, así que simula transparencia donde MP4 no la tiene. Guía
- Pantalla de inicio
- La pantalla estática que muestra iOS mientras se inicia una app. Se define en Info.plist o en un storyboard sin código personalizado, así que no puede animarse; Apple recomienda que se vea casi idéntica a la primera pantalla de la app. Guía
- playsinline
- Un atributo de
<video>que permite a Safari en iPhone reproducir un video dentro de la página en lugar de pasar a pantalla completa. Junto conautoplayymuted, es necesario para loops integrados tipo GIF en iOS. Guía - PNGtuber
- Un avatar de streamer hecho con imágenes PNG que cambian o se sacuden cuando el software de PNGtuber detecta el micrófono. Reacciona a la voz; no es una animación riggeada. Guía
- Política de reproducción automática
- Reglas del navegador que deciden cuándo un contenido multimedia puede empezar sin una acción del usuario. La reproducción automática silenciada suele estar permitida; el video con sonido normalmente requiere una interacción previa del usuario, y
play()devuelve una Promise que se rechaza cuando se bloquea. Guía - prefers-reduced-motion
- Una media feature de CSS con los valores
no-preferenceyreduceque refleja el ajuste Reducir movimiento del sistema operativo del usuario. Los sitios la usan para reemplazar movimientos grandes y loops por una pose estática o un fundido. Guía - ProRes 4444
- Un códec de edición de Apple que almacena color de alta calidad más un canal alfa. Es un buen máster para animación transparente, pero sus archivos pesan demasiado para servirlos en un sitio web, así que a partir de él codificas WebM y HEVC. Guía
- Rig de huesos
- Una jerarquía de huesos fijada al arte, de modo que al rotar o mover un hueso se deforman las partes conectadas. Los rigs permiten posar y animar personajes y logos sin dibujar cada fotograma. Guía
- Rive
- Una herramienta de animación interactiva formada por un editor de diseño y runtimes de código abierto con licencia MIT para web, React, plataformas de Apple, Android, Flutter y React Native. Las animaciones se exportan como archivos .riv que pueden reaccionar al estado de la app mediante una máquina de estados (state machine). Guía
- SplashScreen API
- La splash screen del sistema de Android, introducida en Android 12 y disponible en versiones anteriores mediante
androidx.core:core-splashscreen. Muestra el ícono de tu app, que puede estar animado, sobre un color de fondo mientras la app se inicia. Guía - Squash and stretch (aplastar y estirar)
- Un principio clásico de animación en el que una forma se comprime al impactar y se alarga en movimientos rápidos sin perder su volumen. Hace que incluso un logo rígido se sienta elástico y con vida. Guía
- Tipografía cinética
- Animación en la que se mueven letras o palabras individuales, por ejemplo, apareciendo como si se escribieran o cayendo en cascada. Requiere texto editable o formas vectoriales separadas, no una imagen plana del logo. Guía
- Trigger
- Un input de la máquina de estados sin valor almacenado. Al dispararlo se produce una transición puntual, por lo que es ideal para reacciones momentáneas como éxito, error, sí o no. Guía
- Video generativo a partir de imagen
- Modelos de IA que crean nuevos fotogramas de video a partir de una imagen de referencia y un prompt. Como cada fotograma se genera, los detalles de un personaje o logo pueden alejarse del original. Guía
- VP9
- Un códec de video abierto de Google, que suele guardarse en un archivo WebM. VP9 puede incluir canal alfa, que Chrome, Edge y Firefox muestran como transparencia; Safari reproduce VP9 pero ignora el alfa. Guía
- WCAG 2.2.2 Pausar, detener, ocultar
- Un criterio de accesibilidad de nivel A: el contenido en movimiento o parpadeante que empieza automáticamente, dura más de cinco segundos y aparece junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo, salvo que sea esencial. Guía
- WebM
- Un contenedor multimedia abierto para la web, que normalmente contiene video VP8, VP9 o AV1. Un WebM VP9 con alfa es la forma estándar de servir video con fondo transparente a navegadores Chromium y Firefox. Guía