How do I create a bounce effect after a keyframe?

Domina el Rebote en After Effects con Expresiones

18/05/2023

Valoración: 4.32 (2288 votos)

¿Alguna vez has visto una animación y has sentido que le falta... algo? A menudo, ese "algo" es la sensación de peso y física del mundo real. Un objeto que se detiene bruscamente en pantalla se siente artificial. Pero cuando ese mismo objeto rebota ligeramente antes de detenerse, de repente cobra vida. Este detalle, que parece pequeño, es fundamental en el Motion Design para contar historias convincentes. Afortunadamente, no necesitas animar cada rebote manualmente. Aquí es donde entra en juego la poderosa expresión de rebote en After Effects.

What is a bounce expression in after effects?
The bounce expression is great because it only takes two keyframes to create a bounce. After Effects will interpolate the velocity of your layers' movement to help determine how the bounce will work. The math that goes into making this bounce expression is pretty darn nerdy. Feel free to copy and paste this After Effects Bounce Expression below.

Si buscas una forma rápida y eficiente de añadir un efecto de rebote a cualquier capa, estás en el lugar correcto. A primera vista, el código de una expresión puede parecer intimidante y complejo, ¡pero no dejes que eso te asuste! En este artículo, desglosaremos todo lo que necesitas saber para utilizar estas expresiones en tus proyectos, desde las más sencillas hasta las más personalizables, transformando tus animaciones de buenas a increíbles.

Índice de Contenido

¿Qué es una Expresión de Rebote y Por Qué Usarla?

En After Effects, una expresión es un pequeño fragmento de código JavaScript que puedes aplicar a las propiedades de una capa (como posición, escala o rotación) para automatizar animaciones. En lugar de crear docenas de keyframes a mano para simular un rebote, puedes pegar una expresión que haga todo el trabajo pesado por ti. Esto no solo ahorra una cantidad de tiempo monumental, sino que también permite un control paramétrico y resultados consistentes.

Existen diferentes tipos de expresiones de rebote, cada una con su propia lógica y caso de uso. A continuación, exploraremos dos de las más populares y útiles.

Método 1: La Expresión de Rebote Físico de Dan Ebberts

Este es quizás el código de rebote más famoso y utilizado en la comunidad de After Effects, creado por el genio del código Dan Ebberts. Su gran ventaja es que simula una física realista, basándose en conceptos como la gravedad y la elasticidad. Es perfecta para animaciones donde un objeto cae y rebota contra una superficie.

La expresión funciona interpolando la velocidad del movimiento de tu capa entre dos keyframes para determinar cómo debe rebotar. Solo necesitas animar la caída; la expresión se encarga del resto.

El Código

Puedes copiar y pegar directamente este código en la propiedad que deseas animar (por ejemplo, la Posición).

e = .7; //elasticidad g = 5000; //gravedad nMax = 9; //número máximo de rebotes permitidos n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time) n--; } if (n > 0){ t = time - key(n).time; v = -velocityAtTime(key(n).time - .001)*e; vl = length(v); if (value instanceof Array){ vu = (vl > 0) ? normalize(v): [0,0,0]; }else{ vu = (v < 0) ? -1: 1; } tCur = 0; segDur = 2*vl/g; tNext = segDur; nb = 1; // número de rebotes while (tNext < t && nb <= nMax){ vl *= e; segDur *= e; tCur = tNext; tNext += segDur; nb++ } if(nb <= nMax){ delta = t - tCur; value + vu*delta*(vl - g*delta/2); }else{ value } }else{ value }

Cómo Controlar esta Expresión

No te asustes por la longitud del código. La belleza de esta expresión es que solo necesitas modificar las primeras tres líneas para tener un control total sobre el efecto.

What is a bounce expression in after effects?
The bounce expression is great because it only takes two keyframes to create a bounce. After Effects will interpolate the velocity of your layers' movement to help determine how the bounce will work. The math that goes into making this bounce expression is pretty darn nerdy. Feel free to copy and paste this After Effects Bounce Expression below.
  • e = .7; //elasticidad: Esta variable controla la elasticidad del rebote. Piensa en ello como el material del que está hecho tu objeto. Un valor más bajo (por ejemplo, 0.3) hará que el rebote sea más rígido y se detenga antes, como una bola de bolos. Un valor más alto (por ejemplo, 0.9) lo hará más elástico y suelto, como una pelota de goma.
  • g = 5000; //gravedad: La gravedad afecta el peso percibido de tu objeto. Un valor más alto de g hará que el objeto se sienta más pesado, provocando que los rebotes sean más cortos y rápidos. Un valor más bajo hará que parezca más ligero, casi como si estuviera flotando en la luna.
  • nMax = 9; //número máximo de rebotes: Este parámetro simplemente limita la cantidad de veces que el objeto rebotará antes de detenerse por completo. Es útil para optimizar el rendimiento y evitar que la animación continúe indefinidamente.

Método 2: La Expresión de Rebote "Overshoot"

