UI 애니메이션 구현

• 위젯 블루프린트 에디터를 엽니다.
• 디자이너(Designer) 탭으로 이동합니다.
• 애니메이션(Animations) 패널(일반적으로 좌측 하단에 위치)에서 + 애니메이션(+ Animation) 버튼을 클릭합니다.
• 새 애니메이션 이름을 지정합니다. (예: FadeInAnim, ButtonPulse)

• 새로 생성된 애니메이션을 선택합니다.
• 타임라인 뷰에서 + 트랙(+ Track) 버튼을 클릭합니다.
• 애니메이션을 적용할 위젯을 선택합니다. (예: StartGameButton 위젯 변수) Is Variable은 그래프에서 해당 위젯 참조에 접근할 때 사용합니다. 애니메이션 트랙의 대상 지정과 구별합니다.
• 선택된 위젯에 대한 트랙이 추가됩니다. 이제 이 트랙의 오른쪽에 있는 + 버튼을 클릭하여 애니메이션을 적용할 속성을 선택합니다.
  • Render Transform: 위치(Translation), 회전(Rotation), 크기(Scale), 기울기(Shear) 등 위젯의 시각적 변형을 조절합니다.
  • Color And Opacity: 위젯의 색상과 투명도(Alpha)를 조절합니다. (Text나 Image 위젯에 유용)
  • Render Opacity: 패널을 포함한 위젯 전체의 표시 불투명도를 조절합니다. 모든 속성이 트랙을 지원하는 것은 아니므로 해당 위젯에 제공되는 키프레임 가능한 속성을 선택합니다.
• 키프레임(Keyframe) 설정
  • 타임라인 헤드를 시작 지점(예: 0초)으로 옮깁니다.
  • 선택한 속성(예: Render Transform의 Translation) 옆의 키프레임 추가 버튼(+ 아이콘)을 클릭합니다. 이때 현재 위치의 속성 값이 키프레임으로 기록됩니다.
  • 타임라인 헤드를 끝 지점(예: 1초)으로 옮깁니다.
  • 디테일 패널에서 해당 위젯의 속성 값(예: Translation의 Y값을 -100에서 0으로 변경)을 변경하고 다시 키프레임 추가 버튼을 클릭합니다.
  • 이제 0초부터 1초까지 위젯이 지정된 속성 변화를 통해 움직이는 애니메이션이 생성됩니다.

애니메이션 미리보기: 타임라인의 재생 버튼을 클릭하여 애니메이션을 미리 볼 수 있습니다.

그래프(Graph) 탭으로 이동합니다.

애니메이션 변수 사용: 애니메이션 패널에 있는 애니메이션 에셋(예: FadeInAnim)을 그래프 탭으로 드래그하면, 해당 애니메이션에 대한 참조 변수(Get 노드)가 생성됩니다.

애니메이션 재생 노드: 이 애니메이션 변수 핀에서 드래그하여 다음과 같은 노드들을 검색하고 연결하여 애니메이션을 제어합니다.

• Play Animation: 애니메이션을 한 번 재생합니다. 가장 기본적인 재생 노드입니다.
  • In Animation: 애니메이션 변수를 연결합니다.
  • Play Mode: Forward (정방향), Reverse (역방향) 선택.
  • Playback Speed: 재생 속도 조절 (1.0이 기본).
  • Num Loops To Play: 반복 횟수 (0은 무한 반복).
• Play Animation Forward / Play Animation Reverse: 현재 재생 상태에서 정방향·역방향 재생을 제어합니다. 시작 위치를 직접 지정하려면 Play Animation의 Start at Time을 사용합니다.
• Pause Animation: 애니메이션을 일시 정지합니다.
• Stop Animation: 애니메이션을 완전히 중지합니다.
• Is Animation Playing: 현재 애니메이션이 재생 중인지 확인합니다.

• Play Animation의 일반 실행 출력은 재생 완료를 기다리는 핀이 아닙니다. Bind to Animation Event에서 대상 애니메이션과 Finished 이벤트를 지정하고 커스텀 이벤트를 등록하거나, 위젯의 On Animation Finished 이벤트에서 대상 애니메이션을 확인합니다. 중지로도 종료 알림이 올 수 있으므로 닫기 완료 처리에는 현재 닫는 상태인지도 함께 검사합니다.

WBP_MainMenu 위젯 블루프린트를 엽니다.

디자이너 탭에서 Canvas Panel 자체 또는 그 안에 있는 Vertical Box 같은 메인 패널을 선택하고 디테일 패널에서 Is Variable을 체크하여 이름을 RootPanel이라고 지정합니다.

애니메이션 패널에서 + Animation을 눌러 FadeInAnim이라는 애니메이션을 추가합니다.

FadeInAnim을 선택하고 + 트랙 버튼을 눌러 RootPanel 위젯을 선택합니다.

RootPanel 트랙의 + 버튼을 눌러 Render Opacity 속성을 추가합니다. Canvas Panel·Vertical Box에 텍스트용 Color And Opacity가 있다고 가정하지 않습니다.

• 타임라인 헤드를 0.0초에 두고 Render Opacity를 0.0으로 설정한 뒤 키프레임을 추가합니다.
• 타임라인 헤드를 1.0초에 두고 Render Opacity를 1.0으로 변경합니다.
• 키프레임 추가 버튼을 클릭합니다.
• 이제 0초부터 1초까지 패널이 투명했다가 불투명해지는 애니메이션이 완성됩니다.

그래프 탭으로 이동합니다.

Event Construct 뒤에 Play Animation을 연결하고 FadeInAnim 참조를 In Animation에 넣습니다. Construct는 재추가 때 반복될 수 있습니다. 처음 보이기 전 RootPanel의 기본 Render Opacity를 0으로 맞추고, 이 예제는 한 번 재생한 뒤 1을 유지하도록 Restore State를 끕니다.