Ejemplos de expresión

Última actualización el 29-08-2024

Descarga de proyecto de muestra

Descarga este archivo .aep para empezar a trabajar con los siguientes ejemplos de expresiones.

Ondulación aleatoria

La expresión de ondulación (wiggle) es una de las expresiones más habituales de After Effects. Ondula un objeto en valores aleatorios. Esta expresión se puede utilizar para hacer que la escena parezca más natural. Puede añadir esta expresión a la propiedad Posición de la capa.

Seleccione una capa de la composición.

Pulse P para que se muestre la propiedad Posición en el panel Cronología.

Mantenga pulsada la tecla Alt (Windows) u Opción (macOS) y haga clic en el cronómetro situado a la izquierda del nombre de la propiedad.

Introduzca el fragmento de código siguiente en el campo de expresión:

ondulación(2,30)

En este ejemplo, ondulación (frecuencia, cantidad), donde el primer número es el número de ondulaciones por segundo y el segundo número es el valor de la ondulación. Por lo tanto, si utiliza ondulación(2,30), la capa ondulará 2 veces por segundo hasta 30 píxeles en cualquier dirección.

Control de una ondulación con reguladores

Las expresiones se pueden añadir a los fotogramas clave reemplazando valores con vínculos a controles de expresión, como un Control del regulador. Sustituyendo el segundo argumento de la expresión ondulación() por un vínculo a un Control de regulador, se puede añadir un fotograma clave para que el comportamiento se inicie y se detenga en momentos específicos.

Añada un efecto de Control del regulador a cualquier capa y asígnele el nombre Cantidad de ondulación.

Aplique la siguiente expresión a la propiedad Posición de la misma capa:

// Utiliza el látigo de selección para crear el "effect(...)"Vincular al regulador
var wiggleAmount = effect("Wiggle Amount")("Slider");

// Se mueve 4 veces por segundo según la cantidad establecida por el regulador
wiggle( 4, wiggleAmount );

Girado de la capa para que forme un círculo

Puede crear una expresión sin necesidad de utilizar las propiedades de otras capas. Por ejemplo, puede hacer que una capa gire alrededor del centro de la composición.

Seleccione una capa de la composición.

Pulse P para que se muestre la propiedad Posición en el panel Cronología.

Mantenga pulsada la tecla Alt (Windows) u Opción (macOS) y haga clic en el cronómetro situado a la izquierda del nombre de la propiedad.

Introduzca el fragmento de código siguiente en el campo de expresión:

var centerOfComp = [ ( thisComp.width / 2 ), ( thisComp.height / 2) ];
var circleOverTime = [ Math.sin( time ) * 50, -Math.cos( time ) * 50 ];
centerOfComp + circleOverTime;

Resaltado

Esta expresión, conocida normalmente como rebote de inercia, utiliza la animación de los fotogramas clave de una capa para crear un resaltado natural. Crea un movimiento de rebote de cualquier parámetro de un fotograma clave al siguiente, en función de su velocidad. El rebote ocurre en la dirección en la que se encuentre el objeto. Para conseguir esta animación: 

Cree o importe los gráficos de After Effects.

Añada fotogramas clave a la propiedad Posición de la capa que desee animar.

 Añada la siguiente expresión a la propiedad Posición de la capa:

// Configura valores para controlar el exceso.
// Vincula estos a controles de expresión del regulador para previsualizar rápidamente diferentes configuraciones.
var amp = 40;
var freq = 30;
var decay = 50;

// Encuentra el fotograma clave más reciente
var nK = nearestKey(time);
var n = (nK.time <= time) ? nK.index : --nK.index;
var t = (n === 0) ? 0 : time - key(n).time;

// Si el tiempo actual es posterior a un fotograma clave, calcula el exceso.
// Si no, usa el valor original.
if ( n > 0 && t < 1 ) {
var v = velocityAtTime( key( n ).time - thisComp.frameDuration /10 );
value + v * amp * .001 * Math.sin(freq * .1 * t * 2 * Math.PI) / Math.exp(decay * .1 * t);
} else {
value;
}

