로티 모션그래픽 삽입

웹사이트 디자인에 Lottie 애니메이션을 활용하여 상호 작용을 강화하고 사용자의 관심을 사로잡으세요. 그런 다음 Lottie 요소 구성 및 참여를 사용하여 애니메이션 재생을 관리합니다.

이 기사에서 다음 내용을 알아볼 수 있습니다.

1. Lottie JSON 및 dotLottie 애니메이션 파일을 얻는 과정
2. 사이트에 애니메이션 추가하기
3. 애니메이션 설정 수정
4. 상호작용을 통해 애니메이션을 제어하는 방법

Lottie JSON 및 dotLottie 애니메이션 파일을 얻는 방법

Lottie 애니메이션을 Lottie JSON 또는 dotLottie 파일 형식으로 웹사이트에 업로드할 수 있습니다. 

Lottie JSON 파일을 얻는 방법에는 두 가지가 있습니다.

• After Effect 애니메이션을 JSON 파일로 내보내기 무료 After Effects bodymovin 플러그인
• 다음에서 JSON 애니메이션 파일 검색 Lottiefiles.com (또는 다른 온라인 애니메이션 라이브러리)

dotLottie 파일을 얻는 방법에는 3가지 대안이 있습니다.

• 다음을 사용하여 기존 Lottie JSON 파일을 dotLottie로 변환합니다. JSON을 dotLottie로 변환 도구
• After Effects에서 dotLottie 파일을 직접 내보냅니다. LottieFiles 플러그인
• 사전 구축된 dotLottie 파일을 다음에서 다운로드하세요. LottieFiles.com.

추가 참고자료

• After Effects에서 Lottie용 애니메이션을 제작하는 방법을 알아보세요.
• Lottie에서 지원하는 After Effects 기능 살펴보기
• Webflow의 After Effects 및 Lottie에 대해 자세히 알아보십시오.

웹사이트에 애니메이션 통합하기

Lottie JSON 또는 dotLottie 애니메이션을 기호, 썸네일, 페이지 배경, 페이지 로더, 맞춤형 애니메이션 커서 등으로 활용할 수 있습니다. 

자산 패널에 Lottie JSON 및 dotLottie 파일을 추가하려면:

1. “를 클릭하세요.자산왼쪽 도구 모음 내의 ” 기호
2. '를 탭하세요.구름” 업로드 기호
3. 컴퓨터에서 하나 이상의 파일을 선택하세요

그런 다음 애니메이션을 웹사이트에 통합할 수 있습니다. 자산 패널에서 바로 캔버스로 드래그 앤 드롭하거나 로티 애니메이션 요소. Lottie 애니메이션 구성요소를 사용하려면:

1. 로 이동 패널 추가 > 미디어 부분
2. 삭제 로티 애니메이션 Webflow 캔버스에 구성 요소
3. 누르다 Lotie 시퀀스 교체 Lottie 애니메이션 구성 요소 설정에서
4. 다음에서 Lottie JSON 또는 dotLottie 파일을 선택하세요. 자산 패널

애니메이션 구성 수정

Lottie 애니메이션 구성 요소 설정은 사이트 페이지의 애니메이션 동작을 제어합니다. 설정을 조정하려면 로티 애니메이션 구성 요소 및 머리 요소 설정 패널 > 로티 애니메이션 설정. 그런 다음 다음에 대한 애니메이션 설정을 조정할 수 있습니다.

• 내장 기간 — 애니메이션이 실행되는 기간
• Looping — 애니메이션이 무한히 순환하는지 여부
• 역방향 재생 — 애니메이션이 역방향으로 재생되는 경우
• 렌더링 — SVG 또는 캔버스

주요 팁: 기본적으로 모든 애니메이션은 페이지 로드 시 실행됩니다. 따라서 페이지를 방문하는 개인은 상호 작용을 통해 애니메이션 재생을 반복하거나 조절하도록 애니메이션을 설정하지 않는 한 스크롤 없이 볼 수 있는 부분(스크롤이 필요한 페이지 섹션) 아래의 애니메이션을 볼 수 없습니다.

상호작용을 통해 애니메이션 조절

상호 작용을 통해 Lottie 애니메이션을 관리하여 애니메이션 실행 방법과 시기를 수정할 수 있습니다. 상호 작용을 사용하면 애니메이션을 시작하는 트리거를 정의하고, 재생할 애니메이션의 특정 세그먼트를 선택하고, 애니메이션 재생을 중지할 위치를 결정할 수 있습니다. 

Lottie 애니메이션에서는 두 가지 상호 작용에 액세스할 수 있습니다.

1. 그만큼 로티 재생 생기
2. 그만큼 로티 행동 

