Animation Curve를 이용한 UI PopUp [26일차 TIL]

✅ Animation Curve란?

Animation Curve는 시간에 따라 값이 어떻게 변화할지를 곡선 형태로 표현하는 기능이다.

• X축 : 시간 (보통 0 ~ 1)
• Y축 : 값 (보통 위치, 스케일, 투명도 등)
  곡선의 모양에 따라 느려졌다가 빨라지는 등 다양한 이징(Easing) 효과를 줄 수 있음

Unity 에디터에서 곡선을 자유롭게 그릴 수 있어서 직관적이고 편리하다.

---

📃 예시 코드

using System.Collections;
using UnityEngine;

public class SampleAnimationCurve : MonoBehaviour
{
    public AnimationCurve popupCurve;
    public float animationDuration = 0.5f;

    private Vector3 originalScale;

    void Awake()
    {
        originalScale = transform.localScale;
        transform.localScale = Vector3.zero;
    }

    public void ShowPopup()
    {
        StopAllCoroutines();
        StartCoroutine(PopupRoutine());
    }

    IEnumerator PopupRoutine()
    {
        float time = 0f;

        while (time < animationDuration)
        {
            float t = time / animationDuration;
            float curveValue = popupCurve.Evaluate(t);
            transform.localScale = originalScale * curveValue;

            time += Time.deltaTime;
            yield return null;
        }

        transform.localScale = originalScale;
    }
}

• Evaluate() 를 통해서 시간값에 따른 value 값을 가져온다.

---

✅ 장점

항목	설명
부드러운 연출	이징 곡선 덕분에 더 감각적인 UI 효과 연출 가능
직관적인 조절	에디터에서 곡선을 직접 그릴 수 있어 감각적으로 조절 가능
코드 간결화	복잡한 수식 없이 Evaluate()만으로 원하는 값을 쉽게 계산 가능
다양한 연출 확장	Scale뿐 아니라, 투명도, 위치 등 여러 곳에 응용 가능

---

🎯 결론

Animation Curve를 활용하면 시간에 따라 값이 변화하는 것을 간단하게 표현할 수 있다.
직관적이고 확장성도 좋아서, 사용하기에 편리하다.

앞으로 필요한 곳에 적절히 잘 사용해보아야겠다.