지금까지는 상호작용을 활용한 Lottie 애니메이션의 경우 하나의 상호작용(클릭, 커서 올리기, 탐색, 반복, 토글 등을 할 때 애니메이션 재생)을 활용하는 경우가 대부분이었죠. 따라서 오픈소스 라이브러리인 Lottie 인터랙티비티(Lottie-Interactivity)를 통해 Lottie 애니메이션과 상호작용하는 방식을 바꾸고 이를 최대한 쉽게 만들고자 합니다. 이번 블로그 글에서는 현재 사용할 수 있는 기능을 소개해 드리겠습니다.
상호작용 연결이란 무엇인가요?
상호작용 연결(Interaction chaining)이란 Lottie 인터랙티비티를 통해 Lottie 애니메이션과 상호작용하는 새로운 방식을 말합니다. 이 새로운 기능을 통해 여러 사용 가능한 상호작용 및 플레이어 관련 이벤트에 따라 Lottie 애니메이션의 일부 또는 전체를 순서대로 재생할 수 있는 상호작용 시나리오를 쉽게 구성할 수 있죠.
상호작용 연결을 활용하면 사용자가 버튼을 특정 횟수만큼 클릭하거나 마우스 커서를 올릴 때 성공 애니메이션을 표시하거나, 애니메이션을 특정 횟수만큼 반복한 다음 다른 애니메이션을 표시하거나, Lottie 애니메이션이 완료될 때까지 누르거나, 아니면 간단하게 몇 가지 애니메이션을 차례대로 자동 재생하는 등의 시나리오를 쉽게 구성할 수 있어요. 애니메이션을 일일이 연결할 필요가 없죠.
Lottie 인터랙티비티는 액션 목록을 정의해 작동하기 때문에 상호작용을 원하는 만큼 정의할 수 있습니다.
사용 가능한 상호작용 연결 및 이벤트
현재 상호작용 연결 시스템에는 Lottie 애니메이션과 상호작용할 수 있는 7가지 방법이 제공되며, 이를 통해 애니메이션의 여러 부분을 전환할 수 있어요.
1) Click: 클릭하면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다.
2) Hover: 마우스 커서를 올리면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다.
마우스 클릭과 커서 올리기는 특정 횟수만큼 수행했을 때 애니메이션이 전환되도록 정의할 수 있습니다.
3) Repeat: 애니메이션을 특정 횟수만큼 재생하면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다.
4) Hold: 특정 프레임 동안 또는 완료될 때까지 애니메이션 위에 마우스 커서를 올리면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다. 커서를 애니메이션 밖으로 옮기면 애니메이션이 반대로 재생됩니다.
5) pauseHold: 특정 프레임 동안 또는 완료될 때까지 애니메이션 위에 마우스 커서를 올리면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다. 커서를 애니메이션 밖으로 옮기면 애니메이션이 일시 정지됩니다.
6) 탐색: 애니메이션과 커서의 수평 이동을 맞추면 상호작용 연결에 있는 다음 애니메이션/부분으로 이동합니다.
7) onComplete: 애니메이션/부분 재생이 완료되면 애니메이션이 전환됩니다.
추가 기능
Lottie 인터랙티비티는 URL을 통해 애니메이션을 불러오므로 LottieFiles에 공개된 모든 Lottie 애니메이션을 사용할 수 있으며, 상호작용 시나리오에 쉽게 통합할 수 있습니다. 또한, 더 이상 After Effects에서 일일이 힘들게 Lottie 애니메이션을 연결할 필요가 없죠. ‘경로’ 속성을 사용해 여러 애니메이션을 불러오기만 하면 되니까요.
상호작용 시나리오의 각 부분에는 애니메이션 속도 변경이나 재생 지연과 같은 유용한 기능도 사용할 수 있어요.
LottieInteractivity.create({
player: '#chainLoadPlayer',
mode: 'chain',
actions: [
{
state: 'click',
transition: 'onComplete'
},
{
state: 'autoplay',
transition: 'onComplete',
path: 'https://assets6.lottiefiles.com/packages/lf20_opn6z1qt.json'
},
{
state: 'autoplay',
transition: 'onComplete',
path: 'https://assets9.lottiefiles.com/packages/lf20_pKiaUR.json',
reset: true
}
]
});이 기능을 만든 이유가 무엇인가요?
현재 Lottie 애니메이션의 환경에서는 상호작용을 구성하는 게 번거롭습니다. 다양한 상호작용을 가진 Lottie 애니메이션이 많다면 더욱 번거롭죠. Lottie 인터랙티비티를 통해 상호작용 시나리오를 쉽게 생성할 수 있는 방법을 마련하고, 속도 변경이나 재생 지연과 같은 애니메이션 속성을 변경하는 방법을 추가하고 싶었습니다.
도움이 될 만한 링크
인터랙티비티 홈페이지에서 상호작용 연결이 어떻게 이루어지는지 확인해 보세요.
상호작용 연결을 시작해 보려면 여기에 있는 GitHub 페이지를 확인해 보세요.
Lottie 인터랙티비티를 잘 활용하고 계신다면 리포지토리에 ⭐️을 남겨 주세요. ☺️
더욱 다양한 상호작용 경험을 위해!
