Studio 에디터: 사용자 지정 클릭 및 마우스오버 인터랙션 추가하기

인터랙션을 추가해 방문자가 요소를 클릭하거나 마우스오버 시 표시되는 애니메이션 경험을 조성하세요. 인터랙션은 인터랙션을 트리거한 동일한 요소 또는 페이지의 다른 요소에 애니메이션을 적용할 수 있습니다. 

사용자 지정 인터랙션을 사용하면 애니메이션을 처음부터 디자인할 수 있는 창의적 자유를 누릴 수 있습니다. 또한, 애니메이션의 실행 시점을 제어해 더욱 효율적으로 만들 수 있습니다. 

먼저 인터랙션을 트리거하는 요소를 선택하세요. 이는 방문자가 애니메이션을 보기 전에 마우스오버하거나 클릭하는 요소입니다. 요소를 선택한 후에는 속성 패널로 이동해 새 인터랙션을 추가합니다. 

이제 애니메이션을 적용할 요소, 표시될 애니메이션, 마우스오버 또는 클릭 시 발생하는 정확한 동작을 선택할 수 있습니다. (예: 애니메이션 적용, 활성화 / 비활성화 등)

이제 애니메이션을 처음부터 만들 차례입니다. 모든 종류의 레이아웃 및 디자인 변환을 추가해 요소의 크기 (크기 조정), 위치(이동), 각도(회전), 색상 채우기 등을 변경하세요. 

요소의 초기 상태를 디자인해 구축한 애니메이션을 보완할 수도 있습니다. 초기 상태는 방문자가 상호 작용하기 전 요소가 로딩될 때 표시되는 방식입니다. 이 모든 것을 하나로 묶으려면 애니메이션의 지속 시간 및 Ease 효과를 설정하세요. 

2.   (선택사항) 플로팅 바에서  재생을 클릭해 애니메이션을 미리보기합니다.

3.   준비가 되면 확인을 클릭합니다.

아래 질문을 클릭해 인터랙션 생성에 대한 자세한 내용을 확인하세요.