Shape morphing en After Effects: la animación de UI estilo Apple, explicada
Seguro que has visto la animación: un icono cuadrado se estira hasta convertirse en una barra de búsqueda, la barra se redondea en un botón, el botón pasa a ser una tarjeta. Parecen una docena de elementos relevándose. Casi siempre es una sola capa de forma.
Ese es todo el truco, y la razón de que estas animaciones se sientan tan fluidas. Nada aparece ni desaparece: una única forma cambia lo que es. Todo lo demás (iconos, texto, avatares) simplemente aparece encima.
La mecánica se aprende en cinco minutos. Casi todo el mundo comete el mismo error al primer intento, así que empecemos por ahí.
El error: usar Scale
El impulso es seleccionar la capa, pulsar S, desvincular la proporción y poner claves en la anchura. Parece que funciona. No funciona.
Escalar un rectángulo redondeado escala todo, incluido el radio de las esquinas. Estira un cuadrado de 200×200 con esquinas de 40 px hasta 600×200 y las esquinas se estiran con él: obtienes extremos aplastados y ovalados en lugar del radio limpio del que partías. En una animación estilo Apple, cuyo sentido es que las esquinas se mantengan constantes, eso se lee como un fallo.
La solución es animar la ruta, no la capa. Abre:
Shape Layer → Contents → Rectangle 1 → Rectangle Path 1Ahí encuentras Size y Roundness como propiedades independientes. Al animarlas, el radio de las esquinas se queda exactamente donde lo pusiste, por mucho que se estire la forma.
Este vídeo se carga desde YouTube. No se envía nada a Google hasta que lo permitas.
Las tres propiedades que lo hacen todo
Una vez trabajas sobre la ruta y no sobre la capa, el morphing de UI se reduce a tres controles.
Size — anchura y altura, con un icono de cadena entre ambas. Púlsalo para desvincularlas y podrás estirar en horizontal sin tocar la altura. Eso convierte un cuadrado en píldora y una tarjeta en barra.
Roundness — el radio de las esquinas. A cero tienes un cuadrado; súbelo hasta que deje de cambiar y tienes un círculo. Esta sola propiedad cubre cuadrado → cuadrado redondeado → círculo, que es la mayor parte de lo que necesita el morphing de interfaces.
Fill → Color — ponle claves y la forma parecerá otro elemento. Esto vende la ilusión más que ninguna otra cosa: la forma cambia de proporciones *y* de color a la vez, y el ojo lo lee como un componente convirtiéndose en otro, no como un rectángulo al que le cambian el tamaño.
Una secuencia para replicar: cuadrado → círculo → píldora
El orden importa más que los valores. La mayoría de animaciones estilo Apple se construyen con esta secuencia.
- Empieza cuadrado. Anchura y altura iguales, roundness en torno al 20–30 % del lado. Apple casi nunca usa esquinas rectas de 90°: incluso el estado «cuadrado» va ligeramente redondeado.
- Pon claves en las tres propiedades al inicio. Size, roundness, fill. Marcarlo todo bloquea el estado, para que cambios posteriores no se propaguen hacia atrás a fotogramas ya terminados.
- Avanza 6–8 fotogramas. Ese es el rango de trabajo para transiciones de interfaz: suficiente para leerse, breve para sentirse ágil. Por encima de doce empieza a resultar pesado.
- Sube roundness al máximo. Ahora es un círculo.
- Otros 6–8 fotogramas, desvincula
Sizey estira la anchura. El círculo pasa a píldora y, como roundness ya está al tope, los extremos quedan perfectamente semicirculares solos.
Suaviza todas las claves (F9), abre el editor de gráficos y mete los manejadores hacia dentro. El easing por defecto es demasiado simétrico para interfaces: la animación de UI quiere un arranque rápido y un asentamiento largo.
Este vídeo se carga desde YouTube. No se envía nada a Google hasta que lo permitas.
Rutas Bezier: cuando no son rectángulos
El método Rectangle Path cubre cuadrados, círculos, píldoras y tarjetas, que es casi todo el trabajo de interfaz. Para formas arbitrarias, logotipos o iconos necesitas otra vía.
Crea las dos formas y, en cada una, haz clic derecho sobre la ruta y elige Convert To Bezier Path. Después pon una clave en la ruta de la primera forma, avanza en la línea de tiempo, selecciona la clave de ruta de la segunda forma, cópiala y pégala en la propiedad de ruta de la primera.
After Effects interpola entre los dos conjuntos de puntos. Luego borra u oculta la segunda forma: solo estaba ahí como origen.
Dos cosas deciden si esto queda bien:
El número de puntos. After Effects empareja los puntos por orden. Si una forma tiene 4 puntos y la otra 12, la interpolación tiene que inventarse una correspondencia y el resultado se retuerce de formas que nadie quiere. Dales el mismo número de puntos, a ser posible en el mismo orden, antes de transformar.
El desplazamiento. La forma suele moverse ligeramente durante la transformación porque las rutas tienen centros distintos. Se corrige poniendo claves también en Position y recentrando en la clave final.
Este vídeo se carga desde YouTube. No se envía nada a Google hasta que lo permitas.
Lo que hace que parezca caro
El morph en sí es la parte fácil. Tres cosas separan una transformación técnicamente correcta de una que parece hecha por Apple.
Motion blur, en todas las capas. Es la omisión más frecuente con diferencia. Actívalo por capa *y* el interruptor maestro de la línea de tiempo. Sin él la forma salta entre fotogramas; con él, la transición se lee como movimiento físico. No cuesta nada y lo cambia todo.
Un rebote en el tamaño. Aplicar una expresión de rebote a Size da a la forma un ligero exceso al asentarse, exactamente la cualidad elástica de las transiciones de Apple. Publicamos la expresión de rebote que usamos con cada parámetro explicado; para shape morphing conviene mantener la amplitud baja (en torno a 0,02–0,04), porque el exceso en tamaño se ve mucho más que en posición.
Contenido escalonado. Los iconos y el texto no deberían aparecer en el mismo instante en que la forma termina. Desplaza cada elemento uno o dos fotogramas para que entren en cascada. Ese fotograma de diferencia separa el «han aparecido elementos» del «la interfaz ha respondido».
Problemas habituales
Las esquinas se deforman. Estás animando Scale en lugar de Rectangle Path → Size. Es el error clásico.
La forma salta al empezar la transformación. Alguna propiedad no tenía clave al inicio, así que After Effects interpola desde donde estuviera a lo largo de toda la capa. Pon claves a cada propiedad que vayas a cambiar, al principio, antes de cambiar nada.
El morph Bezier se retuerce. Número de puntos distinto. Añade puntos a la forma más simple hasta igualarlos.
La transición se ve rígida pese al easing. Comprueba que el motion blur esté realmente activo — en la capa y en el interruptor maestro — y mete más los manejadores del gráfico. El easy ease por defecto es demasiado suave para interfaces.
Se ve bien en el visor pero mal al exportar. Los ajustes de motion blur difieren entre previsualización y render. Revisa el ángulo de obturación de la composición antes de entregar.
Para qué merece la pena
Vídeos de demostración de una app o función, clips de lanzamiento de producto y publicaciones sociales donde una interfaz debe explicarse sola en ocho segundos. Transmite cuidado y presupuesto, que es justo por lo que Apple lo usa, y por lo que una sola capa de forma con tres propiedades animadas rinde tanto para el esfuerzo que cuesta.
No merece la pena cuando la interfaz existe de verdad. Si el producto ya está hecho, una grabación de pantalla es más honesta y se resuelve en diez minutos.
FAQ: shape morphing en After Effects
¿Cómo transformo una forma en After Effects?
Con rectángulos y círculos, anima Contents → Rectangle Path 1 → Size y Roundness en lugar del Scale de la capa. Con formas arbitrarias, convierte ambas rutas a Bezier, copia la clave de la ruta de destino y pégala en la propiedad de ruta de la forma de origen.
¿Por qué se deforman las esquinas al transformar?
Estás animando Scale, que escala el radio junto con la forma. Anima Rectangle Path → Size y el radio se mantendrá fijo en el valor de roundness que hayas puesto.
¿Necesito un plugin para hacer shape morphing?
No. Todo esto es After Effects nativo. Plugins como Flow o Bouncer agilizan el easing, pero la transformación en sí no requiere instalar nada, lo que además significa que el proyecto se abre bien en el ordenador de otra persona.
¿Cómo convierto un cuadrado en un círculo?
Iguala anchura y altura en Size y sube Roundness hasta que deje de responder. Se detiene en la mitad del lado más corto, que es exactamente un círculo.
¿Cuánto debe durar una transición de interfaz?
De seis a ocho fotogramas a 30 fps para la mayoría. Por debajo de cuatro es demasiado rápido para leerse; por encima de doce empieza a sentirse lento. El movimiento de interfaz debe sentirse ágil, no cinematográfico.
¿Por qué se retuerce y se pliega mi morph Bezier?
Las dos rutas tienen distinto número de puntos, así que no hay correspondencia limpia entre ellas. Añade puntos a la forma más simple hasta que ambas coincidan, a ser posible en el mismo orden.
¿Qué hace que las animaciones estilo Apple se vean tan suaves?
Tres cosas más allá del morph: motion blur en todas las capas, un ligero rebote al asentarse y contenido escalonado uno o dos fotogramas en lugar de aparecer todo a la vez.
Lo que ocurre después del render
La animación es la parte visible del trabajo. El resto consiste en enseñársela a quien la encargó, recibir notas que señalen un fotograma concreto en vez de «la parte del medio no acaba de funcionar», y tener una aprobación a la que poder remitirse. Esa mitad es para la que existe Exportlab: comentarios al fotograma exacto sobre el montaje real, en el mismo sitio donde se entrega el archivo.
