[ UE5 ] 마우스 호버 애니메이션

마우스 커서를 올렸을때 애니메이션이 출력되는 이벤트를 구현해보겠습니다.

 

1. 애니메이션을 적용할 위젯을 트랙에 추가합니다.

저는 버튼에 애니메이션을 적용해 보겠습니다.

 

2. 특정 시점에서의 속성을 설정해줍니다.

버튼을 이동시키고 뒤에 이미지가 나오게 했습니다.

 

3. 이벤트 탭에서 '호버 시' 이벤트를 추가합니다.

 

4. Play Animation 함수에 방금 만든 MouseHover 애니메이션을 연결하여 마우스 호버 시 애니메이션을 출력하게 합니다.

 

마우스를 언호버 시켰을 때 애니메이션을 구현하지 않은 상태라 위젯의 변경된 속성이 그대로 남아있습니다.

마우스 커서를 뗐을 때 원상태로 돌아가게 해보겠습니다.

 

5. 버튼 위젯에서 '비호버 시' 이벤트를 추가합니다.

 

6. 동일한 애니메이션을 연결해주고 'Play Mode' 속성을 Reverse로 설정하여 애니메이션이 되감기 되게 합니다.

 

결과

마우스 커서를 뗐을 때 원상태로 되돌아가는것을 확인할 수 있습니다.