Nesta página

Rotação e movimento cíclico

Elementos que giram, oscilam ou se movem em ciclo são muito comuns em motion design. Com expressões, você define o comportamento uma vez e ele roda para sempre, sem keyframes que se acumulam.

Rotação contínua

// uma volta completa a cada 3 segundos
time * (360 / 3)

// com variável
var rpm = 20;  // rotações por minuto
time * rpm * 360 / 60

Rotação com direção

// horário (padrão, positivo)
time * 60

// anti-horário (negativo)
time * -60

// muda de direção a cada segundo
(Math.floor(time) % 2 == 0 ? 1 : -1) * time * 60

Preservando keyframes de rotação

Para adicionar rotação contínua sobre keyframes existentes:

// value já contém os keyframes; somamos a rotação procedural
value + time * 45

Oscilação com Math.sin

Para movimento que vai e volta suavemente, sem a aleatoriedade do wiggle:

var freq = 1;    // ciclos por segundo
var amp = 50;    // amplitude em pixels
var phase = 0;   // offset de fase em radianos

Math.sin(time * freq * 2 * Math.PI + phase) * amp

Para múltiplas layers com fase diferente, criando efeito de onda:

var freq = 1;
var amp = 50;
var phase = thisLayer.index * 0.5;  // cada layer com fase diferente
Math.sin(time * freq * 2 * Math.PI + phase) * amp

Movimento circular

Para orbitar em torno de um ponto:

var centro = [thisComp.width/2, thisComp.height/2];
var raio = 200;
var velocidade = 0.5;  // rotações por segundo

var angulo = time * velocidade * 2 * Math.PI;
[centro[0] + Math.cos(angulo) * raio, centro[1] + Math.sin(angulo) * raio]

Movimento em espiral

var velocidade_angular = 1;  // rotações/s
var velocidade_radial = 50;  // pixels/s

var angulo = time * velocidade_angular * 2 * Math.PI;
var raio = time * velocidade_radial;

[thisComp.width/2 + Math.cos(angulo) * raio,
 thisComp.height/2 + Math.sin(angulo) * raio]

Bounce com física

Simula uma bola quicando com decaimento físico:

var amp = 0.08;
var freq = 3;
var decay = 4;
var 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 > 0) {
  var v = velocityAtTime(key(n).time - thisComp.frameDuration / 10);
  value + v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
} else {
  value;
}