Usa el Generador de Animaciones por Fotogramas gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Qué son realmente los fotogramas clave
Una animación por fotogramas clave es una lista de instantáneas: qué aspecto debe tener un elemento en ciertos momentos, y el navegador completa el movimiento entre ellas. Una transición se mueve entre dos estados, pero una animación por fotogramas clave puede pasar por muchos estados, repetirse sin fin, pausarse, invertirse o seguir un recorrido complejo. La herramienta de arriba crea una versión simple con tres instantáneas: el inicio, un paso intermedio que tú controlas y el final. El cuadro de vista previa repite tu animación, asà que puedes juzgarla como un movimiento repetido en lugar de un solo salto.
El paso intermedio es donde vive el carácter. Al inicio y al final, el cuadro está en su lugar normal, con tamaño normal y totalmente visible. En el medio, puede moverse hacia un lado, girar, crecer, encogerse o desvanecerse. El navegador interpola entre esas instantáneas con suavidad, asà que el cuadro se desliza hacia fuera y vuelve deslizándose. Como el inicio y el final coinciden, el bucle no tiene salto: el final de un ciclo es el inicio del siguiente. Ese bucle limpio es lo que hace útiles a las animaciones por fotogramas clave para indicadores de carga, señales de atención y movimiento decorativo.
Cómo usar el generador
Mueve los controles del punto medio uno a la vez y observa la vista previa. El control de movimiento desplaza el cuadro hacia un lado en el punto medio, hasta 200 pÃxeles en cualquier dirección. El control de rotación lo gira, hasta una vuelta completa en cada sentido. El control de escala lo agranda hasta el doble de su tamaño o lo encoge hasta un tercio. El control de opacidad lo desvanece, hasta quedar apenas visible. El control de duración define cuánto dura un ciclo completo, desde medio segundo hasta cinco segundos.
Empieza con un cambio a la vez. Un cuadro que solo se mueve es claro y fácil de juzgar. Un cuadro que solo gira es igual de claro. Cuando te guste un solo efecto, combina dos: un movimiento más una escala ligera, o un giro más un desvanecimiento. Combinar los cuatro a máxima fuerza normalmente parece caótico, porque el ojo no puede seguir un cuadro que se mueve, gira, crece y se desvanece a la vez. La moderación es la habilidad aquÃ. Elige el efecto que transmite el significado, y deja los demás pequeños o en cero.
Cómo diseñar un movimiento que signifique algo
El movimiento debe comunicar, no solo decorar. Un pulso suave atrae la atención hacia un mensaje nuevo sin gritar. Una elevación pequeña sugiere que algo se puede pulsar. Un desvanecimiento sugiere que algo se va o llega. Un giro sugiere procesamiento o juego, según el contexto. Antes de añadir una animación, pregunta qué le dice al usuario. Si la respuesta es nada, la animación es decoración, y la decoración debe ser lo bastante sutil para ignorarla.
Rendimiento: anima las propiedades baratas
No todas las propiedades animadas cuestan lo mismo. Transform y opacity son baratas, porque el navegador puede animarlas en el procesador gráfico sin recalcular el diseño. Width, height, top, left y margin son caras, porque cambiarlas obliga al navegador a redistribuir la página, lo que puede entrecortarse en teléfonos. La herramienta de arriba solo anima transform y opacity, que es el hábito correcto: mueve con translate, gira con rotate, agranda con scale y desvanece con opacity, y tus animaciones seguirán siendo fluidas.
De un bucle a una animación real
El código generado es un punto de partida, no un diseño terminado. El nombre de la animación, myMove, se puede cambiar por algo con significado, como pulseBadge o slideHint. Los fotogramas clave pueden ganar más pasos: añade una instantánea al 25 por ciento y otra al 75 por ciento para un recorrido más complejo, o cambia el estado final para que la animación se ejecute una vez y se quede en su posición final. Para ejecutarla una vez en lugar de repetirla, cambia infinite por forwards, de modo que el elemento mantenga su último fotograma clave cuando termine la animación.
Preguntas frecuentes
¿Por qué mi animación salta al final de cada bucle? Eso ocurre cuando el último fotograma clave no coincide con el primero. Esta herramienta los mantiene idénticos, asà que el bucle es perfecto. Si editas el código, mantén iguales las instantáneas del 0 por ciento y del 100 por ciento para un bucle limpio.
¿Puedo animar el color con fotogramas clave? SÃ, pero la animación de color es más cara que transform y opacity. Úsala con moderación, para elementos pequeños, y prefiere transform y opacity para cualquier cosa que se mueva.
¿Cómo detengo la animación después de una reproducción? Quita infinite de la regla de animación y añade forwards, para que el elemento termine en su último fotograma clave y se quede allÃ.
Crea un bucle arriba, ajústalo hasta que se sienta tranquilo y claro, y copia el código. La mejor animación es la que los usuarios notan solo cuando les ayuda.
Herramientas relacionadas
- Keyframe Animation Generator (English version)
- Creador de Animaciones de Carga
- Vista Previa de Efectos al Pasar el Ratón