foreword
Recently, I am working on a text animation effect animation, which is realized by using the Sequence of the DOTween plug-in. It is mainly to animate text typing, zooming and color setting on a Text. The function is to first realize the typing animation on the Text. After typing, Delay for a few seconds to shrink the text and lighten the color (gradually transparent effect). After this process is completed, reset the scaling and color (transparency), and continue to repeat the previous step until everything is over. The imaginary effect is as follows:
However, the ideal is full and the reality is very backbone. When I code according to this idea, I can't achieve the above effect, but this effect:
Yes, there is no card, only the animation of the first step...
and my coding is completely written according to the above ideas:
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();
modification process
The above problem can be directly seen that only the first step of the animation is performed, but it can still be clearly seen on the Inspector, and the follow-up animation is also performed:
It’s just that the state of the text has not been reset, that is, it has not entered the OnComplete function, resulting in zooming, especially the transparency is always 0, so it is invisible. I have logged in the OnComplete function to verify this. Another point is that the log output of the last Append function is executed, that is, it is executed.
Then I put the OnComplete function from the Join on the 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 = "";
});
After conversion:
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));
The effect is still the same, and the OnComplete function is not entered. After a long time of pondering, checking documents and checking the code, I finally found that the OnComplete function is placed in the outer layer. It should be placed in the layer of the DOScale function, but I put it by mistake. At the Append function layer.
The correct one should be modified like this:
seq1.Append(TipText.transform.DOScale(new Vector3(0.1f, 0.1f, 0.1f), 2f).OnComplete(() => {
}));
After the above modification, the logs in the OnComplete function are all output:
However, the effect is still the same as the original animation. After checking, I found that although the OnComplete function was executed, the color modification statement was not implemented or was restored by something:
I feel that it may be affected by the seq1.Join(TipText.DOColor()) function. I try to reduce the duration of DOColor (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();
Finally it works:
This shows that DOColor restores the color value set by OnComplete.
If this is the case, the problem that I did not execute OnComplete at the beginning was because I wrote the wrong level of the OnComplete function, which caused the problem of not being able to set the color. If I set the correct OnComplete on DOColor from the beginning, there will be no such problems? To verify this problem, I restored the original code and fixed the OnComplete level error:
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();
Also got the correct effect! ! !
conclusion of issue
OnComplete does not execute
The problem that OnComplete does not execute here is because of the level problem. I rarely make this kind of mistake, but this time I also made myself confused.
Invalid color setting
This should be a series of problems. If properties such as color, zoom, and position are modified in other parallel animation end events, there may be such exceptions. As can be seen from my test above, if the execution time of DOFade/DOColor Less than, the execution time of the end event animation is still possible. In this case, if the animation process is parallel and complicated, it will be very complicated to deal with. Therefore, it is recommended that the properties associated with the animation process modify these properties in the end event. Example:
Color/Transparency (DOFade/DOColor)
DOFade/DOColor(属性, 时间)..OnComplete(() => {
//这里修改颜色/透明度
});
Scale (DOScale/DOScaleX/DOScaleY/DOScaleZ)
DOScale/DOScaleX/DOScaleY/DOScaleZ(属性, 时间)..OnComplete(() => {
//这里修改位置
});
Scale (DOScale/DOScaleX/DOScaleY/DOScaleZ)
DOScale/DOScaleX/DOScaleY/DOScaleZ(属性, 时间)..OnComplete(() => {
//这里修改大小
});
Move (DOMove/DOMoveX/DOMoveY/DOMoveZ…)
DOMove/DOMoveX/DOMoveY/DOMoveZ...(属性, 时间)..OnComplete(() => {
//这里修改位置
});
...
modified by analogy.
The content of this article is based on the DOTweenPro v1.0.244 test reproduction problem,For reference onlyTest.