Unreal 언리얼 엔진 학습 - 간단한 UI 애니메이션 구현

위젯 블루프린트를 만든다

 

위젯 블루프린트를 열면 컨텐츠 드로어 옆에 애니메이션(사진상 툴팁 부분) 탭이 있는데 열어준다.

 

+Add를 눌러 애니메이션을 추가한다.

Hierachy 창에서 적용을 원하는 요소를 클릭하고, 트랙 창에서 +Add로 트랙을 추가한다. Text 크기를 바꿀 것이므로 Text를 선택해준다.

 

Details 화면에서 원하는 요소의 수치를 설정하고 Keyframe을 생성해준다.

애니메이션 후 적용될 수치를 조정하고 Keyframe을 추가한다.

 

 

Graph 탭에서 애니메이션을 플레이하는 조건을 설정한다.

 

Play Animation 노드는 애니메이션을 플레이해주며, 애니메이션은 변수로 저장되기 때문에 Get으로 세팅해주면 된다.

 

 

✅ 1️⃣ Text 로 추가하는 경우

👉 Text 위젯 자체를 애니메이션

조절 가능한 것들:

• Render Opacity
• Render Transform (이동/회전/스케일)
• Color and Opacity
• Font Size 등

📌 특징

• 실제 위젯이 화면에서 움직임
• 부모 레이아웃 계산과는 별개
• GPU 레벨에서 후처리처럼 움직임

💡 예시

• 텍스트 페이드 인
• 살짝 위로 튀어나오기
• 흔들림 효과

👉 대부분의 연출은 이걸 사용

---

✅ 2️⃣ Text (Horizontal Box Slot) 로 추가하는 경우

👉 레이아웃 슬롯을 애니메이션

Horizontal Box Slot이 조절하는 것:

• Padding
• Size
• Horizontal Alignment
• Vertical Alignment

📌 특징

• 레이아웃 자체가 다시 계산됨
• 형제 위젯들이 같이 밀림
• 진짜 “자리”가 바뀜

💡 예시

• 왼쪽 정렬 → 가운데 정렬
• Padding 늘려서 옆 위젯 밀어내기
• UI 확장 연출