Unity --- Installation et utilisation du plug-in DoTween

Dotween est un plugin pour Unity qui simplifie l'animation et les transitions. Il fournit un ensemble de fonctions puissantes pour créer facilement des effets d'animation complexes.

1.1 Téléchargement de plug-ins

Rechercher dotween dans le magasin unity

Cliquez ici

1.2 Documents officiels

document

2. Importation et configuration

Comme ci-dessus, ajoutez les ressources dotween trouvées dans le magasin d'unité à mes ressources, puis sélectionnez en séquence dans l'unité

Fenêtre --> Gestionnaire de packages

Dans la fenêtre qui s'ouvre, sélectionnez Mes actifs et recherchez dotween dans la zone de recherche.

Comme indiqué sur l'image :

DOTween doit être configuré pour la première utilisation, et une fenêtre apparaîtra après l'importation, cliquez simplement sur le bouton d'ouverture.

Ou sélectionnez Outils-->Demigiant-->DoTween Utility Panel

Puis l'image suivante apparaît :

Cliquez ensuite sur le bouton vert "Setup DOTween" pour le configurer. Le bouton cyan ci-dessous permet de générer un fichier ASMDEF, de sorte que vous n'ayez pas à encoder le contenu de DOTween à chaque fois lors de l'écriture du script, et d'améliorer la vitesse de commutation après l'écriture du code.

Cliquez sur le bouton pour afficher l'interface suivante, sélectionnez tout par défaut, puis sélectionnez le bouton Appliquer.

3. Exemple de code

1 animation en boucle : SetLoops(-1 , loopType )

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

Ce code crée une animation en boucle qui redimensionne en douceur l'objet à la taille cible `targetScale`, puis revient à la taille d'origine, et ainsi de suite.

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

Ce code crée une animation de mouvement qui déplace en douceur l'objet de sa position actuelle à la position cible `targetPosition`, puis revient à la position d'origine, et ainsi de suite.

2. Nombre de boucles d'animation : SetLoops( count )

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

Ce code crée une animation de mouvement qui déplace en douceur l'objet vers la position cible `targetPosition` et le boucle `loopCount` fois.

3. Surveillance et rappel des événements d'animation : OnStart \ OnComplete

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

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

Ce code ajoute des écouteurs d'événement pour le démarrage et l'achèvement de l'animation. Lorsque l'animation démarre, la première fonction de rappel est appelée et affiche "animation démarrée" ; lorsque l'animation se termine, la deuxième fonction de rappel est appelée et affiche "animation terminée".

4. Rappel du délai d'animation : SetDelay

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

Ce code utilise le plug-in DOTween pour implémenter l'effet de rappel de délai de l'animation. `transform.DOMove` représente l'animation du mouvement de l'objet, `targetPosition` est la position cible et `duration` est la durée de l'animation. La méthode `SetDelay` est utilisée pour définir le délai de démarrage de l'animation, et la méthode `OnComplete` exécute la fonction de rappel lorsque l'animation est terminée, ici elle affichera "animation de rappel retardée terminée".

5. Rappel de mise à jour personnalisée de l'animation : OnUpdate

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

Ce code utilise le plug-in DOTween pour implémenter un effet de rappel de mise à jour personnalisé pour l'animation. `transform.DOMove` représente l'animation du mouvement de l'objet, `targetPosition` est la position cible et `duration` est la durée de l'animation. La méthode `OnUpdate` exécute la fonction de rappel lorsque l'animation est mise à jour, ici elle affichera "mise à jour de l'animation...".

6. Rappel du chemin d'animation : OnWayPointChange

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

Ce code utilise le plug-in DOTween pour réaliser l'effet de rappel de chemin de l'animation. `transform.DOPath` indique l'animation de l'objet se déplaçant le long du chemin, `path` est un tableau ou une liste de points de chemin, `duration` est la durée de l'animation, `PathType.CatmullRom` indique que le type du chemin est une courbe de Catmull-Rom. La méthode `OnWaypointChange` exécute la fonction de rappel lorsque le waypoint est atteint, ici elle affichera "waypoint atteint :" plus l'index du waypoint.

7. Rappel de la boucle d'animation :

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

8 Animation image par image : SetOptions

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

Ce code crée une animation image par image, et l'objet se déplacera en douceur image par image selon le tableau de chemin donné `path`. Les points consécutifs sur le chemin sont calculés à l'aide de l'algorithme d'interpolation Catmull-Rom.

9. Délai d'animation : SetDelay

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

Ce code crée une animation retardée qui amène l'objet à se déplacer en douceur vers la position cible `targetPosition` après un délai de `delay` secondes, et la durée de l'animation est de `duration` secondes.

10. Pause et reprise de l'animation : pause\play

tween.Pause();

tween.Play();

