La guía completa de la aceleración de la animación

Tanto si tu animación es realista como si es surrealista, la credibilidad es fundamental. Por ello, cuando se recrean los movimientos en la animación, el público espera un cierto grado de autenticidad. La aceleración en la animación es un método de transición que modifica el movimiento y lo hace menos pronunciado y disonante. Con programas de software como After Effects, Premiere Pro, y Animate, se puede controlar el uso de la aceleración a través de los fotogramas clave posicionados en la línea de tiempo de la animación. Nosotros te enseñaremos cómo hacerlo en esta guía.

¿Qué es la aceleración en la animación?

En el contexto de la animación, la aceleración otorga una fluidez natural y orgánica al movimiento. Una animación lineal sin aceleración tendrá un movimiento mecánico, cuya velocidad no aumentará ni disminuirá. Este movimiento no es nada natural, puesto que en la vida real no se da este ritmo constante.

Los objetos en la vida real no empiezan a moverse y mantienen esa velocidad, sino que comienzan despacio, van cogiendo ritmo y finalmente deceleran hasta parar.

Es como conducir un coche, lo mueves desde el estacionamiento, ganas velocidad y la mantienes durante un tiempo; después, al final de tu recorrido, reduces la velocidad hasta parar.

Estos movimientos se reflejan en las funciones principales de la aceleración que puedes encontrar en tu trabajo de animación. Le dan un aspecto más orgánico al movimiento.

  • Suavizar entrada supone empezar la animación despacio para ir incrementado la velocidad hasta parar.
  • Suavizar salida consiste en empezar rápido y reducir la velocidad hacia el final.
  • Suavizar entrada y salida es una combinación de ambas.

¿Cómo funciona la aceleración?

A la hora de animar un objeto específico, tienes que poner marcadores, denominados fotogramas clave, para indicar el punto de inicio y final del movimiento.

Un fotograma clave es exactamente eso, un fotograma importante que establece un valor temporal y permite al sistema calcular el funcionamiento de los fotogramas que se encuentran entre los clave.

En esencia, los fotogramas clave dan instrucciones que cambian el valor de cualquier animación que ocurre entre cada fotograma clave. La aceleración que elijas afectará a los movimientos del objeto, puesto que controla la animación entre los fotogramas clave.

¿Cuáles son las ventajas de la aceleración?

La aceleración es una manera de modificar el movimiento para influir en la reacción del espectador. Estas son algunas de las ventajas que puede brindar a tu animación:

  • Es humana: no hay movimientos lineales en la naturaleza. Por lo tanto, el uso del movimiento lineal en la animación nos da una calidad plana y molesta que sacará al espectador de la experiencia. El realismo y la precisión son fundamentales para hacer que los movimientos de los fotogramas clave sean creíbles y verosímiles.
  • Es realista: la aceleración da tiempo al espectador para que procese lo que está pasando. Garantiza que la animación tenga fluidez, y le proporciona un aspecto natural y orgánico que mantiene la suspensión de la incredulidad voluntaria del espectador.
  • Es intensa: se puede utilizar la aceleración como efecto cómico o dramático. Por ejemplo, las animaciones aceleradas empiezan despacio, pero acaban con velocidad. Imagina al Coyote corriendo hacia un precipicio y manteniéndose en el aire antes de terminar cayendo de pronto al abismo. En la animación por ordenador, habría que utilizar la aceleración para recrear un efecto como este.
  • Se puede personalizar: puedes utilizar una amplia gama de efectos de aceleración. Algunos empiezan rápido, otros, lento. Algunos efectos reducen la velocidad al final. Por lo general, sea cual sea el efecto que busques dar a tu movimiento, lo podrás conseguir con la aceleración.

Cómo animar usando la aceleración en After Effects

After Effects es el programa imprescindible para los efectos especiales y la posproducción. Te mostramos cómo usar la aceleración en tu animación.

  1. En la animación que tengas abierta, mueve el indicador de tiempo al inicio de la línea de tiempo. Se establecerán los fotogramas clave como los fotogramas clave lineales básicos, aquellos que crean un ritmo constante.
  2. Haz clic en el primer fotograma clave; después, haz clic con el botón derecho y selecciona Asistente de fotogramas clave en el menú emergente.
  3. Desplázate y busca las opciones Desacelerac./Acelerac. suave, Desaceleración suave y Aceleración suave.
  4. Si seleccionas una de estas, cambiará el fotograma clave, del movimiento lineal a la aceleración. Observarás que la forma del fotograma clave cambia. Por ejemplo, el movimiento lineal tiene forma de diamante, mientras que la opción Aceleración suave es una flecha apuntando hacia la izquierda.
  5. Aquí, puedes encontrar las opciones de aceleración adecuadas para tu movimiento. Por ejemplo, puede que quieras suavizar la salida de tu fotograma clave inicial y suavizar la entrada del último. Esto generará una aceleración y desaceleración realistas que puedes ver en el movimiento natural.
  6. Presta atención a la diferencia de tiempo entre fotogramas clave en el panel de la línea de tiempo. Cuanto más corto sea el intervalo entre fotogramas clave, más rápido será el movimiento, puesto que tiene que finalizar el recorrido antes del próximo fotograma clave. Si el intervalo es más largo, el movimiento será mucho más lento, ya que puede hacer el recorrido en más tiempo.
  7. Puedes adecuar este movimiento con facilidad ajustando el avance o el retroceso de los fotogramas clave en tu línea de tiempo.
  8. Puedes utilizar el icono del editor de gráficos para ver en un diagrama cómo afecta la aceleración a tus fotogramas clave.

