Frames y Animación
Crea secuencias tácticas animadas con fotogramas: muestra la evolución de una jugada paso a paso.
Qué son los frames
Un frame (fotograma) es una instantánea del canvas en un momento concreto. Al encadenar varios frames y reproducirlos, obtienes una animación que muestra la secuencia completa de una jugada.
Cada frame guarda:
- La posición de todos los jugadores
- Las flechas y líneas dibujadas
- Las zonas y el material colocados
- El texto y las anotaciones
Ejemplo de uso
Supón que quieres explicar una jugada de ataque:
- Frame 1: Posición inicial, jugadores colocados, primera flecha de pase
- Frame 2: El balón se desplaza, un jugador se mueve a la banda
- Frame 3: Centro al área, delantero en posición de remate
Al reproducir, los jugadores se mueven suavemente entre las posiciones de cada frame.
La barra de frames
En la parte inferior del editor táctico está la barra de frames (Frame Strip). Contiene:
Controles de reproducción (centro)
| Control | Icono | Acción |
|---|---|---|
| Frame anterior | ⏮️ | Va al frame anterior |
| Reproducir / Detener | ▶️ / ⏸️ | Inicia o detiene la animación |
| Frame siguiente | ⏭️ | Va al frame siguiente |
Selector de velocidad
Junto a los controles hay un selector de velocidad de reproducción:
| Velocidad | Duración de transición | Pausa entre frames |
|---|---|---|
| 0.25x | 3600 ms | 1200 ms |
| 0.5x | 2700 ms | 900 ms |
| 1x (por defecto) | 1800 ms | 600 ms |
| 1.5x | 900 ms | 300 ms |
Usa 0.25x o 0.5x para explicar la jugada despacio. Usa 1.5x para una visión rápida del concepto.
Acciones de frame (derecha)
| Acción | Descripción |
|---|---|
| Añadir (+) | Duplica el frame actual y lo inserta después |
| Eliminar (🗑️) | Borra el frame actual (solo si hay más de uno) |
Añadir y duplicar frames
Añadir desde cero
Al abrir una pizarra nueva, tienes un Frame 1 por defecto. Diseña tu primera posición y luego:
- Pulsa Añadir en la barra de frames
- Se crea un Frame 2 que es una copia exacta del Frame 1
- Ahora puedes modificar las posiciones para el siguiente paso de la jugada
¿Por qué duplicar?
Duplicar el frame actual es intencional: evitas tener que volver a colocar todos los elementos desde cero. Solo ajustas lo que cambia entre un frame y otro.
Los frames nuevos se insertan después del frame actual. Si estás en el Frame 2 y añades, el nuevo Frame 3 se coloca entre el 2 y el 3 existente.
Navegar entre frames
Puedes navegar de varias formas:
| Método | Cómo |
|---|---|
| Botones anterior/siguiente | En la barra de frames |
| Clic en miniatura | Pulsa directamente sobre la miniatura de un frame |
| Teclado | Flecha izquierda (←) y flecha derecha (→) |
La miniatura del frame activo se destaca con un borde verde y una sombra.
Reproducir animación
Pulsa el botón Reproducir (▶️) o la tecla Espacio. La animación funciona así:
- Los elementos animables (jugadores, balón) se interpolan suavemente entre su posición en el frame actual y la del siguiente. La interpolación usa una curva
easeInOutCubicpara un movimiento natural. - Los elementos no animables (flechas, zonas, texto, material) cambian instantáneamente al llegar al siguiente frame.
- Después de cada transición, hay una pausa antes de pasar al siguiente frame.
- La animación se detiene automáticamente al llegar al último frame.
Elementos animables
| Tipo | Se anima |
|---|---|
| Jugador con dorsal | ✅ Posición interpolada |
| Jugador simple | ✅ Posición interpolada |
| Portero | ✅ Posición interpolada |
| Balón | ✅ Posición interpolada |
| Flechas | ❌ Cambio instantáneo |
| Zonas | ❌ Cambio instantáneo |
| Material | ❌ Cambio instantáneo |
| Texto | ❌ Cambio instantáneo |
Comportamiento de aparición/desaparición
- Si un jugador existe en el frame A pero no en el B, se desvanece (fade out) durante la transición
- Si un jugador aparece en el frame B pero no en el A, aparece gradualmente (fade in)
- Esto permite representar sustituciones, incorporaciones o salidas de jugadores
Guardar la pizarra
La pizarra se guarda automáticamente. No necesitas pulsar ningún botón de guardado.
Cada frame guarda:
id: identificador únicolabel: nombre del frame (Frame 1, Frame 2...)thumbnail: imagen en miniatura del frame (base64)konva: datos del canvas en formato JSON (todos los elementos)
Cerrar y volver
Puedes cerrar el editor en cualquier momento. Al volver a abrir la pizarra, todos los frames estarán como los dejaste.
Si borras un frame, no hay confirmación. Asegúrate de que ya no lo necesitas antes de eliminarlo. Puedes usar Deshacer (Ctrl+Z) si te equivocas.
Compartir la pizarra
Hay dos formas de compartir:
-
Compartir enlace: copia la URL de la pizarra y envíala. Quien tenga el enlace puede ver el diagrama completo con todos los frames.
-
Adjuntar a ejercicio: desde el editor, el botón Adjuntar a ejercicio vincula la pizarra a un ejercicio de entrenamiento. Así, cuando consultes el ejercicio, la pizarra estará disponible.
Consejos para buenas animaciones
- Pocos frames, mucho contenido: 3 o 4 frames suelen ser suficientes para explicar una jugada
- Movimientos claros: en cada frame, mueve solo los jugadores necesarios. Demasiados movimientos simultáneos confunden
- Usa flechas: combina frames con flechas para indicar trayectorias. Una flecha en el Frame 1 que señala hacia donde se moverá un jugador ayuda a entender la jugada
- Velocidad adecuada: para presentar la jugada a los jugadores, usa 0.5x. Para repaso rápido, 1x o 1.5x
- Colores consistentes: mantén el mismo color para cada jugador o rol a través de todos los frames
Limitaciones actuales
- El bucle de reproducción no está implementado: la animación se detiene al llegar al último frame. Para repetir, pulsa de nuevo Reproducir.
- Las flechas curvas (Bézier) no están disponibles. Usa líneas quebradas combinando varios segmentos rectos.
- La cabeza de flecha solo aparece en un extremo (no configurable por ahora).
Próximos pasos
- Vuelve al editor táctico para conocer todas las herramientas disponibles
- Adjunta la pizarra a un ejercicio para tenerla siempre a mano durante el entrenamiento