Este segundo método es ideal para el Motion Design moderno, especialmente para animar elementos de interfaz, texto o iconos. En lugar de simular una caída, crea un efecto de "overshoot" o rebote elástico que se activa después del último keyframe de tu animación. Hace que el movimiento se sienta más dinámico y pulido.

El Código

Esta es una versión popular y efectiva para lograr este efecto, a menudo atribuida a aportes de la comunidad como KIRTAN FX.

amp = 0.05; //amplitud freq = 2; //frecuencia decay = 3; //decaída time_max = 3; n = 0; if (numKeys > 0) { n = nearestKey(time).index; if (key(n).time > time) { n--; } } if (n == 0) { t = 0; } else { t = time - key(n).time; } if (n > 0 && t < time_max) { v = velocityAtTime(key(n).time - thisComp.frameDuration); easeFactor = easeOut(t, 0, time_max, 1, 0); value + v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t) * easeFactor; } else { value; }

Cómo Controlar esta Expresión

Al igual que la anterior, solo necesitas concentrarte en los primeros parámetros para ajustar el comportamiento del rebote.

  • amp = 0.05; //amplitud: La amplitud controla la fuerza o intensidad del rebote. Aumenta este valor para un efecto más exagerado y dramático, o redúcelo para un rebote más sutil.
  • freq = 2; //frecuencia: La frecuencia determina la velocidad de la oscilación del rebote. Valores más altos resultan en rebotes más rápidos y apretados, mientras que valores más bajos crean una oscilación más lenta y suave.
  • decay = 3; //decaída: Este valor controla la rapidez con la que el rebote se desvanece. Un valor de decaída más alto hará que la animación se asiente y se detenga más rápidamente.

Cómo Aplicar las Expresiones: Paso a Paso

  1. Selecciona la capa que quieres animar.
  2. Crea al menos un keyframe (para la expresión de overshoot) o dos (para la de física) en la propiedad deseada (ej. Posición).
  3. Mantén presionada la tecla Alt (u Option en Mac) y haz clic en el icono del cronómetro junto al nombre de la propiedad.
  4. El campo de valor se convertirá en un cuadro de texto. Borra el contenido existente.
  5. Pega el código de la expresión que hayas elegido.
  6. Haz clic fuera del cuadro de texto para aplicar la expresión. ¡Listo! Previsualiza tu animación para ver la magia.

Tabla Comparativa: ¿Qué Expresión Deberías Usar?

Para ayudarte a decidir qué enfoque es mejor para tu proyecto, aquí tienes una comparación directa:

CaracterísticaExpresión de Física (Dan Ebberts)Expresión de Overshoot
Tipo de MovimientoSimula una caída y rebote realista contra una superficie.Crea un rebote elástico que ocurre al final de un movimiento.
Parámetros ClaveElasticidad, Gravedad, Nº de Rebotes.Amplitud, Frecuencia, Decaída.
Mejor Uso Para...Objetos que caen, pelotas, logos que impactan el suelo.Animación de texto, iconos, transiciones de UI, gráficos animados.
Keyframes NecesariosMínimo 2 (inicio y punto de impacto).Mínimo 1 (el rebote ocurre después del último keyframe).

Preguntas Frecuentes (FAQ)

¿La expresión me da un error, qué puede estar pasando?

Los errores más comunes suelen ser: no tener keyframes en la propiedad antes de aplicar la expresión, un error al copiar y pegar el código (asegúrate de copiarlo todo), o tener activado el motor de expresiones incorrecto. Ve a Archivo > Ajustes del proyecto > Expresiones y asegúrate de que el motor de expresiones esté configurado como "JavaScript".

¿Puedo usar estas expresiones en la propiedad de Escala o Rotación?

¡Sí! Ambas expresiones funcionan maravillosamente en las propiedades de Escala y Rotación. Aplicar la expresión de overshoot a la escala de un icono cuando aparece en pantalla es una técnica de Motion Graphics muy común y efectiva.

¿Es necesario entender el código para usarlo?

No es estrictamente necesario. Puedes simplemente copiar, pegar y ajustar los parámetros clave que hemos explicado. Sin embargo, tener una comprensión básica de lo que hace cada parte te dará más control y te ayudará a solucionar problemas si algo no funciona como esperas. Las expresiones son una herramienta, y conocer tu herramienta siempre es una ventaja.

Conclusión: Anima de Forma más Inteligente

Las expresiones de rebote son un ejemplo perfecto de cómo la automatización puede mejorar drásticamente tanto tu flujo de trabajo como la calidad de tus animaciones en After Effects. Son un atajo increíble para lograr un movimiento orgánico y profesional que, de otro modo, llevaría mucho tiempo y esfuerzo con la animación manual. No tengas miedo de experimentar con los valores de los parámetros para crear estilos de rebote únicos que se adapten a tu proyecto. ¡Ahora ve y haz que tus capas reboten con vida!

Si quieres conocer otros artículos parecidos a Domina el Rebote en After Effects con Expresiones puedes visitar la categoría Juegos.

Subir