Preface
DOTween can create simple UI animations to avoid creating a large number of Animators. This article introduces some of my techniques for making UI animations.
Show results
1. What is DOTween?
DOTween is a free plug-in in UnityAssetStore, used to create simple tween animations, commonly used with UI animation, delayed call, mobile rotation, typewriter and other effects
2. Usage steps
1. Import DOTween
Add my resources to UnityAssetStore, select My Assets in Windows->PackageManager, Packages, search for DOTween, and click import to import them all.
2. Configure DOTween
When importing DOTween for the first time, you need to wait for a certain period of time for the compilation to be completed. After this panel appears, click Setup DOTween (if this panel does not appear, click 
)
Click apply on the next panel that appears.
3. Use code to write animations
using DG.Tweening;
Sequence se;
private void Awake()
{
se = DOTween.Sequence();
se.SetAutoKill(false);
se.Pause();
CanvasGroup[] canvasGroups=GetComponentsInChildren<CanvasGroup>();
se.Append(canvasGroups[0].DOFade(0, 1f).From().SetDelay(2));
se.Append(canvasGroups[0].GetComponent<RectTransform>().DOAnchorPosX(200f, 1f).From(true).SetEase(Ease.OutExpo));
se.Insert(0.5f, canvasGroups[1].DOFade(0, 1f).From())
.Join(canvasGroups[1].GetComponent<RectTransform>().DOAnchorPosX(-200f, 1f).From(true).SetEase(Ease.OutExpo))
.Join(canvasGroups[2].DOFade(0, 1f).From())
.Join(canvasGroups[2].GetComponent<RectTransform>().DOAnchorPosY(-200f, 1f).From(true).SetEase(Ease.OutExpo));
}
private void Update()
{
if(Input.GetKeyDown(KeyCode.Escape))
{
se.Restart();
}
}The implementation effect is
Note: This UI interface is divided into three parts: top, middle and bottom. Each CanvasGroup represents one part. The UI of each part is placed under the corresponding CanvasGroup. CanvasGroup can control the transparency of all UIs of its sub-objects, and tween represents animation.
1. The top UI displays from 0 to 1 in 1 second
2. After the top UI is displayed, move to the current position within 1 second from a distance of 200 units to the right.
3. When the current sequence plays to 0.5 seconds, the central UI displays from 0 to 1 in 1 second
At the same time, move from a distance of 200 units to the current left to the current position within 1 second.
At the same time the bottom UI is displayed from 0 to 1 in 1 second
At the same time, the bottom UI moves from a distance of 200 units below the current position to the current position within 1 second.
4. Code API explanation
1.Sequnce se = DOTween.Sequence(); //Create a new sequence to store tween animations
2.se.SetAutoKill(false); //When the sequence is played, it will not be automatically killed (if it is killed, the animation will be recycled and cannot be played again)
3.se.Pause(); //The current sequence animation is paused (if it is not paused, it will be played after creation)
4.se.Append(tween); //Append an animation to the current sequence. The additional animations will be played in order and not at the same time.
5.se.Insert(time,tween); //Play tween after the current sequence reaches time seconds and play at the same time
6.se.Join(tween); //Play the tween at the start time of the last inserted tween in the current sequence (affected by delay), and play it at the same time
7.se.Restart(); //Replay animation
8.retransform.DOAnchorPosX(200f, 1f).From(true); //Move to the current position within 1 second from a distance of 200 units to the right of itself
(The From method means moving from the specified position to the current position, and true means relative position. If true is not added, the code will look like the following)
rectransform.DOAnchorPosX(rectransform.anchoredPosition.x+200f, 1f).From()
Note: When using the From method, no matter whether there is a delay in the current tween, as long as it is added to the queue or an animation is created, the object will be pulled directly to the starting position.
SetEase(ease) sets the easing type. See the effects of various easing types.
DOTween easing type animation renderings
Summarize
Using this method, you can easily create a variety of UI animations, and it is easy to manage. There is no need to save useless data. You can add animations directly to the UI interface that has been set up.