如何使用InvokeRepeating实现UI文本按设定时长循环淡入淡出？

原代码在自动保存时仅触发一次淡入淡出动画，现在需要修改为按设定时长（比如3秒）循环执行淡入淡出/淡出淡入的效果，以下是修改方案：

核心调整内容 #

• 新增可视化配置参数，在Inspector面板就能调整动画总时长、单次淡入/淡出时间、循环模式
• 重构协程逻辑，实现循环切换淡入淡出方向，直到达到设定的总时长
• 加入协程状态判断，避免重复触发自动保存时动画混乱

1. 公共参数定义 #

先添加可配置的动画参数，方便调试：

public TMP_Text savingIndicatorText;
[Header("淡入淡出动画配置")]
public float totalLoopDuration = 3f; // 循环动画的总持续时长
public float singleFadeTime = 0.5f; // 单次淡入或淡出的时间
public bool useFadeInOutLoop = true; // true: 淡入→淡出循环；false: 淡出→淡入循环
private Coroutine runningFadeCoroutine; // 记录当前运行的协程，防止重复启动

2. Start方法（保持原有逻辑不变） #

private void Start()
{
    // 初始化保存提示文本为完全透明
    SetTextAlpha(savingIndicatorText, 0f);
    // 延迟2秒后启动自动保存，每10秒执行一次
    InvokeRepeating(nameof(AutosaveNotes), 2f, 10f);
}

3. 重构后的循环淡入淡出协程 #

替换原来的FadeTextToFullAlpha方法，实现循环动画：

public IEnumerator FadeTextLoop(float totalDuration, float fadeTime, TMP_Text targetText)
{
    float totalElapsed = 0f;
    bool isFadingIn = useFadeInOutLoop; // 根据配置确定初始动画方向

    while (totalElapsed < totalDuration)
    {
        float startAlpha = isFadingIn ? 0f : 1f;
        float targetAlpha = isFadingIn ? 1f : 0f;
        float fadeStart = Time.time;

        // 执行单次淡入/淡出
        while (Time.time - fadeStart < fadeTime)
        {
            float progress = (Time.time - fadeStart) / fadeTime;
            SetTextAlpha(targetText, Mathf.Lerp(startAlpha, targetAlpha, progress));
            yield return null;
        }
        // 确保动画结束时alpha值准确
        SetTextAlpha(targetText, targetAlpha);

        totalElapsed += fadeTime;
        isFadingIn = !isFadingIn; // 切换下一次的动画方向
    }

    // 循环结束后重置文本为透明（可根据需求修改为保持最后状态）
    SetTextAlpha(targetText, 0f);
    runningFadeCoroutine = null;
}

4. SetTextAlpha方法（保持原有逻辑不变） #

private void SetTextAlpha(TMP_Text textElement, float alpha)
{
    textElement.color = new Color(textElement.color.r, textElement.color.g, textElement.color.b, alpha);
}

5. 修改自动保存触发逻辑 #

在自动保存时，先停止已有协程再启动新的，避免动画叠加：

private void AutosaveNotes()
{
    if (saveToFile && inputField.gameObject.activeSelf)
    {
        SaveToFile(inputField.text);
        // 如果已有动画在运行，先停止再启动新循环
        if (runningFadeCoroutine != null)
        {
            StopCoroutine(runningFadeCoroutine);
        }
        runningFadeCoroutine = StartCoroutine(FadeTextLoop(totalLoopDuration, singleFadeTime, savingIndicatorText));
    }
}

效果说明 #

• 在Inspector面板调整totalLoopDuration可以设置动画循环的总时长，比如设为3秒，文本就会在3秒内反复淡入淡出
• 调整singleFadeTime可以控制单次淡入/淡出的快慢
• 勾选或取消useFadeInOutLoop可以切换循环的起始方向

内容的提问来源于stack exchange，提问作者Daniel Lip