Unity --- DoTween plug-in installation and use

Dotween is a plugin for Unity that simplifies animation and transitions. It provides a set of powerful functions to easily create complex animation effects.

1.1 Plug-in download

Search for dotween in the unity store

Click here

1.2 Official documents

document

2. Import and setup

As above, add the dotween resources found in the unity store to my resources, and then select in sequence in unity

Window --> Package Manager

In the window that opens select My Assets and search for dotween in the search box.

As shown in the picture:

DOTween needs to be set up for the first use, and a window will pop up after importing, just click the open button.

Or select Tools-->Demigiant-->DoTween Utility Panel

Then the following picture pops up:

Then click the green "Setup DOTween" button to set it up. The cyan button below is to generate an ASMDEF file, so that you don't have to encode the content of DOTween every time when writing the script, and improve the speed of switching after writing the code.

Click the button to display the following interface, select all by default, and then select the Apply button.

3. Sample code

1 loop animation: SetLoops(-1 , loopType )

transform.DOScale(targetScale, duration).SetLoops(-1, LoopType.Yoyo);

This code creates a looping animation that smoothly scales the object to the target size `targetScale`, then returns to the original size, and so on.

transform.DOMove(targetPosition, duration).SetLoops(-1, LoopType.PingPong);

This code creates a movement animation that smoothly moves the object from its current position to the target position `targetPosition`, and then back to the original position, and so on.

2. Number of animation loops: SetLoops( count )

transform.DOMove(targetPosition, duration).SetLoops(loopCount);

This code creates a movement animation that smoothly moves the object to the target position `targetPosition` and loops it `loopCount` times.

3. Animation event monitoring and callback: OnStart \ OnComplete

tween.OnStart(() =>
{
    Debug.Log("动画开始");
});

tween.OnComplete(() =>
{
    Debug.Log("动画完成");
});

This code adds event listeners for animation start and animation completion. When the animation starts, the first callback function is called and outputs "animation started"; when the animation completes, the second callback function is called and outputs "animation complete".

4. Animation delay callback: SetDelay

transform.DOMove(targetPosition, duration)
.SetDelay(delay)
.OnComplete(() =>
{
    Debug.Log("延迟回调动画完成");
});

This code uses the DOTween plug-in to implement the delay callback effect of the animation. `transform.DOMove` represents the animation of object movement, `targetPosition` is the target position, and `duration` is the duration of the animation. The `SetDelay` method is used to set the delay start animation time, and the `OnComplete` method executes the callback function when the animation is completed, here it will output "delayed callback animation complete".

5. Animation custom update callback: OnUpdate

transform.DOMove(targetPosition, duration).OnUpdate(() =>
{
    Debug.Log("动画更新中...");
});

This code uses the DOTween plugin to implement a custom update callback effect for the animation. `transform.DOMove` represents the animation of object movement, `targetPosition` is the target position, and `duration` is the duration of the animation. The `OnUpdate` method executes the callback function when the animation is updated, here it will output "animation update...".

6. Animation path callback: OnWayPointChange

transform.DOPath(path, duration, PathType.CatmullRom).OnWaypointChange(index =>
{
    Debug.Log("到达路径点：" + index);
});

This code uses the DOTween plug-in to realize the path callback effect of the animation. `transform.DOPath` indicates the animation of the object moving along the path, `path` is an array or list of path points, `duration` is the duration of the animation, `PathType.CatmullRom` indicates that the type of the path is a Catmull-Rom curve. The `OnWaypointChange` method executes the callback function when the waypoint is reached, here it will output "waypoint reached:" plus the index of the waypoint.

7. Animation loop callback:

transform.DOMove(targetPosition, duration)
.SetLoops(-1, LoopType.Restart)
.OnStepComplete(() =>
{
    Debug.Log("循环结束");
});

8 Frame by frame animation: SetOptions

transform.DOLocalPath(path, duration, PathType.CatmullRom).SetOptions(true);

This code creates a frame-by-frame animation, and the object will move smoothly frame by frame according to the given path array `path`. Consecutive points on the path are computed using the Catmull-Rom interpolation algorithm.

9. Animation delay: SetDelay

transform.DOMove(targetPosition, duration).SetDelay(delay);

This code creates a delayed animation that causes the object to smoothly move to the target position `targetPosition` after a delay of `delay` seconds, and the animation duration is `duration` seconds.