Más información sobre la aceleración en Adobe After Effects

Cómo animar usando la aceleración en Animate

En Adobe Animate, puedes aplicar la aceleración incluso a varias propiedades a la vez. Así que, si tienes un objeto que se mueve y rota al mismo tiempo, puedes aplicar diferentes tasas de aceleración para cada movimiento.

Así es como funciona:

  1. En la animación, selecciona un marco de fotograma clave del periodo de interpolación clásico; a continuación, ve a la sección de interpolación en el panel de propiedades.
  2. En el menú desplegable Aceleración, selecciona Each property separately.
  3. Verás los campos de cada propiedad. Haz clic en Classic Ease para abrir el panel de aceleración predefinido; después, selecciona las opciones de aceleración adecuadas para tu propiedad.
  4. También puedes añadir aceleraciones personalizadas. Emplea el panel y el diagrama de aceleración personalizada para crear la aceleración perfecta para tu fotograma clave. Es sencillo arrastrar y personalizar tu aceleración para tenerla bien configurada.
  5. Recuerda que también puedes añadir una aceleración a todas tus propiedades a la vez. Tan solo tienes que volver al menú desplegable Aceleración y seleccionar tus opciones.

Más información sobre la edición de las interpolaciones en movimiento en Animate

#F5F5F5

¿Te fascina el mundo de la animación?

Sigue aprendiendo con nuestra guía de animación para principiantes.

Más información

Cómo animar usando la aceleración en Premiere Pro

En Premiere Pro, puedes elegir entre una amplia variedad de opciones de aceleración, incluidas Suavizar entrada, Suavizar salida, Mantener, Curva automática, y Curva continua.

La curva te permite personalizar tu gráfico de aceleración, mientras que la opción Curva automática te ayuda a crear una tasa de cambio más fluida.

Aplicar distintas funciones a tus fotogramas clave es sencillo.

  1. Establece fotogramas clave en tu animación.
  2. Selecciona el fotograma clave y ve al panel Control de efecto.
  3. En la parte derecha del panel, haz clic en el pequeño diamante azul que tiene el fotograma clave. Debería estar configurado como lineal de manera predeterminada.
  4. Haz clic con el botón derecho y ve a la lista desplegable Interpolación temporal.
  5. Puedes seleccionar la opción de aceleración, o bien utilizar las opciones como Curva para personalizar tu aceleración.
  6. Si haces clic con el botón derecho en tu línea de tiempo en cada fotograma clave y, a continuación, en Mostrar fotogramas clave del clip > Movimiento > Posición, puedes editar los fotogramas clave del gráfico de aceleración en la línea de tiempo. Esto te permite crear transiciones más caóticas o fluidas en tu fotograma clave.

Preguntas frecuentes sobre la aceleración

¿Cuál es el propósito principal de la aceleración?

Se diseñó para modificar el movimiento de la animación a fin de crear uno de aspecto orgánico y sugerente. El uso de la aceleración evita que la animación parezca opaca o brusca, además de darle fluidez al movimiento, lo que proporciona un acabado profesional general. Modifica el inicio y final de la animación para suavizar el inicio y final del movimiento.

¿Qué hace la animación en CSS?

En el contexto de la animación, las hojas de estilo en cascada (CSS, por sus siglas en inglés) son una serie de comandos que establecen cómo aparece la animación en la página cuando un objeto pasa de una configuración de estilo CSS a otra. Los fotogramas clave se codifican en el CSS para determinar los estados de inicio y final del estilo de la animación y guiarlo donde precise. La animación en CSS tiende a renderizar de forma fluida y, además, te proporciona un buen control sobre la presentación final del producto.

¿Cuáles son los tipos de funciones de aceleración en CSS?

Los principales tipos de funciones de aceleración en CSS son lineales, suavizar entrada, suavizar salida, y suavizar entrada y salida. Puedes emplear todas estas funciones en CSS para conseguir un aspecto más natural en tus transiciones de fotogramas clave.

¿Qué es una transición lineal en CSS?

La transición lineal mantiene la misma velocidad a lo largo de la animación. El tiempo y valor de los fotogramas clave avanza al mismo ritmo. Este efecto da un aspecto robótico y nada natural, por lo que se utilizan las funciones de aceleración para suavizar los movimientos y hacerlos más realistas.

¿Qué es la opción suavizar salida en CSS?

Los efectos de suavizar salida comienzan rápido y después disminuyen la velocidad. Donde mejor funcionan es en las animaciones que ilustran la interacción de usuario, puesto que la velocidad inicial da la impresión de un tiempo de respuesta rápido. Esta transición de CSS también se puede utilizar para los iconos que llegan a la pantalla desde fuera de plano, lo que produce la impresión de que la animación se apresura a ayudar.

¿Qué es la opción suavizar entrada en CSS?

Este efecto se utiliza en menor medida en la transición, ya que el comienzo lento y el final repentino pueden ser chocante para el espectador. Sin embargo, sirve en las imágenes o iconos animados que salen del plano, especialmente si el objeto animado se marcha de la pantalla por completo justo antes de parar la animación. Las transiciones con suavizar entrada deberían ser breves, sino podrían parecen lentas e impacientar al usuario.

¿Qué es la opción suavizar entrada y salida en CSS?

La transición suavizar entrada y salida toma elementos de ambas opciones. Comienza despacio y va ganando velocidad hacia la mitad. Esta opción es ideal para crear una animación en bucle.