Unity DOTweenの使い方 | 滑らかな動きを作る

UIパネルがパッと表示されるより、ふわっとフェードインする方が気持ちいい——そう感じたことはありませんか。

毎フレーム座標を計算する方法もありますが、コードが長くなりがちです。
DOTweenは、人気のトゥイーンライブラリで、数行で滑らかな移動・回転・フェードを実現できます。

この記事では、DOTweenの導入から、DOMove・DOFade・Ease指定、Sequenceでの連鎖まで、1オブジェクトの往復移動を例に解説します。
AnimatorやUIアニメのコード代替として使える場面も整理します。

＼プログラミング未経験でも大丈夫！まずは1本作り切ろう／

初心者が最初に選ぶならコレ

Unity ノンフィールドRPG
＋スレスパ風JRPG講座

★★★★★ (Unity6対応)

Unity6対応・スマホ化対応の最新カリキュラム。「何から始めればいいかわからない」という初心者でも、ステップごとに手を動かすだけでRPGが完成します。

講座を見てみる ＼ゼロからでもスマホ対応RPGが作れる！／

憧れのアクションゲームに挑戦

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

初心者でもロックマン風の横スクロールACTが作れる講座。7ステージ＋ラスボスという本格構成で、スマホ化・広告実装まで対応。「自分のゲームをリリースしたい」夢を叶えます。

講座を見てみる ＼初心者でも本格ACTが完成する！／

3Dゲーム開発の入口はここ

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

「3Dゲームって難しそう…」と感じている初心者向けの講座。全16回でゼルダ風3Dアクションがスマホ対応で作れるようになります。3D開発の基礎がしっかり身につきます。

講座を見てみる ＼初心者でも全16回で3Dゲームが完成！／

DOTweenとは何か

DOTween（Demigiant製）は、Unityで広く使われているトゥイーン（補間アニメーション）ライブラリです。
開始値から終了値へ、指定時間かけて滑らかに変化させます。

位置・回転・スケール・色・CanvasGroupの透明度など、多くのプロパティに「DO〇〇」メソッドが用意されています。
UIの開閉、キャラの演出、カメラの揺れなど、コードから手軽に演出を足せるのが魅力です。

導入手順

入手方法は主に2つです。
Asset Storeから無料版をインポートするか、対応バージョンではPackage Manager経由でも利用できます。
インポート後、初回起動時にDOTweenのセットアップウィンドウが出たら「Setup DOTween」を実行してください。

スクリプトでは次のusingを追加します。

using DG.Tweening;
using UnityEngine;

「The type or namespace name ‘DG’ could not be found」と出たら、インポート漏れかSetup未実行の可能性があります。
Tools → Demigiant → DOTween Utility Panelから再セットアップを試してください。

管理人

最初は空のシーンにCubeを1つ置き、DOMoveで左右に往復させるだけで十分です。
動きの気持ちよさを体感してからUIに応用しましょう。

DOMoveで移動させる

ワールド座標での移動はtransform.DOMove、ローカル座標ならDOLocalMoveです。
第2引数が秒数、第3引数以降でスナップ設定などを指定できます。

public class MoveSample : MonoBehaviour
{
    [SerializeField] private Vector3 targetPos = new Vector3(3f, 0f, 0f);
    [SerializeField] private float duration = 1.5f;

    void Start
    {
        transform.DOMove(targetPos, duration)
            .SetEase(Ease.OutQuad)
            .SetLoops(-1, LoopType.Yoyo);
    }
}

SetLoops(-1, LoopType.Yoyo)は、行ったり来たりを無限に繰り返す指定です。
1回だけ動かすならSetLoopsは不要です。
移動中に別のトゥイーンを重ねると競合するため、同じTransformには注意して使いましょう。

DOFadeでUIをフェードさせる

CanvasGroupの透明度を変えるDOFadeは、UIの表示・非表示に便利です。
Image単体の色ならDOColorも使えます。

public class PanelFade : MonoBehaviour
{
    [SerializeField] private CanvasGroup canvasGroup;

    public void ShowPanel
    {
        canvasGroup.alpha = 0f;
        canvasGroup.gameObject.SetActive(true);
        canvasGroup.DOFade(1f, 0.4f).SetEase(Ease.OutCubic);
    }

    public void HidePanel
    {
        canvasGroup.DOFade(0f, 0.3f)
            .OnComplete( => canvasGroup.gameObject.SetActive(false));
    }
}

OnCompleteでフェード完了後にSetActive(false)にすると、非表示時のクリック透過も防げます。
CanvasGroupコンポーネントをUIの親に付けておくのが定番です。

EaseとKillの使い方

SetEaseで、動きのカーブを変えられます。
OutQuadは自然な減速、InOutSineはゆったりした往復に向いています。
DOTweenのドキュメントやEase Inspectorでプレビューすると選びやすいです。

途中で止めたいときはKillを呼びます。
トゥイーンの戻り値（Tween型）を変数に保持しておくと管理しやすいです。

Tween moveTween;

void StartMove
{
    moveTween?.Kill;
    moveTween = transform.DOMove(targetPos, 2f);
}

void StopMove
{
    moveTween?.Kill;
}

Sequenceで動きを連鎖する

「移動してから回転、そのあとフェード」のように順番に実行したいときはDOTween.Sequenceを使います。

void PlayCombo
{
    Sequence seq = DOTween.Sequence;
    seq.Append(transform.DOMove(pointA, 1f));
    seq.Append(transform.DOLocalRotate(new Vector3(0f, 180f, 0f), 0.5f));
    seq.Append(canvasGroup.DOFade(0f, 0.3f));
    seq.SetEase(Ease.InOutQuad);
}

Appendは前のTweenの終了後に実行、Joinは同時開始です。
カットシーンやリザルト演出など、段階的な演出をコードだけで組み立てられます。

管理人

複雑なキャラアニメはAnimatorの方が向いています。
UIの開閉やカメラの軽い演出はDOTweenが速い、と覚えておくと選びやすいですよ。

Animatorとの使い分け

ヒューマノイドの歩行や攻撃モーションなど、状態遷移が多いキャラアニメはAnimator Controllerが適しています。
一方、UIのスライド、ボタンのバウンス、一時的なカメラ移動はDOTweenの方がコードが短く済むことが多いです。

同じオブジェクトにAnimatorとDOTweenを同時にかけると、Transformの制御がぶつかる場合があります。
役割を分けるか、DOTween実行中はAnimatorを一時停止するなど、どちらがTransformを握るか意識しましょう。

まとめ

DOTweenは、DOMove・DOFade・Sequenceなどで滑らかな演出を短いコードで追加できるライブラリです。
導入後Setupを忘れずに、EaseとKillで見た目と制御を調整していきましょう。

まずは1オブジェクトの往復移動から試し、慣れたらUIフェードや連鎖演出へ広げるのがおすすめです。
Animatorと使い分ければ、ゲーム全体の動きがぐっと洗練されます。

UIやアクションの実装を動画で追いながら学びたい方は、Unity入門の森の講座も参考になります。
DOTweenで動きを付けたら、ゲームプレイと組み合わせて完成度を上げていきましょう。