Use DoTween to animate a sequence in Unity

DoTween is an animation plug-in on Unity. It is simple to use and powerful. It is convenient to make some simple animations. Even some more complex queue animations are no problem for it.

Getting Started

First, visit the Asset Store, search for DoTween, and download the free version of the plug-in.

 DoTween plug-in

After downloading, click Tools ->Demigent ->DOTween Utility Panel in the Unity menu bar, click Setup DOTween in the pop-up window, and DOTween will automatically import the required libraries and files according to your Unity version.

 DoTweenSteup

Single Tween Animation

DoTween extends the methods of some components, such as Rigidbody and Transform, among which Transform extension is the most commonly used.
Here you can try DoTween's extension method first. The following line of code aims to move the square two units on the local coordinate axis x within one second. The effect is shown in the following figure.

 CubeTransform.DoLocalMoveX(2.0f,1.0f);

 DoTween plug-in

DoTween provides a lot of animation methods, such as various linear or nonlinear movements, rotations, even color changes, fade in and fade out, display and hide, etc., which will not be demonstrated here.

Queue animation (multiple Tween animations)

In practical requirements, an animation generally includes operations on multiple objects, so how to use DoTween to make such an animation? For some simple animations, simply execute multiple DoTween statements in sequence; For some complex animations, such as animations containing delays, animation event callbacks, and playing sound effects, you can use DoTween's animation queue to complete these operations. If you have experience in using 2d engines such as Cosos, you must be familiar with Sequence.

Append

Add animation to the queue using the Append method. Tween added by Append is played in sequence, that is, after animation 1 is played, animation 2 is played.

 //First define a queue var s = DOTween,Sequence(); //Append Tween animation using the Append method of the animation queue. s.Append(Cube1Trans. DoLocalMoveX(2.0f,1.0f)); //After the first Cube1 animation is played, the Cube2 animation is played s.Append(Cube2Trans. DoLocalMoveY(2.0f,1.0f)); //Another way of writing /* s.Append( Cube1Trans.DoLocalMoveX(2.0f,1.0f) ). Append( Cube2Trans.DoLocalMoveY(2.0f,1.0f) ) */

The above two codes create an animation queue and add two Tween animations to the queue. The Cube2 animation added later will play after the Cube1 animation is played, as shown in the following figure.

 DoTween plug-in

Insert

For animations that need to be played in parallel, you can use the Insert method. The first parameter of the Insert method is the delay time of the animation, and the second parameter is the Tween animation to be played. The code and effect are shown below.

 var s = DOTween.Sequence(); var Cube1RunTime = 1.0f; var Cube2RunTime = 1.0f; s.Append(this.m_Trans. DOLocalMoveX(2.0f, Cube1RunTime)); s.Append(this.m_Trans. DOLocalMoveX(-3.42f, Cube1RunTime)); //Play after Cube1RunTime seconds after the queue animation starts s.Insert(Cube1RunTime, this.m_Other.DOLocalMoveY(2.5f, Cube2RunTime));

 DoTween plug-in

Please note that no matter how many Tween animations are Append before the queue, the starting time of InsertTween animation is the queue start time+delay time, which is independent of the animation you Append inserted.

 DoTween plug-in

InsertCallback

For the demand of animation event callback, InsertCallback is used. The first parameter represents the delay time of the callback, and the second parameter can be a lambda expression. I deal with some events here, such as playing effect audio.

 var s = DOTween.Sequence(); var Cube1RunTime = 1.0f; var Cube2RunTime = 1.0f; s.Append(this.m_Trans. DOLocalMoveX(2.0f, Cube1RunTime)); s.Append(this.m_Trans. DOLocalMoveX(-3.42f, Cube1RunTime)); s.Insert(Cube1RunTime, this.m_Other.DOLocalMoveY(2.5f, Cube2RunTime)); //Callback s.InsertCallback(Cube1RunTime, () => { Debug.Log ("Cu pretends to play Cube2 mobile audio"); }); s.Append(this.m_Trans. DOLocalMoveY(2.5f, Cube1RunTime)); var s = DOTween.Sequence();

The effect is shown in the following figure.

 DoTween plug-in

Well, it should not be difficult to achieve a slightly complex animation effect by making reasonable use of the queue method described above. DoTween has many excellent effects, so I will not introduce them here.

References

1. [Header] [Unity] Unity Japan UnityChanSD Role

Zimiao haunting blog (azimiao. com) All rights reserved. Please note the link when reprinting: https://www.azimiao.com/3835.html
Welcome to the Zimiao haunting blog exchange group: three hundred and thirteen million seven hundred and thirty-two thousand

Comment

*

*

Comment area

  1. mikusa 06-10 17:35 reply

    Wow, golden guy

  2. ph 05-17 17:22 reply

    Thank you very much for the explanation of the timeline.