한눈에 보는 정의
마지막 장면이 첫 장면과 자연스럽게 이어져 끊김 없이 계속 반복되는 짧은 애니메이션.
이런 말로 들어요
- 배경은 짧은 루프로 만들어서 길이에 맞게 늘릴게요.
- 로고 움직임이 루프 이음새에서 툭 끊겨요.
그림으로 보기
마지막 프레임이 첫 프레임과 같아 다시 처음으로 돌아가도 이음새가 보이지 않는 반복 애니메이션입니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
루프 애니메이션은 끝 프레임이 첫 프레임으로 매끄럽게 이어지도록 만들어, 몇 번을 반복해도 이음새가 보이지 않습니다. 로딩 아이콘, 화면 구석의 구독 버튼 움직임, 배경에서 천천히 움직이는 도형이 흔한 예입니다. 짧게 만들어 반복하므로 파일이 작고 길게 틀어 두기 좋습니다. 영상 프로그램에서는 마지막 움직임 구간을 반복시키는 기능으로, 웹에서는 CSS 애니메이션 반복 횟수를 무한으로 두는 방식으로 만듭니다.
실무 예시
예를 들어 라이브 방송 대기 화면에 4초짜리 루프 배경을 깔아 두면, 시작이 늦어져도 같은 화면이 매끄럽게 이어집니다. 이 백과의 움직이는 그림도 같은 방식으로 만들었습니다.
함께 살펴볼 점
첫 장면과 끝 장면의 위치, 크기, 색이 조금만 달라도 반복될 때 튀어 보입니다. 계속 움직이는 화면은 글 읽기를 방해할 수 있어, 웹에서는 동작 줄이기 설정을 켠 사용자에게 멈춘 화면을 보여 주는 편이 좋습니다.
출처와 검토 정보
- Expression language reference: loopOut (Adobe After Effects) 새 창
loopOut 표현식이 마지막 키프레임 구간을 레이어 끝까지 반복시키는 기능.
자료 확인 - animation-iteration-count (MDN) 새 창
CSS 애니메이션을 몇 번 반복할지 정하는 속성(무한 반복 포함).
자료 확인
내용 검토
최초 발행 · 내용 수정