테마와 모션 토큰 사용

테마와 모션 토큰을 사용하면 애니메이션 전체를 복제하지 않고도 하나의 .lottie에 여러 스타일을 적용할 수 있습니다. 런타임 로직을 작성하기 전에 확장 프로그램에서 각 스타일을 확인하세요.

테마와 모션 토큰의 차이

• 테마는 dotLottie 매니페스트에 이름과 함께 저장된 슬롯 값 모음입니다.

• 모션 토큰 또는 슬롯은 테마나 런타임에서 재정의할 수 있도록 특정 애니메이션 값을 외부에 노출합니다.

두 기능 모두 .lottie가 필요합니다. 일반 Lottie JSON에는 매니페스트 테마와 슬롯 정의가 유지되지 않습니다.

테마 전환

1. 테마가 포함된 .lottie 파일을 엽니다.

2. Motion Tokens 또는 Theme을 펼칩니다.

3. 매니페스트 테마나 프리셋을 선택합니다.

4. 애니메이션을 재생하며 영향을 받는 모든 상태를 확인합니다.

기본 테마로 돌아가려면 초기화하세요.

슬롯 값 편집

패널에는 다음과 같은 지원 값이 표시될 수 있습니다.

• 단색과 그레이디언트

• 스칼라와 벡터

• 텍스트와 타이포그래피 값

• 기존 키프레임에 있는 애니메이션 슬롯 값

이미지 슬롯은 읽기 전용입니다. 애니메이션 값은 기존 키프레임의 값만 변경하며 타이밍, 이징 또는 홀드 방식은 편집하지 않습니다.

테마 데이터 내보내기 또는 복사

일부 미리 보기에는 테마 데이터 내보내기나 런타임 setThemeData 예제가 표시됩니다. 현재 파일에 이 메뉴가 보일 때만 사용하세요. 표시되지 않는다면 .lottie를 유지하고 Code Snippet 패널에서 런타임 코드를 생성합니다.

테마 및 토큰 제작

VS Code에서는 테마와 토큰을 테스트하고 개발에 필요한 값을 확인할 수 있습니다. 새 슬롯 추가, 슬롯 연결 변경, 테마 제작, 애니메이션 토큰 타이밍 편집은 Lottie Creator에서 진행하세요.

관련 문서

• 연동 코드 생성

• 출력 형식 선택

• Lottie Creator 문서