애니메이션 연속 재생하기

애니메이션을 연속 재생 설정하면 애니메이션이 반복됩니다. 애니메이션 연속 재생은 고급 모드에서 설정할 수 있습니다. 각 요소를 개별적으로 연속 재생하도록 설정하거나, 여러 요소를 포함한 더욱 복잡한 애니메이션이 연속 재생하도록 설정할 수도 있습니다.

애니메이션의 단일 요소 연속 재생하기

연속 재생하도록 설정된 키프레임은 타임라인에 반투명 사본으로 표시됩니다. 아래 예에서 보면, red-div 요소에 총 4회 반복되는 0.5초 길이의 애니메이션이 있습니다.

타임라인의 재생 을 클릭하면 연속 재생되는 애니메이션을 스테이지에서 미리 볼 수 있습니다.

애니메이션의 여러 요소 연속 재생하기

페이지에 있는 모든 애니메이션을 반복하는 이벤트를 추가할 수 있으며, 시작 및 종료 시점을 직접 지정할 수 있습니다.

1. 애니메이션 반복을 시작하려는 위치에 타임라인 라벨을 설정합니다.
   1. 애니메이션 반복을 시작하려는 위치에서 이벤트 트랙(타임라인의 첫 번째 행)을 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 라벨 추가...를 선택합니다.
   2. 팝업 대화상자에서 loopStart와 같은 라벨 이름을 입력합니다.
   3. Enter 키를 누릅니다.
2. 애니메이션 반복을 종료하려는 위치에서 이벤트 트랙을 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 이벤트 추가를 선택합니다.
   
3. 이벤트 마커 를 더블클릭하여 이벤트를 구성합니다.
   1. 작업에 대해 다음을 선택합니다.
      • 타임라인 > gotoAndPlay(무한 반복 시)
      • 타임라인 > gotoAndPlayNTimes(지정된 횟수 반복 시)
   2. 수신자에는 해당 페이지를 선택합니다.
   3. 구성에서는 앞서 만든 라벨(예: loopStart)을 선택하고 반복하려는 횟수를 설정합니다.

미리보기 버튼을 사용하면 연속 재생 설정된 애니메이션이 브라우저에서 어떻게 작동하는지 확인할 수 있습니다.