Unity UI - 부드러운 전환을 도와주는 AnimationCurve

 

유니티의 변수 중에는 AnimationCurve라는 변수가 있습니다.

0.0부터 1.0f까지 y의 변화량을 곡선 형태로 만들어낼 수 있게 해주는 아주 유용한 형식입니다.

 

public class test : MonoBehaviour
{
  public AnimationCurve MyCurve = null;
}

 

외부에서 편집할 수 있게 public 혹은 [serializedfield] private로 선언해준 뒤 인스펙터를 클릭해 보시면 다음과 같은 인터페이스가 나옵니다.

밑의 선 프리셋 중 하나를 선택하거나, 선택 후 원하는 대로 편집을 할 수도 있습니다.

 

public class test : MonoBehaviour
{
  public AnimationCurve MyCurve = null;

  [SerializeField] private RectTransform MyRect = null;
  [SerializeField] private RectTransform StartPos=null;
  [SerializeField] private RectTransform EndPos = null;
  private float MoveTime = 2.0f;



  private IEnumerator moverect(Vector2 startpos,Vector2 endpos,float targettime)
  {
    float _time = 0.0f;
    while (_time < targettime)
    {
      MyRect.anchoredPosition = Vector2.Lerp(startpos, endpos, MyCurve.Evaluate(_time / targettime));

      _time += Time.deltaTime;
      yield return null;
    }
    MyRect.anchoredPosition = endpos;
  }

  public void Awake()
  {
    StartCoroutine(moverect(StartPos.anchoredPosition,EndPos.anchoredPosition, MoveTime));
  }
}

AnimationCurve를 사용하는 방법은 다음과 같습니다.

위 AnimationCurve의 그래프에서 x값의 y값을 (변수이름).Evaluate(x값) 함수로 받습니다.

평상시라면 _time/targettime으로 직선형 움직임밖에 출력이 되지 않았을텐데 AnimationCurve를 사용한다면 훨씬 부드러운 움직임을 만들어낼 수 있습니다.

 

예시 1

 

예시 2

 

 

AnimationCurve가 어떤 방식으로 작동하는지 이해한다면 아래와 같은 응용도 가능합니다.

동영상 마지막 이미지가 순간이동 하는 이유는

시간 완료 시 도착 목적지로 고정되도록 스크립트가 작성되었기 때문입니다.

처음부터 부메랑처럼 돌아오는 움직임을 목표로 한다면 염두해주시길 바랍니다.