Rotación con el tiempo

Puede utilizar el icono espiral para vincular valores de rotación entre capas a objetos animados. En este caso, considere los tres círculos como tres manecillas del reloj: la manecilla de la hora se mueve de hora a hora, mientras que la del minuto rota toda la circunferencia de la esfera del reloj.

Importe o cree tres círculos con capas de color sólido. Vamos a asumir que uno de ellos funciona como la manecilla de la hora, el otro es el de los minutos y el tercero, el de los segundos.

Establezca los puntos de anclaje al final de las capas.

Mueva las capas de forma que los puntos de anclaje estén en el centro de la composición.

Defina los fotogramas claves de rotación de la manecilla de las horas. Seleccione la propiedad Rotación para la manecilla de los minutos y elija Animación > Añadir expresión.

Arrastre el icono de espiral de la propiedad Rotación correspondiente al círculo más grande. Aparece la siguiente expresión: 

thisCompayer(“circle”)otation

Para que el segundo círculo rote 12 veces más rápido que el primero, añada *12 al final de la expresión de la siguiente manera: 

thisCompayer(“circle”)otation*12

Repita el mismo procedimiento con el tercer círculo y añada *24 al final de la expresión:

thisCompayer(“circle”)otation*24

Bucle

Las expresiones se pueden utilizar para reproducir en bucle y ampliar la animación sin añadir fotogramas clave adicionales: por ejemplo, se pueden hacer girar varias formas hasta el final de una composición. Para ello, añada un fotograma clave a la propiedad Rotación para la rotación inicial y, a continuación, otra con la rotación final. Aplicar el método el oopOut() a la propiedad Rotación de fotogramas clave permitirá que la capa siga girando después del último fotograma clave.

Los argumentos utilizados en el ejemplo loopOut() de abajo establecen el tipo de bucle y el número de fotogramas clave a incluir en el bucle.

//loopOut configurado para repetir todos los fotogramas clave
loopOut("cycle", 0);

El primer argumento es "cycle", uno de los cuatro modos de bucle disponibles en el método loopOut. Los otros tres son "continue", "offset" y "ping-pong""cycle" comienza a reproducirse en el último fotograma clave, a partir de los valores del primer fotograma clave del intervalo definido por el segundo argumento.

El segundo argumento es el número de fotogramas clave que se deben incluir en el bucle, contados hacia atrás desde el último fotograma clave. Si el segundo argumento no se asigna o se establece en 0, todas las animaciones de fotograma clave de la propiedad se reproducirán en bucle después del último fotograma clave. Si el argumento es 1, la animación entre el último fotograma clave y el que estaba antes se reproducirá en bucle. En caso de que el argumento sea 2, la animación en bucle se situará entre el último fotograma clave y los dos fotogramas clave anteriores, y así sucesivamente.

Obtención de la posición real de una capa primaria

Cuando una capa tiene un elemento primario, el valor que se muestra en la propiedad Posición no es su ubicación “real” en la Composición, pero sí lo es en relación con la ubicación de su capa principal. Para buscar la ubicación real de la capa primaria, se debe utilizar una expresión para convertir el espacio de coordenadas de la capa principal en el espacio de coordenadas de la composición. Aplique la siguiente expresión a la Posición de una capa que no tiene un elemento primario para vincularla a la ubicación de la capa primaria:

// Define la capa vinculada
var targetLayer = thisComp.layer(&quot;Parented Layer&quot;);

// Encuentra el punto de ancla de la capa vinculada en la composición
targetLayer.toComp( targetLayer.anchorPoint );

Retardo de la posición de una capa con respecto a su capa principal

El retardo y el desplazamiento son unos métodos estupendos para hacer que la animación sea más dinámica y natural. Puede crear y controlar estos tipos de desplazamientos colocando muchas capas en una capa principal y, a continuación, aplicando una expresión a la Posición de cada secundaria para retrasar el movimiento heredado de la principal.

Nota: solo funciona con capas que tienen capas primarias.

// Establece una cantidad de retraso en fotogramas
var delay = 5;

