Notre avis

Fournit un modèle structuré pour créer des panneaux UI animés dans Unity avec DOTween, en utilisant UIBase et ITweenAnim.

Points forts

Sépare clairement le cycle de vie UI (affichage/masquage) de l'animation via une interface ITweenAnim.
Utilise un animateur DOTween configurable dans l'Inspector pour des animations flexibles.
Impose un singleton statique pour un accès facile depuis n'importe quel script.
Inclut des exemples concrets et un template prêt à l'emploi.

Limites

Nécessite que tous les callbacks UIBase soient surchargés, même vides, ce qui peut être verbeux.
Dépend de DOTween, une bibliothèque externe qui doit être importée.
Les animations sont limitées aux types prédéfinis (DOAnchorPos, Scale, Fade, PunchScale).

Quand l'utiliser

Quand vous devez ajouter un nouveau panneau UI animé ou modifier un existant dans un projet Unity utilisant DOTween.

Quand l'éviter

Pour des interactions UI très simples sans animation, ou si vous ne voulez pas dépendre de DOTween.

Exemples

New animated panel with DOTween

Create a new UI panel for player settings using the UIBase/ITweenAnim pattern with a fade-in and scale-out animation, and a singleton accessor.

Modify existing panel to use pattern

Refactor the current score display panel to follow the UIBase pattern with DOTween animations for show/hide.

Add multiple simultaneous animations

Add a new UI panel that slides in from the left while fading in, using multiple AnimSettingDotween under one EAnimIDs in DoTweenUIAnimator.

Use when: adding or modifying any UI panel, HUD element, or animated screen.

Pattern (3 layers — all required)

UIBase          → show/hide lifecycle (_UIBaseShowUI / _UIBaseHideUI)
ITweenAnim      → animation contract (playInAnim / playOutAnim)
DoTweenUIAnimator → DOTween driver, configured entirely in Inspector

Minimal implementation

public class UI_MyPanel : UIBase, ITweenAnim
{
    public static UI_MyPanel s_Instance;
    [SerializeField] DoTweenUIAnimator m_popUp;

    void Awake() { if (s_Instance && s_Instance != this) { Destroy(gameObject); return; } s_Instance = this; }

    public static void ShowUI_s() => s_Instance?._UIBaseShowUI(0.3f);
    public static void HideUI_s() => s_Instance?._UIBaseHideUI(0.3f);

    // UIBase — override all four, even if empty
    protected override void OnCanvasShowBegin() { UpdateUI(); playInAnim(0.3f); }
    protected override void OnCanvasShowEnd()   { }
    protected override void OnCanvasHideBegin() { playOutAnim(0.3f); }
    protected override void OnCanvasHideEnd()   { } // put post-close callbacks here

    public void playInAnim(float d)  => m_popUp.PlayAnimation(DoTweenUIAnimator.EAnimIDs.InAnim, d);
    public void playOutAnim(float d) => m_popUp.PlayAnimation(DoTweenUIAnimator.EAnimIDs.OutAnim, d);
}

Full template with Inspector setup → /project:new-ui-panel

DoTweenUIAnimator quick ref

| Type | Needs | Use for | |---|---|---| | DOAnchorPos | RectTransform | slide in/out | | Scale | RectTransform | pop in/out | | Fade | CanvasGroup | fade in/out | | PunchScale | RectTransform | attention/bounce |

Multiple AnimSettingDotween under one EAnimIDs → play simultaneously.
playOnStart = true on a step → auto-plays on scene load (idle loops, etc).

Reacting to game events in UI

void OnEnable()  => GameManager.AddListener_s(GameConstants.E__GameScoreUpdated, OnScore);
void OnDestroy() => GameManager.RemoveListener_s(GameConstants.E__GameScoreUpdated, OnScore);
void OnScore(object d) { var data = (ScoreUpdateData)d; /* update text */ }

State-change driven UI

UI_ShowScore is the canonical example — OnCanvasHideEnd() calls SetGameState(ToBeStart).
Use this pattern when a panel's close action must drive a game state transition.

Existing singleton panels

| Class | Shows | |---|---| | UI_ShowScore | Post-rally score (static ShowUI_s(myScore, oppScore)) | | UIPopUp | Generic message popup (ShowUI_s(text, onClose)) | | UIGameplayControls | In-game HUD | | UICurrenyHUD | Coin/gold display |

Gotchas

Always override all four UIBase callbacks — leaving one unimplemented causes compile error
Fade type requires a CanvasGroup on the target — RectTransform alone won't work
_UIBaseShowUI(duration) and _UIBaseHideUI(duration) are the only correct entry points — never call gameObject.SetActive() directly

Panneau UI Unity avec animations DOTween

Recommandé pour