Cómo editar la aceleración y desaceleración de la escala sin deformar las proporciones de un personaje

La escala controla el tamaño en cada eje. Cuando los ejes horizontal y vertical usan el mismo multiplicador, el personaje conserva su relación de aspecto. Cuando esos multiplicadores son distintos, su forma cambia. La documentación técnica de MDN describe esta distinción como escalado uniforme y no uniforme. MDN: función CSS scale()

La aceleración y desaceleración controla cómo avanza un valor animado entre fotogramas clave. Supongamos que ambos ejes empiezan en el 80 % y terminan en el 100 %. Si la escala horizontal llega al 96 % mientras la vertical todavía está en el 88 %, el personaje se vuelve temporalmente más ancho en relación con su altura. Los extremos pueden verse correctos mientras la transición lo estira visiblemente.

Si el personaje no está deformado al inicio, mantener iguales los valores de escala X e Y durante toda la transición conserva sus proporciones. En términos más generales, conserva la relación de referencia aprobada: si un recurso preparado empieza intencionalmente con valores de escala desiguales, multiplica ambos por el mismo factor variable. No sustituyas automáticamente esa referencia por valores iguales.

Guarda una copia de trabajo e identifica la transformación que controla todo el personaje. Para este recorrido, empieza con una sola capa de personaje 2D cuyo aspecto ya sea correcto en su tamaño de referencia. Si el diseño tiene partes separadas, primero establece una transformación compartida para el cambio de tamaño general; de lo contrario, editar solo el cuerpo puede cambiar su tamaño en relación con la cara o los accesorios.

En After Effects, selecciona la capa del personaje y pulsa S para mostrar Escala. Activa Restringir proporciones, el icono junto a los valores de escala, al introducir cambios proporcionales de tamaño. Adobe documenta este control específicamente para editar la escala con los valores vinculados. Adobe: Ajustar las propiedades de capa en After Effects

Anota los valores iniciales y finales aprobados, así como los tiempos de los fotogramas clave, antes de cambiar nada. Inspecciona también las claves intermedias existentes. Usa el control de vínculo como ayuda de edición y verifica los valores reales durante toda la animación, en vez de asumir que activarlo corrigió ediciones anteriores.

Elige el punto de origen del crecimiento antes de pulir la temporización. En After Effects, la escala se modifica alrededor del punto de anclaje de la capa. Un punto de anclaje centrado es adecuado para ampliar desde el centro; uno en el centro inferior puede servir para un personaje que debe permanecer visualmente apoyado en el suelo mientras crece. Adobe: Puntos de anclaje de capa

Usa el Gráfico de valores para inspeccionar el tamaño y el Gráfico de velocidad para definir la rapidez con que cambia. Adobe define el gráfico de valores como los valores de las propiedades a lo largo del tiempo y el gráfico de velocidad como su tasa de cambio. Selecciona explícitamente el gráfico en las opciones del Editor de gráficos en vez de confiar en la vista predeterminada. Adobe: Conceptos básicos de la animación en After Effects

En el Gráfico de valores, examina juntos todos los componentes de escala pertinentes. Si los valores de referencia son iguales, sus curvas deberían coincidir durante toda una animación de escala uniforme. Una separación entre ellas es una señal útil para inspeccionar el fotograma correspondiente. Si los valores de referencia aprobados son desiguales, compara los cambios proporcionales en vez de esperar que las curvas se superpongan.

Usa el Gráfico de velocidad cuando quieras modificar la aceleración o la estabilización sin cambiar los tamaños definidos por las claves. Vuelve al Gráfico de valores después de cada ajuste importante. Así podrás hacer dos comprobaciones por separado: si la temporización se siente bien y si la relación de tamaño sigue siendo correcta.

Usa este ejemplo controlado: un personaje 2D con las proporciones correctas crece de 80 %, 80 % a 100 %, 100 % en 12 fotogramas. Son valores ilustrativos, no una duración ni un intervalo de tamaño obligatorios.

1. Selecciona la capa del personaje, muestra Escala y activa Restringir proporciones.
2. Define el primer fotograma clave de Escala en 80 %, 80 % y el segundo, 12 fotogramas después, en 100 %, 100 %.
3. Selecciona ambos fotogramas clave de Escala y aplica Animación > Asistente de fotogramas clave > Suavizado fácil.
4. Abre el Editor de gráficos y elige Editar gráfico de velocidad.
5. Selecciona a la vez las claves de escala. Ajusta los componentes pertinentes de manera uniforme, con pequeños cambios en los controles.
6. Cambia a Editar gráfico de valores e inspecciona los valores de los ejes entre las claves.

El Suavizado fácil proporciona una transición inicial con velocidad cero en las claves seleccionadas. Para hacer ajustes más precisos, usa Animación > Velocidad de fotograma clave para editar la velocidad y la influencia de entrada o salida. Adobe explica que al mover horizontalmente los controles de velocidad cambia su influencia sobre las claves cercanas. Adobe: Aplicar y controlar los cambios de velocidad en After Effects