Ce code montre comment mettre en pause et reprendre l'animation. La lecture de l'animation peut être mise en pause en appelant la méthode `Pause()`, et la lecture de l'animation peut être reprise en appelant la méthode `Play()`.

11. Courbe d'animation personnalisée : SetEase (courbe)

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

Ce code crée une animation mobile qui fait que l'objet se déplace en douceur vers la position cible `targetPosition` selon la courbe d'animation personnalisée `curve`.

12. Effet de transition d'animation : SetEase

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

Ce code crée une animation de mouvement qui déplace en douceur l'objet de sa position actuelle à la position cible `targetPosition`, en utilisant un effet de transition InOutQuad qui démarre rapidement et se termine lentement.

13. Réglage de la vitesse d'animation : SetSpeed

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

Ce code crée une animation en mouvement, l'objet se déplace en douceur de la position actuelle à la position cible `targetPosition`, et ajuste automatiquement la vitesse de lecture en fonction de la longueur de l'animation, et définit la vitesse de lecture sur `speed` fois.

14. Chemin d'animation : DoPath

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

Ce code crée une animation en mouvement pour que l'objet se déplace en douceur selon le tableau de chemin donné "path" et utilise l'algorithme d'interpolation Catmull-Rom pour calculer les points continus sur le chemin.

15. Animation des chemins de Bézier : DoPath

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

Ce code utilise le plug-in DOTween pour implémenter l'animation de chemin de courbe de Bézier de l'objet. `transform` représente le composant Transform d'un objet, la méthode `DOPath` est utilisée pour faire bouger l'objet selon le chemin de la courbe de Bézier dans le temps spécifié, `path` est un tableau ou une liste de points de chemin, `duration` est le durée de l'animation Time, `PathType.CubicBezier` indique que le type du chemin est une courbe de Bézier cubique.

16. Animer le changement de couleur : DoColor

spriteRenderer.DOColor(targetColor, duration);

Ce code crée une animation de changement de couleur qui fait passer en douceur la couleur de l'objet SpriteRenderer à la couleur cible `targetColor` pendant `duration` secondes.

17. Effet de dégradé animé : DoColor

graphic.DOColor(targetColor, duration);

Ce code implémente l'effet de dégradé à l'aide du plugin DOTween. `graphic` peut être n'importe quel élément d'interface utilisateur hérité de Graphic, et la méthode `DOColor` est utilisée pour changer progressivement la couleur de l'élément d'interface utilisateur en la couleur cible `targetColor` dans le délai spécifié.

18. Rotation animée : DoRate

transform.DORotate(targetRotation, duration);

Ce code crée une animation de rotation qui fait pivoter en douceur l'objet à l'angle cible `targetRotation` pendant `duration` secondes.

19. Animer le changement de perspective de la caméra : DoRatate

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

Ce code utilise le plug-in DOTween pour obtenir l'effet de changement de perspective de la caméra. `mainCamera` est un objet caméra, la méthode `DORotate` est utilisée pour changer progressivement l'angle de rotation de la caméra à l'angle cible dans le temps spécifié, ici seul l'angle de rotation dans la direction de l'axe X est modifié, `targetAngle` est l'angle cible, `duration` est la durée de l'animation.

20. Mise à l'échelle de l'animation : DoScale

transform.DOScale(targetScale, duration);

Ce code crée une animation de mise à l'échelle qui redimensionne en douceur l'objet à la taille cible `targetScale` pendant `duration` secondes.

21. Animer le changement de champ de vision de la caméra : DOFieldIfView

mainCamera.DOFieldOfView(targetFieldOfView, duration);

Ce code crée une animation de changement de champ de vision de la caméra qui fait passer en douceur le champ de vision de la caméra principale au champ de vision cible `targetFieldOfView`, et la durée de l'animation est de `duration` secondes.

22. Changement de volume d'animation : DOFade

audioSource.DOFade(targetVolume, duration);

Ce code implémente l'effet de fondu audio. `audioSource` est un objet source audio et la méthode `DOFade` est utilisée pour modifier progressivement le volume de l'audio vers le volume cible `targetVolume` dans le délai spécifié.

23. Effet de fondu d'animation : DoFade

canvasGroup.DOFade(targetAlpha, duration);

Ce code réalise l'effet de fondu entrant et sortant de CanvasGroup. `canvasGroup` est un composant CanvasGroup, et la méthode `DOFade` est utilisée pour changer progressivement la transparence de CanvasGroup à la transparence cible `targetAlpha` dans un délai spécifié.

24. Animer le changement de transparence : DoFade

spriteRenderer.DOFade(targetAlpha, duration);

Ce code utilise le plugin DOTween pour obtenir un effet dégradé de transparence. `spriteRenderer` est un composant SpriteRenderer, et la méthode `DOFade` est utilisée pour changer progressivement la transparence de l'objet à la transparence cible `targetAlpha` dans un délai spécifié.