10. Animation pause and resume: pause\play

tween.Pause();

tween.Play();

This code demonstrates how to pause and resume animation. The playback of the animation can be paused by calling the `Pause()` method, and the playback of the animation can be resumed by calling the `Play()` method.

11. Custom animation curve: SetEase( curve )

transform.DOMove(targetPosition, duration).SetEase(curve);

This code creates a moving animation that makes the object move smoothly to the target position `targetPosition` according to the custom animation curve `curve`.

12. Animation transition effect: SetEase

transform.DOMove(targetPosition, duration).SetEase(Ease.InOutQuad);

This code creates a movement animation that smoothly moves the object from its current position to the target position `targetPosition`, using an InOutQuad transition effect that starts quickly and ends slowly.

13. Animation speed adjustment: SetSpeed

transform.DOMove(targetPosition, duration).SetSpeedBased().SetSpeed(speed);

This code creates a moving animation, the object moves smoothly from the current position to the target position `targetPosition`, and automatically adjusts the playback speed according to the length of the animation, and sets the playback speed to `speed` times.

14. Animation Path: DoPath

transform.DOPath(path, duration, PathType.CatmullRom);

This code creates a moving animation, making the object move smoothly according to the given path array `path`, using the Catmull-Rom interpolation algorithm to calculate the continuous points on the path.

15. Animating Bezier Paths: DoPath

transform.DOPath(path, duration, PathType.CubicBezier);

This code uses the DOTween plug-in to implement the Bezier curve path animation of the object. `transform` represents the Transform component of an object, `DOPath` method is used to make the object move according to the Bezier curve path within the specified time, `path` is an array or list of path points, `duration` is the duration of the animation Time, `PathType.CubicBezier` indicates that the type of the path is a cubic Bezier curve.

16. Animate color change: DoColor

spriteRenderer.DOColor(targetColor, duration);

This code creates a color change animation that smoothly transitions the color of the SpriteRenderer object to the target color `targetColor` for `duration` seconds.

17. Animated Gradient Effect: DoColor

graphic.DOColor(targetColor, duration);

This code implements the gradient effect using the DOTween plugin. `graphic` can be any UI element inherited from Graphic, and the `DOColor` method is used to gradually change the color of the UI element to the target color `targetColor` within the specified time.

18. Animated Rotation: DoRate

transform.DORotate(targetRotation, duration);

This code creates a rotation animation that smoothly rotates the object to the target angle `targetRotation` for `duration` seconds.

19. Animate Camera Perspective Change: DoRatate

mainCamera.DORotate(new Vector3(targetAngle, 0f, 0f), duration);

This code uses the DOTween plug-in to achieve the change effect of the camera's perspective. `mainCamera` is a camera object, `DORotate` method is used to gradually change the rotation angle of the camera to the target angle within the specified time, here only the rotation angle in the X-axis direction is changed, `targetAngle` is the target angle, `duration` is the duration of the animation.

20. Animation scaling: DoScale

transform.DOScale(targetScale, duration);

This code creates a scaling animation that smoothly scales the object to the target size `targetScale` for `duration` seconds.

21. Animate camera field of view change: DOFieldIfView

mainCamera.DOFieldOfView(targetFieldOfView, duration);

This code creates a camera field of view change animation that smoothly transitions the main camera's field of view to the target field of view `targetFieldOfView`, and the animation duration is `duration` seconds.

22. Animation volume change: DOFade

audioSource.DOFade(targetVolume, duration);

This code implements the audio fade effect. `audioSource` is an audio source object, and the `DOFade` method is used to gradually change the volume of the audio to the target volume `targetVolume` within the specified time.

23. Animation fade effect: DoFade

canvasGroup.DOFade(targetAlpha, duration);

This code realizes the fade in and fade out effect of CanvasGroup. `canvasGroup` is a CanvasGroup component, and the `DOFade` method is used to gradually change the transparency of the CanvasGroup to the target transparency `targetAlpha` within a specified time.

24. Animate Transparency Change: DoFade

spriteRenderer.DOFade(targetAlpha, duration);

This code uses the DOTween plugin to achieve a gradient effect of transparency. `spriteRenderer` is a SpriteRenderer component, and the `DOFade` method is used to gradually change the transparency of the object to the target transparency `targetAlpha` within a specified time.