// Desplaza la posición de la capa en el tiempo según el retraso
parent.fromComp( toComp( anchorPoint, time - framesToTime( delay ) ) );

También puede controlar el nivel de retardo en función del índice de la capa secundaria en relación con la capa principal. De este modo, puede cambiar el orden de la animación de las capas secundarias con la opción de reordenarlas en la Cronología por debajo de la principal (o por encima si desea que la animación se produzca antes que la principal):

// Establece una cantidad de retraso en marcos
var delay = 5;

// Multiplica el retraso según el índice de esta capa en relación con su principal
var multiplyDelay = delay * ( index - parent.index )

// Desplaza la posición de la capa en el tiempo según el retraso
parent.fromComp( toComp( anchorPoint, time - framesToTime( multiplyDelay ) ) );

Ejemplo de expresión: Inicio o parada de la ondulación en un momento determinado

Añada la siguiente expresión a la propiedad Posición de un elemento para iniciar un efecto de ondulación que comience a partir de los 2 segundos de la animación:

var timeToStart = 2;

if (time > timeToStart) {
wiggle(3,25);
} else {
value;
}

Añada la siguiente expresión a la propiedad Posición de un elemento para iniciar un efecto de ondulación al comienzo de la animación y detenerlo al cabo de 4 segundos:

var timeToStop = 4;

if ( time > timeToStop ) {
value;
} else {
wiggle( 3, 25 );
}

Añada la siguiente expresión a la propiedad Posición de un elemento para iniciar un efecto de ondulación al principio a los 2 segundos de la animación y detenerlo a los 4 segundos:

var timeToStart = 2;
var timeToStop = 4;

if ( ( time > timeToStart ) && ( time < timeToStop ) ) {
wiggle(3,25);
} else {
value;
}

Ejemplo de expresión: Colocación de una capa entre otras dos

Esta expresión de ejemplo coloca y mantiene una capa a una distancia equilibrada entre otras dos capas.

Empiece por Crear tres capas.

Anime las posiciones de las dos primeras capas en el panel Cronología.

Sugerencia

Obtenga más información acerca de cómo trabajar con Trazados de movimiento.

Seleccione la tercera capa. Pulse P para que se muestre correctamente la propiedad Posición. Mantenga pulsada la tecla Alt (Windows) u Opción (macOS) y haga clic en el botón del cronómetro   situado a la izquierda del nombre de la propiedad. 

Introduzca el texto siguiente en el campo de expresión:

( thisComp.layer(1).position + thisComp.layer(2).position ) / 2

Creación de un rastro de imágenes

Esta expresión de ejemplo ordena a una capa que se sitúe en la misma posición que la capa inmediatamente superior del panel Cronología, pero retrasada una cantidad específica de tiempo (en este caso, 0,5 segundos). Puede definir expresiones parecidas para las otras propiedades geométricas.

Empiece con una capa de forma escalada hasta un 30 % aproximadamente del tamaño de la composición. 

Abra la propiedad Posición y añada fotogramas clave. Seleccione la capa. Pulse P para que se muestre correctamente la propiedad Posición. Mantenga pulsada la tecla Alt (Windows) u Opción (macOS) y haga clic en el botón del cronómetro   situado a la izquierda del nombre de la propiedad.

Introduzca el texto siguiente en el campo de expresión:

thisComp.layer(thisLayer, -1).position.valueAtTime(time - .5)

Duplique la última capa cinco veces seleccionándola y pulsando Ctrl+D (Windows) o Comando+D (macOS) cinco veces. Todas las capas siguen la misma trayectoria y cada una de ellas se retrasa 0,5 segundos con relación a la anterior.

Ejemplo de expresión: Creación de un abombado entre dos capas

Esta expresión de ejemplo sincroniza el argumento Centro del abombado del efecto Abombar de una capa con la posición de otra capa. Por ejemplo, puede crear un efecto que parezca una lupa que se desplaza sobre una capa y que haga que el contenido situado bajo la lupa se abombe a medida que se mueve la lente (es decir, la capa superpuesta). Esta expresión utiliza el método fromWorld, que hace que la expresión funcione correctamente independientemente de si se mueve o no la capa de la lupa o la capa subyacente. Puede girar o escalar la capa subyacente y la expresión permanecerá intacta.

