Lottie
Lottie(로티) 위젯은 Lottie JSON 애니메이션 파일을 벡터로 재생하는 위젯입니다.
로딩 스피너·아이콘 모션·일러스트 애니메이션 등 가벼운 벡터 애니메이션을 화면에 표시할 때 사용합니다.
정의 / 역할
Lottie 위젯은 Lottie JSON 애니메이션을 불러와 지정한 영역에 재생합니다. 소스는 에셋(앱에 포함된 파일)·파일(기기 경로)·네트워크(URL) 중에서 선택할 수 있으며, 자동 재생·반복·역방향·프레임레이트·크기·맞춤 방식을 설정할 수 있습니다.
- 카테고리: Contents
- 기본 소스 종류:
asset(에셋) - 기본 동작: 자동 재생 + 반복
- 기본 크기(Sized Box): 가로
300, 세로150
기능
| 기능 | 설명 |
|---|---|
| 소스 선택 | 에셋·파일·네트워크(URL) 중에서 재생할 Lottie JSON 소스를 선택합니다. |
| 재생 제어 | 자동 재생·반복·역방향 재생 여부를 설정합니다. |
| 프레임레이트 | 재생 속도(fps)를 지정합니다. 비워 두면 JSON 파일에 담긴 값을 자동으로 사용합니다. |
| 크기·맞춤 | 너비·높이와 지정 영역 안에서의 맞춤 방식(fit)·정렬을 설정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- Lottie 항목을 캔버스로 끌어다 놓습니다. (기본 예시 애니메이션이 표시됩니다.)
- 오른쪽 속성 패널에서 소스 종류(
src)를 선택하고 경로 또는 URL(name)을 입력합니다. - 필요하면 자동 재생(
animate)·반복(repeat)·역방향(reverse)·프레임레이트(frameRate)·크기를 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
src | 애니메이션 소스의 위치 종류 | asset | asset(에셋), file(파일), network(URL) |
name | 재생할 Lottie JSON의 에셋 경로·파일 경로·네트워크 URL | 공백 | 문자열 |
animate | 불러온 뒤 자동으로 재생할지 여부 | true(참) | 참 / 거짓 |
frameRate | 재생 프레임레이트(fps). 비우면 JSON 값을 자동 사용 | 미지정 | 숫자(최소 1) |
repeat | 재생이 끝나면 반복할지 여부 | true(참) | 참 / 거짓 |
reverse | 역방향(거꾸로)으로 재생할지 여부 | false(거짓) | 참 / 거짓 |
Size | 표시 크기 - 너비(width)·높이(height)를 함께 지정하는 묶음 속성 | 미지정 | 크기(너비·높이, 숫자 px) |
fit | 지정한 크기 영역 안에서 애니메이션을 맞추는 방식 | 미지정 | fill, contain, cover, fitWidth, fitHeight, none, scaleDown |
alignment | 영역 안에서의 정렬 | 미지정(가운데) | 정렬 값 |
주의 / 팁
팁
frameRate를 비워 두면 Lottie JSON 파일에 저장된 프레임레이트를 자동으로 사용합니다. 소스를 바꾸면 새 파일의 값으로 자동 갱신될 수 있습니다.
경고
소스 경로(name)가 비어 있으면 기본 예시 애니메이션이 대신 표시됩니다. 경로·URL이 잘못되었거나 파일을 찾지 못하면 오류 메시지가 표시됩니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Lottie (로티) Widget Control 문서에서 확인하세요.