Volver al Blog
Manual

La Línea de Tiempo: Keyframes, Extender Fotogramas y Control de Timing

Entiende el panel Timeline de Brinimate — cómo insertar keyframes (F6), extender fotogramas (F5), controlar el timing y estructurar animaciones multicapa como un profesional.

L

LuisOA

Equipo Brinimate

La Línea de Tiempo: Donde Ocurre la Magia

La Línea de Tiempo es el corazón de toda animación. Es donde le dices a Brinimate cuándo debe aparecer un objeto, cuánto tiempo debe permanecer y cuándo debe cambiar. Entender la Timeline en profundidad es la habilidad más importante en la producción de animaciones.


🎬 Conceptos Clave

Antes de tocar los botones, entiende estos términos:

TérminoDefinición
Fotograma (Frame)Una sola “foto” en tu animación. A 24 FPS hay 24 fotogramas por segundo.
Keyframe (F6)Un fotograma donde defines manualmente una pose o estado específico de un objeto.
Extender Fotograma (F5)Copia el contenido del keyframe anterior hacia adelante, manteniendo el dibujo sin cambios.
Capa (Layer)Una fila en la Timeline. Cada objeto o grupo vive típicamente en su propia capa.
TweenFotogramas intermedios automatizados calculados por Brinimate entre dos keyframes.

🕹️ El Panel del Timeline

El Timeline está en la parte inferior del editor. Contiene:

  • Lista de capas (columna izquierda): Nombres de todas tus capas. Doble clic para renombrar.
  • Pista de fotogramas (área derecha): La pista horizontal donde viven los fotogramas y keyframes.
  • Cabezal de reproducción: La línea vertical que indica el fotograma actual.
  • Controles de reproducción: Play, Pausa, rebobinar, establecer rango de bucle.

En móvil, el Timeline se abre como un panel inferior y usa celdas más grandes para precisión táctil. Las filas de botones largos se envuelven automáticamente para que nada caiga fuera de pantalla.


📍 Insertar un Keyframe (F6)

Un keyframe captura el estado actual de la capa en un número de fotograma específico.

Para insertar:

  1. Haz clic en el número de fotograma donde quieres el keyframe (en la pista de la capa).
  2. Presiona F6 o clic derecho → Insertar Keyframe.
  3. Aparece un pequeño diamante relleno en ese fotograma.
  4. Ahora dibuja o modifica tu objeto — ese estado queda “bloqueado” en este keyframe.

Regla general: Cada vez que tu objeto necesite estar en una posición, tamaño, rotación o apariencia diferente, añade ahí un nuevo keyframe.


↔️ Extender un Fotograma (F5)

A veces no quieres que un objeto cambie — solo quieres que permanezca en pantalla más tiempo. Para eso es F5.

Para extender:

  1. Haz clic en cualquier fotograma después de tu último keyframe.
  2. Presiona F5 o clic derecho → Extender Fotograma.
  3. El dibujo del keyframe anterior aparece en todos los fotogramas hasta ese punto.

Ejemplo: Tu personaje dibuja su mano del fotograma 1 al 10. Luego quieres que la mano se mantenga quieta del fotograma 10 al 30. Haz clic en el fotograma 30 y presiona F5. Listo.


🎞️ Animación Multicapa

Las animaciones reales tienen múltiples capas:

  • Fondo (estático o de movimiento lento)
  • Cuerpo del personaje
  • Brazos del personaje (capas separadas para izquierdo/derecho)
  • Cabeza del personaje
  • Props y efectos al frente

Cada capa tiene su propia pista de timeline independiente. Esto significa:

  • El fondo puede permanecer en “hold” F5 mientras el personaje hace un ciclo de caminata complejo encima.
  • Puedes silenciar o bloquear capas individuales sin afectar a las otras.

Consejo: Nombra tus capas de forma descriptiva desde el principio. brazo_izq, brazo_der, parpadeo_ojo, nubes_fondo — esto hace manejable navegar una escena de animación con 50 capas.


⏱️ Tasa de Fotogramas y Timing

La sensación general de tu animación depende de cuándo colocas los keyframes:

  • Keyframes muy juntos (1-3 fotogramas de separación): Acción rápida y dinámica.
  • Keyframes más separados (8-12 fotogramas de separación): Movimiento lento y con peso.
  • Holds F5 en el medio: El personaje “pausa” — ideal para momentos de diálogo o contemplación.

Un ciclo de caminata clásico en Brinimate:

  • Fotograma 1: Pie izquierdo al frente.
  • Fotograma 6: Pie derecho al frente.
  • Fotograma 12: De vuelta al pie izquierdo (punto de bucle).

Ponlo en bucle y tendrás una caminata fluida para siempre.


💡 Consejo de Pro: Planifica tu animación en papel antes de tocar el timeline. Dibuja una “hoja de exposición” (o X-sheet) aproximada — una tabla que lista qué pasa en cada fotograma clave para cada capa. 10 minutos de planificación ahorran 2 horas de eliminar y reinsertar keyframes. Incluso los animadores experimentados hacen esto.

Aprende ahora cómo hacer que los objetos se muevan suavemente entre keyframes de forma automática en la guía de Motion Tween.