Para este ejemplo, prueba un aumento rápido seguido de una estabilización más prolongada. Ajusta la influencia de entrada en la clave final, previsualiza y compara con el original. Mantén fijos los tamaños de los extremos y la duración de 12 fotogramas durante esta pasada para poder evaluar únicamente el cambio en la aceleración y desaceleración.

Si el personaje se estira después de un ajuste, deshazlo e inspecciona qué componentes seleccionaste. Vuelve a comprobar los valores intermedios y los extremos antes de continuar. El tutorial del Editor de gráficos de Adobe muestra cómo seleccionar claves, mostrar sus controles, ajustar el Gráfico de velocidad y previsualizar el resultado. Adobe: Crear movimiento dinámico entre fotogramas clave con el Editor de gráficos

Usa una prueba de cambio proporcional cuando sea difícil comparar las curvas. En el fotograma que elijas, divide la escala actual de cada eje por su valor de referencia aprobado. Los resultados deberían coincidir si el cambio de tamaño es uniforme. Esta prueba se basa directamente en aplicar el mismo multiplicador a ambas dimensiones.

Estado	Escala X	Escala Y	X ÷ X de referencia	Y ÷ Y de referencia	Interpretación
Referencia aprobada	80 %	80 %	1,00	1,00	Forma de referencia
Fotograma intermedio correcto	92 %	92 %	1,15	1,15	Proporciones conservadas
Fotograma intermedio deformado	96 %	88 %	1,20	1,10	El crecimiento horizontal es mayor
Extremo aprobado	100 %	100 %	1,25	1,25	Proporciones de referencia restablecidas

En el ejemplo deformado, la relación entre anchura y altura se multiplica por 96 ÷ 88 ≈ 1,091. Esto hace que el personaje sea aproximadamente un 9,1 % más ancho en relación con su altura que en la referencia. Estas cifras son un ejemplo de cálculo, no mediciones de una animación concreta.

Si la referencia es intencionalmente desigual, por ejemplo 120 %, 100 %, una ampliación uniforme de 1,10 produce 132 %, 110 %. Ambos ejes han aumentado un 10 %, por lo que se conserva el aspecto aprobado. Cambiar el extremo a 132 %, 132 % alteraría las proporciones existentes.

Diagnostica el síntoma visible antes de hacer otro ajuste de aceleración y desaceleración. Pausa en un fotograma para distinguir un cambio de forma de un desplazamiento de posición o un cambio en los detalles de la imagen.

Síntoma	Qué comprobar a continuación
La anchura y la altura divergen durante la transición	Compara los valores de los ejes, las claves intermedias y los controles de curva en ese momento.
Todo el personaje se mueve mientras crece	Inspecciona el punto de anclaje y la animación de Posición.
Solo una parte del personaje cambia de tamaño relativo	Inspecciona la transformación de esa parte y la transformación compartida del personaje.
El personaje se vuelve más grande de lo previsto antes de estabilizarse	Inspecciona el Gráfico de valores para detectar si supera el tamaño objetivo.
La silueta conserva las proporciones, pero los bordes se ven pixelados	Inspecciona la resolución del diseño original y el grado de ampliación.

Un aumento temporal por encima del tamaño previsto puede conservar las proporciones si ambos ejes lo hacen a la vez. Decide por separado si ese tamaño mayor debe formar parte de la animación. Si el encargo pide un movimiento sencillo de crecimiento y detención, mantén los valores de escala dentro del intervalo elegido entre el inicio y el final.

La ampliación de una imagen rasterizada también puede cambiar el aspecto del diseño sin alterar sus proporciones. Adobe señala que ampliar considerablemente capas rasterizadas puede producir píxeles cuadrados, mientras que reducirlas puede suavizarlas. Cambiar la aceleración y desaceleración no resolverá ese problema de detalle de origen. Adobe: Escalar o voltear una capa

Revisa el fotograma inicial, varios intermedios, el fotograma de mayor tamaño y el extremo final. Comprueba con más detalle las zonas donde la escala cambia con mayor rapidez o donde parece cambiar la forma. Muestrear fotogramas ayuda a localizar problemas; inspeccionar las curvas completas permite detectar diferencias entre esos puntos.

Después, previsualiza a la velocidad de reproducción prevista. El tutorial del Editor de gráficos de Adobe recomienda consultar el panel Información para confirmar si la previsualización se ejecuta en tiempo real, ya que una previsualización incompleta puede dificultar la evaluación de la temporización. Adobe: Previsualizar y ajustar la animación en el Editor de gráficos

Termina cuando el personaje alcanza los tamaños previstos, conserva las proporciones aprobadas durante toda la transición y acelera y se estabiliza según lo previsto. Usa un único multiplicador de escala compartido como regla organizativa, inspecciona su temporización con los gráficos y verifica la forma en los fotogramas intermedios antes de aceptar la edición.

• Adobe — Ajustar las propiedades de capa en After Effects
• Adobe — Conceptos básicos de la animación en After Effects
• Adobe — Aplicar y controlar los cambios de velocidad en After Effects
• Adobe — Crear movimiento dinámico entre fotogramas clave con el Editor de gráficos
• MDN — función CSS scale()