25. Animer les changements de propriétés matérielles : DoFloat

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

Ce code utilise le plugin DOTween pour implémenter l'effet de dégradé de la propriété du matériau. `renderer` est un composant de rendu et la propriété `material` obtient le matériau du rendu. La méthode `DOFloat` est utilisée pour faire disparaître la propriété `"_PropertyName"` du matériau à la valeur cible `targetValue` dans le délai spécifié.

26. Animer les modifications des éléments de l'interface utilisateur : DoSizeDelta

rectTransform.DOSizeDelta(targetSizeDelta, duration);

Ce code utilise le plug-in DOTween pour obtenir l'effet de modification de la taille des éléments de l'interface utilisateur. `rectTransform` est un composant RectTransform et la méthode `DOSizeDelta` est utilisée pour modifier la taille de l'élément de l'interface utilisateur à la taille cible `targetSizeDelta` dans le délai spécifié.

27. Effet de bougé de caméra animé : DoShakePosition

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

Ce code utilise le plugin DOTween pour implémenter l'effet de tremblement de la caméra. `mainCamera` est un objet caméra, la méthode `DOShakePosition` est utilisée pour faire trembler la caméra dans un délai spécifié, où `duration` indique la durée de la secousse, `strength` indique l'intensité de la secousse et `vibrato` indique la fréquence de la secousse, "aléatoire" indique le caractère aléatoire de la gigue.

28. Effet de vibration d'objet animé : DoShakePosition

transform.DOShakePosition(duration, strength);

Ce code utilise le plug-in DOTween pour obtenir l'effet de vibration de l'objet. `transform` représente le composant Transform d'un objet, et la méthode `DOShakePosition` est utilisée pour faire vibrer l'objet dans un délai spécifié, où `duration` représente la durée de la vibration et `strength` représente l'intensité de la vibration .

29. Imbrication de séquences d'animation :

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);

Ce code utilise le plug-in DOTween pour réaliser l'effet d'imbrication de la séquence d'animation. `DOTween.Sequence()` crée un objet de séquence d'animation `sequence`, la méthode `Append` est utilisée pour ajouter une animation dans l'ordre, `transform.DOMove` représente l'animation du mouvement de l'objet, `targetPosition` est la position cible et ` duration` est la durée de l'animation, `SetLoops(-1)` signifie jouer la séquence d'animation dans une boucle infinie.

31. Animer le changement de taille de police : DoFontSize

text.DOFontSize(targetFontSize, duration);

Ce code utilise le plugin DOTween pour obtenir l'effet de changement de taille de police. `text` est un composant Text, et la méthode `DOFontSize` est utilisée pour modifier progressivement la taille de police du texte à la taille de police cible `targetFontSize` dans le délai spécifié.

33. Mise à l'échelle de l'angle de vision de la caméra d'animation : DOOrthoSize

mainCamera.DOOrthoSize(targetSize, duration);

Ce code utilise le plug-in DOTween pour obtenir l'effet de zoom de la perspective de la caméra. `mainCamera` est un objet caméra et la méthode `DOOrthoSize` est utilisée pour modifier progressivement la taille de l'angle de vue orthographique de la caméra à la taille cible `targetSize` dans un délai spécifié.

34.DoText

1. Utilisation de base

textField.DOText(targetText, duration);

Supposons que vous ayez un champ Texte de l'interface utilisateur (représenté dans Unity avec un composant Texte) et que vous souhaitiez modifier son texte en texte cible en une seconde. Tout d'abord, vous devez obtenir une référence au champ Texte de l'interface utilisateur (textField dans l'exemple) dans votre script.

Vous pouvez ensuite utiliser les méthodes DOText pour modifier progressivement le contenu du texte. Transmettez le texte cible comme premier paramètre à la méthode DOText et la durée comme deuxième paramètre.

2. Paramètres facultatifs

Peut être utilisé pour personnaliser la façon dont le texte change. Par exemple, vous pouvez spécifier le type d'animation de courbe pour le texte (tel que Linéaire, EaseIn, EaseOut, etc.) et utiliser des fonctions de rappel pour effectuer d'autres opérations une fois la modification du texte terminée. Voici un exemple:

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

3. Formatage des chaînes

Vous pouvez utiliser la fonction de formatage de chaîne pour insérer la valeur d'une variable dans le texte. Par exemple, en supposant que vous ayez une variable score int score = 100;, vous pouvez l'insérer à une position spécifique dans le texte cible comme ceci :

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

Cela insérera dynamiquement la valeur de la variable dans le texte cible lorsque le texte change.

4. Appel en chaîne

Les méthodes de DoTween prennent généralement en charge le chaînage, ce qui signifie que vous pouvez chaîner plusieurs animations Tween sur la même ligne pour les exécuter de manière séquentielle. Par exemple, vous pouvez masquer un champ de texte une fois le changement de texte terminé :

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