Loop Expression

키프레임 애니메이션을 무한히 반복하거나, 앞뒤로 왕복시키는 익스프레션입니다.

Preview

키프레임 애니메이션을 반복합니다. cycle은 처음부터 다시, pingpong은 앞뒤로 왕복합니다.

cycle

처음으로 점프

pingpong

앞뒤로 왕복

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Code

loopOut (마지막 키프레임 이후 반복)

// 기본 반복
loopOut();

// 타입 지정
loopOut("cycle");      // 처음부터 다시 시작
loopOut("pingpong");   // 앞뒤로 왕복
loopOut("offset");     // 값을 누적하며 반복
loopOut("continue");   // 마지막 속도 유지

loopIn (첫 키프레임 이전 반복)

loopIn("cycle");
loopIn("pingpong");

특정 키프레임만 반복

// 마지막 2개 키프레임만 반복
loopOut("cycle", 2);

// 첫 3개 키프레임만 반복
loopIn("cycle", 3);

Loop Types

타입	설명
cycle	마지막 키프레임에서 첫 키프레임으로 점프하여 반복
pingpong	끝에서 방향을 바꿔 앞뒤로 왕복
offset	반복할 때마다 값을 누적 (위치가 계속 이동)
continue	마지막 키프레임의 속도로 계속 이동

Examples

무한 회전

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Rotation에 cycle을 적용하면 무한히 회전합니다.

// Rotation 속성에 적용
loopOut("cycle");

흔들리는 애니메이션

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

pingpong으로 부드럽게 커졌다 작아지는 반복을 만듭니다.

// Scale이나 Position에 적용
loopOut("pingpong");

계속 움직이는 배경

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

offset으로 값이 누적되어 배경이 계속 한 방향으로 이동합니다.

// Position에 적용 - 값이 계속 누적
loopOut("offset");

양방향 반복

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

loopIn과 loopOut을 모두 사용하면 시작 전과 끝 후 모두에서 반복됩니다.

// 앞뒤 모두 반복
loopIn("pingpong");
loopOut("pingpong");

Tips

키프레임 필수

Loop 익스프레션은 반드시 2개 이상의 키프레임이 있어야 작동합니다.

Cycle vs Pingpong

• cycle: 깜빡이는 효과, 회전 등에 적합
• pingpong: 부드러운 왕복 움직임에 적합

주의

offset 타입은 값이 계속 커지므로, 너무 긴 컴포지션에서는 주의가 필요합니다.