이러한 상호작용은 다음과 같다는 점을 명심하세요. 혼자서 로티 애니메이션에 적용 가능합니다.

메모: 애니메이션의 지속 시간/속도를 수정해야 하는 경우 다음을 통해 실행할 수 있습니다. 로티 애니메이션 설정 섹션 내의 요소 설정 패널. 설정에 유의하세요. 로티 애니메이션 설정 섹션은 다음에 의해 재정의될 수 있습니다. 로티 재생 의 설정 상호 작용 패널.

주요 팁: 기본적으로 모든 애니메이션은 페이지 로딩 시 재생됩니다. 따라서 상호 작용을 통해 애니메이션 재생을 반복하거나 제어하도록 애니메이션을 구성하지 않는 한 방문자는 접힌 부분(스크롤이 필요한 섹션) 아래의 애니메이션을 볼 수 없습니다.

그림 1: 클릭 시 애니메이션 시작

상호 작용을 통해 사용자가 클릭할 때 재생할 애니메이션을 설정할 수 있습니다.

1. 당신의 로티 애니메이션 캔버스의 구성 요소
2. 액세스 상호 작용 패널
3. 을 치다 "...을 더한” 아이콘 옆에 요소 트리거
4. '마우스 클릭(탭)'을 선택하세요.
5. 옆에 있는 "작업 선택"을 선택하세요. 행동 에서 첫 번째 클릭 시 부분
6. 내에서 "Lottie 재생"을 선택하십시오. 통합

당신은 또한 다음과 같은 옵션을 가지고 있습니다 지연 재생, 뒤집다 애니메이션을 설정하거나 고리.

데모 2: 보기 안팎으로 스크롤할 때 애니메이션 시작

애니메이션이 화면의 볼 수 있는 영역에 들어오고 나갈 때 애니메이션을 트리거하는 옵션도 있습니다.

1. 당신을 선택하세요 생기 있는 디자인 캔버스의 일러스트레이션
2. 다음으로 이동하세요. 상호 작용 패널
3. “를 탭하세요....을 더한" 기호 옆에 요소 트리거
4. '스크롤하여 보기'를 선택하세요.
5. 옆에 있는 작업을 선택하세요. 행동 에서 스크롤해서 볼 때 범주
6. 아래에서 '애니메이션'을 선택하세요. 통합
7. 옆에 있는 작업을 선택하세요. 행동 내 스크롤하여 보기 밖으로 나갔을 때 부분
8. '애니메이션 재생'을 선택하세요. 통합
9. 활성화 뒤집다 옵션

다음을 사용하여 애니메이션을 사용자 정의하세요. 오프셋 또는 지연.

예 3: 페이지 로드 중 애니메이션 세그먼트 시작

활용 생기 있는 애니메이션 동작을 정밀하게 제어하기 위한 동작 상호작용. 시작 및 종료 프레임을 조정하고, 여유 기능을 구현하고, 특정 기간을 정의합니다.

애니메이션의 시작 또는 끝 프레임을 조정하려면 다음을 수행하십시오.

1. 당신의 위치를 찾아보세요 생기 있는 디자인 캔버스의 일러스트레이션
2. 열기 상호 작용 패널
3. “를 선택하세요....을 더한옆에 있는 ” 아이콘 페이지 트리거
4. '페이지 로드'를 선택하세요.
5. 다음에 인접한 작업을 선택하세요. 행동 에서 페이지 로딩이 시작될 때 부분
6. 아래에서 "애니메이션 시작"을 선택하십시오. 맞춤 애니메이션
7. '를 탭하세요....을 더한" 기호 옆에 시간 제한 애니메이션
8. 애니메이션에 제목을 지정합니다(예: "로드 시 애니메이션 시작")
9. “를 선택하세요....을 더한" 옆에 행위
10. 아래에서 '애니메이션'을 선택하세요. 통합
11. 아래의 애니메이션 프레임을 조정합니다. 생기 원하는 시작 프레임에 대한 섹션
12. 아래에서 "초기 상태로 설정" 옵션을 표시합니다. 타이밍
13. '를 탭하세요....을 더한" 옆에 행위
14. 아래에서 '애니메이션'을 선택하세요. 통합
15. 애니메이션 프레임을 정의합니다. 생기 특정 프레임에서 정지하는 섹션(예: 끝 프레임까지 재생하려면 100%로 설정)
16. 누르다 구하다

필요에 따라 애니메이션의 지속 시간, 지연 또는 완화 효과를 조정합니다.

빠른 팁: 애니메이션의 기본 지속 시간을 사용하려면 생기 있는 디자인 캔버스의 일러스트레이션에서 다음으로 이동합니다. 요소 설정 > 로티 애니메이션 설정 "내장 기간 사용" 옵션을 활성화하세요.