--- title: "Cómo crear motion graphics online con keyframes" description: "Qué guarda un keyframe, por qué dos bastan y cómo se calcula cuántos necesita una animación antes de llenar la línea de tiempo con puntos de más." canonical: "https://freeaigeneration.com/es/guias/como-crear-motion-graphics-online-con-keyframes/" robots: "noindex" lang: "es" --- # Cómo crear motion graphics online con keyframes Un logotipo que entra desde el borde y se detiene justo donde debe parece fácil hasta que se abre la línea de tiempo. Ahí aparece la decisión que define el resto: qué propiedad se anima, cuántos keyframes necesita y con qué curva frena. Aprender a crear motion graphics online con keyframes es, sobre todo, aprender a colocar pocos puntos en los sitios correctos. La mecánica es la misma en cualquier editor de animación. Un keyframe guarda un valor en un instante concreto y el programa interpola lo que hay entre dos de ellos. Nada más. El oficio consiste en elegir qué valores y en qué momentos, y esa elección se toma antes de tocar la curva. ## Qué guarda un keyframe y por qué bastan dos Un keyframe no anima una capa, anima una propiedad de esa capa: la posición, la opacidad, la escala, el giro, el color de un relleno. Una capa quieta puede tener veinte propiedades y solo una con keyframes. Para que haya movimiento hacen falta dos como mínimo. Con uno solo el valor queda fijado y no ocurre nada. Con dos, el editor calcula todos los valores intermedios y ahí entra la curva. Si quieres la explicación conceptual antes de seguir con el flujo, la guía sobre [qué son los keyframes en animación](/es/guias/que-son-los-keyframes-en-animacion/) desmonta la aritmética con ejemplos. ## El bucle de trabajo, paso a paso 1. Define el tamaño del lienzo, la duración y la velocidad de fotogramas de la composición. 2. Coloca el elemento: una capa de forma, una capa de texto o una imagen importada. 3. Selecciona en el panel de propiedades la propiedad concreta que va a cambiar. 4. Lleva el cursor de tiempo al primer instante y activa el cronómetro de esa propiedad. Ese es el primer keyframe. 5. Avanza el cursor hasta el momento en que el movimiento debe terminar. 6. Cambia el valor. El editor añade el segundo keyframe solo. 7. Abre el editor de curvas y ajusta cómo acelera y cómo frena. 8. Entrega por la cola de render o exporta como Lottie. El paso 7 separa un movimiento correcto de uno que parece de plantilla. El paso 8 no se puede dejar para el final: conviene sacar una versión pronto para verla fuera del panel de vista previa. El [editor de motion graphics y VFX](/es/herramientas/editor-movimiento-vfx/) reúne esos pasos en una pestaña del navegador, con capas, editor de curvas, máscaras, capas de forma, animadores de texto, expresiones, cámaras y luces 3D, así como cola de render. Los proyectos se guardan en el formato propio `.ecproj`. ## La cuenta que evita rellenar la línea de tiempo Supón que un elemento va de x = 0 a x = 800 píxeles en 2 segundos con interpolación lineal. A 1 segundo el valor es 0 + (800 − 0) × (1 ÷ 2) = 400. A 0,5 segundos, 0 + 800 × (0,5 ÷ 2) = 200. La segunda cuenta es de fotogramas: a 30 fps, 2 segundos son 60 fotogramas. Un keyframe cada 15 fotogramas son cuatro por segundo, y para un desplazamiento recto siguen sobrando casi todos. La regla práctica es un keyframe donde empieza, otro donde termina y uno más solo donde la trayectoria cambia de dirección o de velocidad. ## Ajustes que cambian el resultado El primero es el easing. Por defecto la interpolación es lineal, y de ahí viene la sensación mecánica de tanto movimiento amateur: la velocidad entra y sale de golpe. Una curva de Bézier cúbica permite arrancar despacio, acelerar en el centro y frenar al final, que es como se mueve un objeto con masa. El segundo es el keyframe de retención, que congela el valor hasta el siguiente punto sin transición. Sirve para cambios secos, relojes y contadores que no deben interpolar. El tercero es no duplicar trabajo. Este editor tiene expresiones, así que un valor puede depender de otro sin un segundo keyframe en cada fotograma de la composición. ## Errores que se ven en el primer render - Animar la capa entera cuando bastaba una propiedad. El elemento se sale del encuadre y corregirlo cuesta más. - Poner un keyframe por fotograma con la idea de que así será más suave. El movimiento se vuelve difícil de tocar y no mejora. - Copiar la misma curva en todos los elementos. Un titular grande y una forma pequeña no frenan igual. - Exportar al final. La cola de render y la exportación Lottie revelan antes lo que la vista previa esconde. Conviene recordar el límite del formato antes de animar: si el destino es Lottie, lo que viaja bien es la geometría y el texto, y los efectos raster o el 3D complejo suelen quedarse por el camino. La comparación entre [Lottie, GIF y MP4](/es/guias/lottie-vs-gif-vs-mp4-que-formato-de-animacion-elegir/) ayuda a decidir la salida con el movimiento ya pensado. ## Dónde probar el flujo Abre una composición corta, anima una sola propiedad y exporta. Si el archivo se mueve como esperabas fuera del editor, todo lo demás se construye sobre una base comprobada, y no sobre una vista previa que se parece mucho al resultado final.