DOTweenあっさり目メモ

以前から存在は知っていたものの触っていなかったTween系アセットのDOTween

今回あっさり目に触ってみたのでまとめてみる

導入

アセットストアからDOTweenをインポート。今回はFREE版を使用

すると下のような小さなウィンドウが出てくるのでOpen DOTween Utility Panelを選択

派手な画面が出てくるので緑のSetup DOTweenボタンをポチる

Applyを選択

これでDOTweenを使えるようになった

軽く触ってみる

DOTweenを使うにはスクリプト内で名前空間

using DG.Tweening;

を宣言する

移動

基本的にDOTweenはTransformまたはRectTransformに対して設定する

今回はuGUIのテキストを移動させてみるのでRectTransformで設定

移動にはワールド座標で扱うDOMove( )とローカル座標で扱うDOLocalMove( )がある

using DG.Tweening;
public class DOTweenTest : MonoBehaviour
{
    RectTransform rect;

    void Start()
    {
        rect = GetComponent<RectTransform>();

        // DOMove(移動終了地点, アニメーション時間)
        rect.DOLocalMove(new Vector3(200, 200, 0), 1.0f);
    }
}

これはローカル座標で(200, 200, 0)の地点に1秒かけて移動しろというスクリプト

DOLocalMove

相対座標で移動させる場合にはSetRelative( )をつける

// (200, 200, 0)の地点に1秒かけて移動する
rect.DOLocalMove(new Vector3(200, 200, 0), 1.0f);

// 現在の座標から(200, 200, 0)だけ移動する
rect.DOLocalMove(new Vector3(200, 200, 0), 1.0f).SetRelative();

回転

回転にはDORotateを使う

// DORotate(終了時点のRotation, アニメーション時間)
rect.DORotate(new Vector3(0,180,0), 1.0f);

DORotate

DORotateには第3引数があり、デフォルトではRotateMode.Fastとなっている

// デフォルトではRotateMode.Fast
// 最短回転
rect.DORotate(new Vector3(0,450,0), 1.0f);

// 360を超えて最短回転
rect.DORotate(new Vector3(0,450,0), 1.0f, RotateMode.FastBeyond360);

RotateMode

デフォルトのFastでは360度を超えないため90度と変わらない動きとなる

拡大・縮小

拡大・縮小にはDOScaleを使う

// DOScale(終了時点のScale値, アニメーション時間)
rect.DOScale(new Vector3(2, 2, 0), 1.0f);

DOScale

色

色の変更にはDOColorを使う

Text text = GetComponent<Text>();

// DOColor(終了時点の色, アニメーション時間)
text.DOColor(Color.red, 1.0f);

DOColor

Easing

イージングはアニメーションに変化や緩急をつけて自然に見せること
イージング関数一覧 Easing function

使い方

関数に続いてSetEase( )で設定する。ちなみにデフォルトはEase.InOutQuad

rect.DOLocalMove(new Vector3(400,0,0), 3f).SetEase(Ease.InCubic);

InCubic

プリセットアニメーション

DOTweenにはあらかじめ用意されているアニメーションがある。便利

Jump

指定値まで跳ねていくアニメーション

// DOJump(移動終了地点, ジャンプ力, ジャンプ回数, アニメーション時間)
rect.DOLocalJump(new Vector3(400,0,0),50, 5, 2f);

DOJump

Punch

現在値と指定値の間をいったりきたりするアニメーション

// DOPunchScale(Scale値, アニメーション時間)
rect.DOPunchScale(new Vector3(2,2,0), 2f);

DOPunchScale

DOPunchScaleの他にDOPunchPositionとDOPunchRotationがある

Shake

属性ごとの不規則アニメーション。こちらもDOShakeScaleの他にDOShakePositionとDOShakeRotationがある

// DOShakeScale(アニメーション時間)
rect.DOShakeScale(2f);

DOShakeScale

カメラにつければ衝突を簡単に表現できるかも？

DOShakePosition

シーケンスなどの続きはまた今度