UI - 4) UI 애니메이션 구현 (2)

- 개요

UI에서 사용할 애니메이션 효과를 추가적으로 구현한다

구현할 효과들은 각각 다음과 같다

• 화면을 부드럽게 전환하는 FadeIn + FadeOut 효과
• 버튼에 커서를 올려놓으면 버튼을 확대하는 효과
• 버튼의 텍스트가 깜박거리는 효과

 

- 스크립트 작업

1) UI_Animator 클래스

 

버튼을 확대하는 애니메이션 효과에 대한 코루틴을 저장하는 딕셔너리 멤버변수와

화면을 부드럽게 전환하는 Fade 애니메이션 효과에 대한 코루틴을 저장하는 딕셔너리 멤버변수를 추가한다

 

 

버튼을 확대하는 애니메이션 효과에 대한 2개의 함수를 추가한다

코루틴의 중복 실행을 막기 위해 딕셔너리 멤버변수를 사용하여 구현하였다

ChangeScale 함수를 호출하여 확대 애니메이션 효과를 구현한다 

CoChangeScale 함수는 ChangeScale 함수 내부에서 호출되어 프레임마다 보간을 통해 버튼을 확대한다

 

 

Fade 애니메이션 효과에 대한 2개의 함수를 추가한다

동일하게 딕셔너리 멤버변수를 사용하여 코루틴의 중복 실행을 방지한다

FadeImage 함수를 호출하여 Fade 애니메이션을 재생한다

CoFadeImage 함수는 FadeImage 함수 내부에서 호출되어 프레임마다 보간을 통해 Fade 효과를 구현한다

 

2) UI_TextBlink 클래스

 

버튼의 텍스트를 깜빡거리게 하는 UI_TextBlink 클래스를 생성한다

멤버변수는 위와 같이 구성한다

• alphaChangeSpeed 멤버변수 : 텍스트의 알파 값을 변경하기 위한 속도
• targetAlphaValue 멤버변수 : 텍스트에 적용할 알파 값
• canBlink 멤버변수 : 텍스트의 알파 값을 변경할지 여부
• textMeshPro 멤버변수 : 텍스트 UI에서 사용중인 TextMeshPro 컴포넌트

 

 

Awake 함수에서 textMeshPro 멤버변수의 값을 설정한다

 

 

ChangeColorAlpha 함수를 위와 같이 구현하여 인자로 받은 newAlpha 값을 현재 텍스트에 적용한다

 

 

ChangeTargetAlpha 함수를 위와 같이 구현하여 적용할 Alpha 값을 반전시킨다

 

 

EnableBlink 함수를 추가하여 텍스트를 깜박일 것인지 판단하여

깜박일 수 없다면 ChangeColorAlpha 함수를 호출하여 알파값을 1로 설정한다

 

 

Update 함수를 위와 같이 오버라이드하여 현재 텍스트의 알파값을 판단하여 

알파값이 높다면 ChangeColorAlpha 함수를 호출하여 알파값을 변경하고

알파값이 낮다면 ChangeTargetAlpha 함수를 호출하여 적용할 알파값을 변경한다

 

3) UI_BtnScale 클래스

 

버튼 UI에 수식되어 특정 상황에서 버튼을 확대 + 축소하는 UI_BtnScale 클래스를 추가한다

멤버변수는 위와 같이 구성한다

• showcaseScale 멤버변수 : 확대될 버튼의 크기
• scaleDuration 멤버변수 : 버튼을 확대시킬 지속 시간
• btnTextBlinkEffect 멤버변수 : 버튼에 적용할 텍스트 깜박임 효과
• uiAnimator 멤버변수 : 애니메이션 효과를 적용할 부모 오브젝트의 UI_Animator 컴포넌트
• rectTransform 멤버변수 : 버튼 UI의 RectTrasnform

 

 

Awake 함수를 위와 같이 오버라이드하여 멤버변수들의 값을 설정한다

 

 

IPointEnterHander, IPointerExitHandler, IPointerDownHandler 인터페이스를 상속관계에 추가한다

각각 마우스의 진입 감지 + 이탈 감지 + 클릭 시작 감지 용도로 사용한다

 

 

각각의 인터페이스에서 상속받은 함수들을 위와 같이 오버라이드한다

OnPointerEnter 함수를 오버라이드하여 버튼 UI를 확대하고 글씨의 깜박임을 비활성화한다

OnPointerExit 함수를 오버라이드하여 버튼 UI를 축소하고 글씨의 깜박임을 활성화한다

OnPointerDown 함수를 오버라이드하여 버튼 UI의 크기를 복구하고 글씨의 깜박임을 활성화한다

 

4) UI_Canvas 클래스

 

Canvas에 수식되는 컴포넌트에 위와같이 멤버변수를 추가한다

• fadeImageUI 멤버변수 : Fade 효과에서 사용할 이미지 UI 오브젝트
• uiAnimator 멤버변수 : 애니메이션 효과를 재생할 UI_Animator 컴포넌트

 

 

ActivateUIFade 함수를 추가하여 Fade 효과를 재생한다

인자로 받은 불리언의 값에 따라서 True라면 Fade In 효과를 재생하여 화면을 드러내고

False라면 Fade Out 효과를 재생하여 화면을 가린다

 

 

Awake 함수에서 ActivateUIFade 함수를 호출하여 화면을 드러낸다

 

- 최종 실행 결과