25. Animate material property changes: DoFloat

renderer.material.DOFloat(targetValue, "_PropertyName", duration);

This code uses the DOTween plugin to implement the gradient effect of the material property. `renderer` is a renderer component, and the `material` property gets the material of the renderer. The `DOFloat` method is used to fade the property `"_PropertyName"` of the material to the target value `targetValue` within the specified time.

26. Animate UI element changes: DoSizeDelta

rectTransform.DOSizeDelta(targetSizeDelta, duration);

This code uses the DOTween plug-in to achieve the effect of changing the size of UI elements. `rectTransform` is a RectTransform component, and the `DOSizeDelta` method is used to change the size of the UI element to the target size `targetSizeDelta` within the specified time.

27. Animated camera shake effect: DoShakePosition

mainCamera.DOShakePosition(duration, strength, vibrato, randomness);

This code uses the DOTween plugin to implement the camera shaking effect. `mainCamera` is a camera object, the `DOShakePosition` method is used to make the camera shake within a specified time, where `duration` indicates the duration of the shake, `strength` indicates the intensity of the shake, and `vibrato` indicates the frequency of the shake , `randomness` indicates the randomness of the jitter.

28. Animated object vibration effect: DoShakePosition

transform.DOShakePosition(duration, strength);

This code uses the DOTween plug-in to achieve the vibration effect of the object. `transform` represents the Transform component of an object, and the `DOShakePosition` method is used to make the object vibrate within a specified time, where `duration` represents the duration of the vibration, and `strength` represents the intensity of the vibration.

29. Animation sequence nesting:

Sequence sequence = DOTween.Sequence();

sequence.Append(transform.DOMove(targetPosition / 2f, duration));

sequence.Append(transform.DOMove(targetPosition, duration));

sequence.Append(transform.DOMove(Vector3.zero, duration));

sequence.SetLoops(-1);

This code uses the DOTween plug-in to realize the animation sequence nesting effect. `DOTween.Sequence()` creates an animation sequence object `sequence`, `Append` method is used to add animation in order, `transform.DOMove` represents the animation of object movement, `targetPosition` is the target position, and `duration` is The duration of the animation, `SetLoops(-1)` means to play the animation sequence in an infinite loop.

31. Animate font size change: DoFontSize

text.DOFontSize(targetFontSize, duration);

This code uses the DOTween plugin to achieve the font size change effect. `text` is a Text component, and the `DOFontSize` method is used to gradually change the font size of the text to the target font size `targetFontSize` within the specified time.

33. Animation camera viewing angle scaling: DOOrthoSize

mainCamera.DOOrthoSize(targetSize, duration);

This code uses the DOTween plug-in to achieve the zoom effect of the camera's perspective. `mainCamera` is a camera object, and the `DOOrthoSize` method is used to gradually change the camera's orthographic viewing angle size to the target size `targetSize` within a specified time.

34.DoText

1. Basic usage

textField.DOText(targetText, duration);

Let's assume you have a UI Text field (represented in Unity with a Text component) and you want to change its text to a target text within a second. First, you need to get a reference to the UI Text field (textField in the example) in your script.

You can then use the DOText methods to gradually change the text content. Pass the target text as the first parameter to the DOText method, and the duration as the second parameter.

2. Optional parameters

Can be used to customize how the text changes. For example, you can specify the type of curve animation for text (such as Linear, EaseIn, EaseOut, etc.), and use callback functions to perform other operations after the text change is complete. Here is an example:

textField.DOText(targetText, duration)
.SetEase(Ease.OutQuad) // 设置曲线动画类型
.OnComplete(() => Debug.Log("文本更改完成")); // 设置完成时的回调函数

3. String formatting

You can use the string formatting feature to insert the value of a variable into the text. For example, assuming you have a score variable int score = 100;, you can insert it at a specific position in the target text like this:

string targetText = $"当前分数：{score}";
textField.DOText(targetText, duration);

This will dynamically insert the variable's value into the target text when the text changes.

4. Chain call

DoTween's methods generally support chaining, which means you can chain multiple Tween animations on the same line to execute them sequentially. For example, you can fade out a text field after the text change is complete:

textField.DOText(targetText, duration)
.OnComplete(() => textField.DOFade(0f, 1f));