[Unity] Zerry Library (3) : Loading UI Animation with Color Fade

Assets

• DOTween
• UniTask
• Odin

Sample

How to Use

Hierachy

Textures

Stick.png

Scipts

using UnityEngine;
using DG.Tweening;
using Sirenix.OdinInspector;
using UnityEngine.UI;

public class LoadingUIAnimation_ColorFade : MonoBehaviour
{
    [SerializeField] float duration = 1f;
    [SerializeField] float radius = 100;
    [SerializeField] GameObject loadingElement;

    private int count;
    private float delayUnit;

    private void Start() {
        Play();
    }

    [Button("Plus Loading Element")]
    private void plusLoadingElement() {
        Instantiate(loadingElement, transform);
        Init();
    }

    [Button("Init")]
    [ContextMenu("Init")]
    private void Init() {
        count = transform.childCount == 0 ? 1 : transform.childCount;
        delayUnit = duration / count;

        int i = 0;
        foreach (Transform child in transform) {
            child.localPosition = new Vector2(Mathf.Sin(Mathf.PI * 2 * i / count) * radius, Mathf.Cos(Mathf.PI * 2 * i / count) * radius);
            child.localRotation =Quaternion.LookRotation(Vector3.forward, new Vector3(child.localPosition.x, child.localPosition.y, 0));
            i++;
        }
    }

    [Button("Play")]
    private void Play() {
        Init();
            float delay = 0;
            foreach (Transform child in transform)
            {
                child.GetComponent<Image>().DOFade(0, 0);
                child.GetComponent<Image>().DOFade(0, duration).From(1, false)
                .SetDelay(delay)
                .SetLoops(-1, LoopType.Restart)
                .SetEase(Ease.Linear)
                .SetLink(gameObject, LinkBehaviour.PauseOnDisablePlayOnEnable);

                delay += delayUnit;
            }
    }
}

References

따라서 반지름의 길이(radius)와 각도만 알면 위치를 구할 수 있다.
각도는 Mathf.PI * 2 * i / count 이다. 이 때 i / count를 곱하는 이유는 로딩 UI의 이미지가 2개면 0, 180도로, 3개면 0, 120, 240도로 나눠줘야 하기 때문이다.