Animating canvas with deltaTime

Unity Engine
1

Hello, I implemented some fade in/out functionality for a canvas with a Canvas Group component attached to it, so that changing its opacity value I’ll be fading those UI elements children to the canvas.

    public IEnumerator FadeText(bool m_fadeIn)
    {
        m_textAnimating = true;
        if (m_fadeIn)
        {
            for (float i = 0; i <= 1; i += Time.deltaTime * m_fadeSpeed)
            {
                m_canvasGroup.alpha = i;
                yield return null;
            }
            m_canvasGroup.alpha = 1;
        }
        else // fade out
        {
            for (float i = 1; i >= 0; i -= Time.deltaTime * m_fadeSpeed)
            {
                m_canvasGroup.alpha = i;
                yield return null;
            }
            m_canvasGroup.alpha = 0;
            SetupRecipeGUI();
        }
        m_textAnimating = false;
    }

I tried using Time.deltaTime after trying my game on another (less powerful) computer and seeing that FPS on that computer were quite low.
However that introduced the problem that opacity on the canvas would never reach 1; on my high end computer it would stay at 9.5 or so, whereas in my low end computer opacity wouldn’t go above 6.5 or so, making the canvas translucent. That’s when I added these 2 lines to make sure opacity would end up where it was supposed to:

m_canvasGroup.alpha = 1;
m_canvasGroup.alpha = 0;

It works, yet I feel it’s a messy solution. How could I make it more accurate and get same time for fading text in low-end and high-end computers?

Thanks!

2

For UI animations like that I recommand you to check for tweening plugins, they ease your life by something you can’t imagine before having used them :slight_smile:

DOTween is great for example : DOTween (HOTween v2) | Animation Tools | Unity Asset Store

3

You have a speed and not a time value. Use time instead of speed.

public IEnumerator FadeText(bool m_fadeIn, float m_fadeTime)
    {
        m_textAnimating = true;
        float time = 0f;
        if (m_fadeIn)
        {
            while (time < m_fadeTime)
            {
                 m_canvasGroup.alpha = Mathf.Lerp(0f, 1f, time / m_fadeTime);
                 time += Time.deltaTime;
                yield return null;
            }

            m_canvasGroup.alpha = 1;
        }
        else // fade out
        {
            while (time < m_fadeTime)
            {
                 m_canvasGroup.alpha = Mathf.Lerp(1f, 0f, time / m_fadeTime);
                 time += Time.deltaTime;
                yield return null;
            }
            m_canvasGroup.alpha = 0;
            SetupRecipeGUI();
        }
        m_textAnimating = false;
    }