Unity3d C#使用DOTween插件的Sequence实现系列动画OnComplete无效和颜色设置无效的问题记录

前言

最近在弄一个文字动画效果的动画，使用了DOTween插件的Sequence来实现，主要就是对一个Text进行的文字打字、缩放和颜色设置等动画，功能是先对Text实现打字的动画，打字完成后，延时几秒对文字进行缩小、颜色变淡（逐渐透明的效果）的过程，在这个过程完成后，重置缩放比例和颜色（透明度），继续重复上一步的动作，直到所有结束。想象中的效果如下：

然而，理想很丰满，现实很骨干，当我按这个思路编码后并不能实现上面的效果，而是这样的效果：

不错没有卡，只进行了第一步的动画…
而我的编码完全是根据如上的思路编写：

        TipText.transform.localScale = Vector3.one;TipText.color = new Color32(255, 255, 255, 255);Sequence seq1 = DOTween.Sequence();seq1.Append(TipText.DOText("这是!!!", 1f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f)).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;TipText.text = "";});seq1.Append(TipText.DOText("DOTween插件的.....", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f)).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one * 2;TipText.text = "";});seq1.Append(TipText.DOText("超级大Bug！！！", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f)).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;TipText.text = "";}); seq1.Append(TipText.DOText("Sequence OnComplete无效&Text.color设置无效。", 4f));seq1.Play();

修改过程

如上的问题很直接的能看出是只进行了第一步的动画，而在Inspector上还是能明显的看出来，后续动画也进行了：

只不过text的状态没有重置，也就是没有进入OnComplete函数，造成了缩放，特别是透明度一直是0，所以就不可见，这点我在OnComplete函数中打了log验证了。还有一点是最后一个Append函数的log输出了，也就是执行了。

然后我将OnComplete函数从Join放到了Append上：

        seq1.Append(TipText.DOText("这是!!!", 1f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f)).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;TipText.text = "";});

转换后：

        seq1.Append(TipText.DOText("这是!!!", 1f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f)).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;Debug.Log(TipText.text);TipText.text = "";});seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f));

效果还是一样的，也没有进入OnComplete函数，经过很长时间的琢磨、查文档和检查代码，终于发现OnComplete函数的放在了外层，应该放到DOScale函数的一层，而我误将其放到了Append函数层了。
正确的应该这样修改：

 seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f).OnComplete(() => {}));

进行了如上修改后，OnComplete函数里的日志都输出了：

不过效果还是同最开始的动画，查看后发现虽然执行了OnComplete函数但是颜色修改的语句没实现或者被什么还原了：

我感觉可能被seq1.Join(TipText.DOColor())函数影响了，我尝试将DOColor的缩小duration（2–> 1.8）一点试试：

        TipText.transform.localScale = Vector3.one;TipText.color = new Color32(255, 255, 255, 255);Sequence seq1 = DOTween.Sequence();seq1.Append(TipText.DOText("这是!!!", 1f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;Debug.Log(TipText.text);TipText.text = "";}));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 1.8f));seq1.Append(TipText.DOText("DOTween插件的.....", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one * 2;Debug.Log(TipText.text);TipText.text = "";}));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 1.8f));seq1.Append(TipText.DOText("超级大Bug！！！", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;Debug.Log(TipText.text);TipText.text = "";}));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 1.8f)); seq1.Append(TipText.DOText("Sequence OnComplete无效&Text.color设置无效。", 4f).OnComplete(() => {Debug.Log("执行完成");}));seq1.Play();

终于正常了：

这样就说明了DOColor还原了OnComplete设置的颜色值。

如果真是这样的话，我刚开始OnComplete不执行的问题是因为写错OnComplete函数的层级的问题，再引起了无法设置颜色的问题，如果我一开始就在DOColor上正确的OnComplete就没有这些问题了？验证这个问题，我又还原了最开始的代码并修正了OnComplete层级错误的问题：

        TipText.transform.localScale = Vector3.one;TipText.color = new Color32(255, 255, 255, 255);Sequence seq1 = DOTween.Sequence();seq1.Append(TipText.DOText("这是!!!", 1f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;Debug.Log(TipText.text);TipText.text = "";}));seq1.Append(TipText.DOText("DOTween插件的.....", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one * 2;Debug.Log(TipText.text);TipText.text = "";}));seq1.Append(TipText.DOText("超级大Bug！！！", 2f));seq1.AppendInterval(1);seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f));seq1.Join(TipText.DOColor(new Color32(255, 255, 255, 0), 2f).OnComplete(() => {TipText.color = new Color32(255, 255, 255, 255);TipText.transform.localScale = Vector3.one;Debug.Log(TipText.text);TipText.text = "";})); seq1.Append(TipText.DOText("Sequence OnComplete无效&Text.color设置无效。", 4f).OnComplete(() => {Debug.Log("执行完成");}));seq1.Play();

也得到了正确的效果！！！

问题总结

OnComplete不执行

这里的OnComplete不执行的问题就是因为层级的问题，这个我是很少犯这种错误的，但是这次也是搞的自己一头雾水。

颜色设置无效

这个应该是系列问题，如果颜色、缩放、位置等属性，在其它并行动画结束事件中修改这些属性的话，可能会有这类的异常，如上我的测试可以看出，如果DOFade/DOColor的执行时间少于，结束事件动画的执行时间，还是可以的，这样的话，如果动画过程并行复杂的情况，处理起来会很复杂的。所以建议还是动画过程关联的属性自己在结束事件中修改这些属性。例如：
颜色/透明度（DOFade/DOColor）

DOFade/DOColor(属性, 时间)..OnComplete(() => {
//这里修改颜色/透明度
});

缩放（DOScale/DOScaleX/DOScaleY/DOScaleZ）

DOScale/DOScaleX/DOScaleY/DOScaleZ(属性, 时间)..OnComplete(() => {
//这里修改位置
});

缩放（DOScale/DOScaleX/DOScaleY/DOScaleZ）

DOScale/DOScaleX/DOScaleY/DOScaleZ(属性, 时间)..OnComplete(() => {
//这里修改大小
});

移动（DOMove/DOMoveX/DOMoveY/DOMoveZ…）

DOMove/DOMoveX/DOMoveY/DOMoveZ...(属性, 时间)..OnComplete(() => {
//这里修改位置
});

…
以此类比修改。

本文内容基于DOTweenPro v1.0.244测试再现问题，仅供参考。