También puede utilizar otros efectos, como, por ejemplo, Rizo, con esta expresión.

Empiece por Crear dos capas. Convierta una capa en una lente de aumento u objeto similar con un orificio en el centro y asígnele el nombre de Lupa

Anime la posición de la capa de lente de aumento.

Seleccione la propiedad Centro del abombar del efecto Abombar en el panel Cronología. Seleccione Animación > Añadir expresión o mantenga pulsada la tecla Alt (Windows) u Opción y haga clic (macOS) en el botón del cronómetro   de la propiedad.

Seleccione el texto de la expresión predeterminada y escriba lo siguiente:

fromWorld(thisCompayer(“Magnifier”)osition)

Ejemplo de expresión: Opacidad de transición de una capa 3D en función de la distancia desde la cámara

Aplique la siguiente expresión a la propiedad Opacidad de una capa 3D:

var startFade = 500; // Inicio del desvanecimiento a 500 píxeles de la cámara.
var endFade = 1500; // Final del desvanecimiento a 1500 píxeles de la cámara.

try {
// Comprueba si hay una cámara
var C = thisComp.activeCamera.toWorld([0,0,0]);
} catch ( err ) {
// No hay cámara, por lo que se asume 50 mm
var w = thisComp.width * thisComp.pixelAspect;
var z = (w/2)/Math.tan(degreesToRadians(19.799));
var C = [0,0,-z];
}

var P = toWorld( anchorPoint );
var d = length( C, P );

linear( d, startFade, endFade, 100, 0 );

El fundido comienza a una distancia de 500 píxeles de la cámara y se completa a 1.500 píxeles de la cámara. El método de interpolación lineal se emplea para asignar valores de distancia a valores de opacidad.

Ejemplo de expresión: Invisibilización de una capa 3D si se sitúa de forma opuesta a la cámara

Aplique la siguiente expresión a la propiedad Opacidad de una capa 3D:

if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
0;
}

Ejemplo de expresión: Volteo horizontal de la capa si se sitúa de forma opuesta a la cámara

Aplique la siguiente expresión a la propiedad Escala de una capa 3D:

if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
[ -value[0], value[1], value[2] ];
}

Ejemplo de expresión: Animación de una escala en cada marcador de la capa

Aplique la siguiente expresión a una propiedad Escala para hacer que una capa tiemble en cada marcador:

var n = 0;
var t = 0;

if (marker.numKeys > 0){
n = marker.nearestKey(time).index;
if (marker.key(n).time > time) n--;
}
if (n > 0) t = time - marker.key(n).time;

var amp = 15;
var freq = 5;
var decay = 3.0;

var angle = freq * 2 * Math.PI * t;
var scaleFact = (100 + amp * Math.sin(angle) / Math.exp(decay * t)) / 100;

[value[0] * scaleFact, value[1] / scaleFact];

Nota

Para añadir un marcador, seleccione Capa > Marcadores > Marcador nuevo .

Puede utilizar cualquier expresión en el lugar de la expresión ondulación utilizada aquí para comenzar y finalizar la influencia de cualquier expresión en un momento determinado.

Ejemplo de expresión: Coincidencia del plano focal de la cámara con otra capa

Aplique la siguiente expresión a la propiedad Distancia de enfoque de una capa de una cámara para que la distancia focal coincida con la distancia del punto de ancla de una capa denominada 'Target':

var target = thisComp.layer("target");
var V1 = target.toWorld( target.anchorPoint ) - toWorld( [ 0, 0, 0 ] );
var V2 = toWorldVec( [ 0, 0, 1 ] );

dot( V1, V2 );

Más recursos de Expresión

Ahora que ha entendido algunos de los conceptos que hay detrás de expresiones, visite la comunidad para obtener ejemplos reales y compartir su trabajo.