[Unity] - UI 이미지 부드럽게 회전하기(Quaternion.Slerp)

구현 목표는 아래 사진의 네모칸 부분(별이 나타날 부분)에

1. 별이 하나씩 가운데부터 생성되기

2. 생성되면서 별이 회전하도록하기 이었습니다!

 

먼저 네모난 박스 안에서 일정한 간격으로 생성되어야하기 때문에,

아래와 같이 부모 오브젝트인 stars에 Grid Layout Group을 추가해주고, 

가운데부터 자식 오브젝트들이 순차적으로 생성되게 하기 위해서 Child Alignment를 Middle Center로 해주었습니다!

 

만약 Middle Left로 하게 된다면 아래와 같이 왼쪽부터 채워지게 됩니다

[Header("별 개수")]
public int star_cnt = 3; // 채워진 별의 개수
public int max_star = 4; // 최대 별의 개수
public GameObject star_prefab; // 별 프리펩
public GameObject parent; // 부모 오브젝트

       void Start()
    {
        StartCoroutine(review_star());
    }

    IEnumerator review_star()
    {
        for (int i = 0; i < max_star; i++)
        {
            bool isfull = i < star_cnt; // 채워져야하는 별이면 true

            // 별 생성
            GameObject star = Instantiate(star_prefab, parent.transform);
            if (isfull) // 채워져야한다면 노란색으로 변경
                star.GetComponent<Image>().color = Color.yellow;
	
            RectTransform rect = star.GetComponent<RectTransform>();
            if (rect != null)
                rect.anchoredPosition = new Vector2(0f, 0f); // 가운데로 anchor 바꾸기 

            // 별 회전 애니메이션 시작
            StartCoroutine(RotateStar(star.transform, Quaternion.Euler(0f, 180f, 0f), 0.5f));

            yield return new WaitForSeconds(0.5f); // 별 간 생성 간격
        }
    }
    
    IEnumerator RotateStar(Transform target, Quaternion targetRotation, float duration)
	{
    	// 시작점 기록
        Quaternion startRotation = target.rotation;
        float time = 0f;

        while (time < duration)
        {
            time += Time.deltaTime;
            float t = time / duration;

            // starRotation부터 targetRotation까지 t시간 동안 부드럽게 회전하도록! 
            target.rotation = Quaternion.Slerp(startRotation, targetRotation, t);
            yield return null;
        }

	}