UI - 3) UI 애니메이션 구현 (1)

- 개요

UI에서 사용할 애니메이션 효과를 구현한다

• 적을 스폰하기 위한 카운트다운을 표현하는 타이머 UI를 하강 + 상승시키는 애니메이션 효과
• 유닛을 생성하는 버튼 UI를 하강 + 상승시키는 애니메이션 효과

 

- 스크립트 작업

1) UI_Animator 클래스

 

애니메이션 효과는 시간의 흐름에 따라 변화시키기 위해 코루틴을 사용하여 구현한다 

따라서 UI의 원본 위치 - UI를 이동시키는 애니메이션 효과에 대한 코루틴의 형태로 딕셔너리에 저장한다

 

 

CoChangePosition 코루틴 함수의 로직은 위와 같다

인자로 받은 duration의 시간 동안 targetPosition의 위치로 UI를 보간하여 이동시킨다

이동이 끝난 후에, 인자로 받은 rectTransform에 대한 코루틴이 중복 실행되는 것을 막기위해 딕셔너리에서 제거한다

 

 

ChangePosition 함수는 외부에서 호출하여 실제 UI의 이동 애니메이션 효과를 연출한다

이동할 RectTransform에 대한 기존의 코루틴을 제거하여 중복 실행을 방지하고

새로운 코루틴을 생성하여 CoChagePosition 코루틴 함수를 실행 + 딕셔너리에 저장한다

 

2) UI_BuildBtns 클래스

 

유닛을 생성하는 버튼 UI들의 부모 오브젝트의 클래스를 생성한다

멤버변수는 위와 같다

• yPosOffset 멤버변수 : 버튼 UI들의 이동값
• isActive 멤버변수 : 버튼 UI들이 화면에 표시되어 있는지 여부
• uiAnimator 멤버변수 : UI_Animator 컴포넌트
• rectTransform 멤버변수 : 버튼 UI들의 부모 오브젝트의 RectTransform 
• buildBtnBasePosition 멤버변수 : 버튼 UI들의 부모 오브젝트의 원위치

 

 

Awake 함수와 Start 함수를 위와 같이 구성하여 멤버변수들의 값을 설정한다

 

 

ShowBuildButtons 함수를 추가하여 위와 같이 구성한다

버튼 UI가 화면에 표시되어 있는지 확인하여 상승시킬지, 하강시킬지 방향을 결정하고

UIAnimator의 ChangePosition 함수를 호출하여 UI의 이동 애니메이션을 연출한다

 

 

Update 함수를 위와 같이 구현하여 B 키를 눌렀다면 ShowBuildButtons 함수를 호출한다

 

3) UI_InGame 클래스

 

인게임 UI에 위와 같이 멤버변수를 추가한다

• waveTimerTxtOffset 멤버변수 : 타이머 UI의 이동값
• uAnimator 멤버변수 : UI_Animator 컴포넌트
• isWaveTimerVisible 멤버변수 : 타이머 UI가 화면에 표시되었는지 여부
• waveTimerBasePosition 멤버변수 : 타이머 UI의 원위치

 

 

Awake 함수에 로직을 추가하여 필요한 멤버변수들의 값을 설정한다

 

 

EnableWaveTimerText 함수의 로직을 위와 같이 수정한다

타이머 UI가 표시된 상태에서 다시 표시하려는 것처럼 동일한 상태에서 동일한 작업을 수행하는 것을 방지한다

이후 타이머 UI의 화면 표시 여부에 따라 타이머 UI의 이동 방향을 설정하고 ChangePosition 함수를 호출한다

 

- 최종 실행 결과