使用协程淡入/淡出TextMeshPro文本元素

Question

我正在使用 TextMeshPro 设置一个“场景介绍”，其中包含一些文字“Level 1”。我已经在画布中创建了文本元素，我正在尝试找到一种方法让它淡入，然后等待，然后淡出（有点像您在《天际》中发现新地点时所看到的）。

到目前为止，我尝试了一种通用的解决方案，这样我就可以将相同的脚本用于其他用途（例如不在场景的开始，不仅是淡入等）。

使用TMPro：

...
using TMPro;
...

开始和声明：

public class IntroFade : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI textToUse;
    [SerializeField] private bool fadeIn = false;
    [SerializeField] private bool fadeOnStart = false;
    [SerializeField] private float timeMultiplier;
    private bool FadeIncomplete = false;

    private void Start()
    {

        if (fadeOnStart)
        {
            if (fadeIn)
            {
                StartCoroutine(FadeInText(timeMultiplier, textToUse));
                FadeIncomplete = true;
            }
            else
            {

                StartCoroutine(FadeOutText(timeMultiplier, textToUse));
            }
        }
    }
...

更新，我想在淡入完成后淡出

    private void Update()
    {
        if (FadeIncomplete)
        {
            StartCoroutine(FadeOutText(timeMultiplier, textToUse));
        }
    }

实际褪色的对应关系：

private IEnumerator FadeInText(float timeSpeed, TextMeshProUGUI text)
    {
        text.color = new Color(text.color.r, text.color.g, text.color.b, 0);
        while (text.color.a < 1.0f)
        {
            text.color = new Color(text.color.r, text.color.g, text.color.b, text.color.a + (Time.deltaTime * timeSpeed));
            yield return null;
        }
    }
    private IEnumerator FadeOutText(float timeSpeed, TextMeshProUGUI text)
    {
        text.color = new Color(text.color.r, text.color.g, text.color.b, 1);
        while (text.color.a > 0.0f)
        {
            text.color = new Color(text.color.r, text.color.g, text.color.b, text.color.a - (Time.deltaTime * timeSpeed));
            yield return null;
        }
    }
    public void FadeInText(float timeSpeed = -1.0f)
    {
        if (timeSpeed <= 0.0f)
        {
            timeSpeed = timeMultiplier;
        }
        StartCoroutine(FadeInText(timeSpeed, textToUse));
    }
    public void FadeOutText(float timeSpeed = -1.0f)
    {
        if (timeSpeed <= 0.0f)
        {
            timeSpeed = timeMultiplier;
        }
        StartCoroutine(FadeOutText(timeSpeed, textToUse));
    }

所以发生的情况是淡入或淡出，具体取决于首先启动的协程。我无法做到这一点，所以它会淡入，在屏幕上停留大约 2 秒，然后淡出。

我还尝试淡入然后创建一个协程来等待秒，然后调用淡出协程，但这也不起作用。

Answer 1

一个协程可以等待另一个协程完成，这样思考就会极大地简化问题。您已经创建了淡入和淡出，现在您只需按顺序运行它们，并在它们之间等待 2 秒。

private IEnumerator IntroFade (TextMeshProUGUI textToUse) {
   yield return StartCoroutine(FadeInText(1f, textToUse));
   yield return new WaitForSeconds(2f);
   yield return StartCoroutine(FadeOutText(1f, textToUse));
   //End of transition, do some extra stuff!!
}

如果您有兴趣，这些文章对于了解有关协程的更多信息非常有见地。

Answer 2

一种更简单、更清晰的实现是创建一个基本协程，该协程可用于淡入和淡出，或任何与此相关的不透明度。

IEnumerator FadeText(TextMeshProUGUI text, float duration, float newAlpha) {
    float originalAlpha = text.color.a;
    float elapsed = 0f;

    while (elapsed < duration) {
        elapsed += Time.deltaTime;
        float alpha = Mathf.Lerp(originalAlpha, newAlpha, elapsed / duration);
        text.color = new Color(text.color.r, text.color.g, text.color.b, alpha);
        yield return null;
    }
}

此脚本使用

Mathf.Lerp()

函数在原始 alpha 和提供的新 alpha 之间进行插值，并使用一组

float duration

来控制过渡的持续时间。该脚本还允许您过渡到任何 alpha。例如，如果您希望文本以完全不透明度开始并淡入到 0.5，则可以将 unity 内部文本的不透明度设置为 1，然后将

float newAlpha

更改为

0.5f

，并在需要时重复。