Loop com hold e offset

cycle e pingpong cobrem a maioria dos casos. offset e hold abrem possibilidades que poucas pessoas exploram: movimento contínuo infinito sem keyframes intermediários.

loopOut(“offset”) na prática

O offset é o loop mais poderoso para movimento contínuo. Em vez de reiniciar do valor inicial, ele acumula o deslocamento total do ciclo a cada repetição.

Exemplo: um objeto que se move 500px para a direita em 30 frames. Com loopOut("offset"), vai continuar se movendo 500px a cada 30 frames, indefinidamente.

// em Position:
loopOut("offset")

Resultado: scroll infinito, roda girando sem parar, objeto que percorre o espaço continuamente.

Combinando entrada + loop offset

O caso mais comum: animação de entrada, depois loop contínuo.

// Keyframes:
// Frame 0:  Position = [0, 540]  (fora de frame, abaixo)
// Frame 15: Position = [0, 0]    (posição final)
// Frame 45: Position = [0, -540] (saindo pelo topo — 1 ciclo completo)

loopOut("offset", 1)
// usa só o último keyframe (frame 45) como ciclo de offset
// o objeto entra, para, depois continua subindo infinitamente

loopOut(“cycle”) com numKeyframes

Quando você quer que o loop use só parte dos keyframes:

// Keyframes em Position Y:
// Frame 0:  0   (posição inicial — entrada)
// Frame 10: -20 (sobe levemente — antecipação)
// Frame 20: 100 (pulo)
// Frame 35: 0   (aterrissa — início do loop)

loopOut("cycle", 2)
// loop usa só os últimos 2 keyframes (frames 20 e 35)
// o pulo se repete, mas a entrada (frames 0-10) não

Hold keyframes como loop

Técnica diferente: use hold keyframes (step interpolation) para criar sequências frame a frame que loopam.

Funciona bem para: contadores, displays de números, animações de sprite.

Loop em propriedades de efeito

Loop não é só para posição e rotação. Funciona em qualquer propriedade animada:

// opacidade pulsando:
// Keyframe 0:  100
// Keyframe 12: 0
// Keyframe 24: 100
loopOut("pingpong")
// pulsação infinita suave

// cor em loop (efeito de cor sólida):
loopOut("cycle")