こんにちわ、DOTween大好きオオバです。

Unityでアニメーションを作る時に何を使いますか?
プログラミングする場合は、
DOTweenをオススメします。

オオバ的に使わない理由がない
使わないと損だと言い切ります。

本記事ではDOTweenの超基本編ということで、
Transformのアニメーションを
DOTweenで作っていきます。

ソースコードはコピペですぐに使えます。
困った時は本記事を読み返してください。

直線移動、回転、拡大縮小
これらのアニメーション方法を解説します。

この記事の内容

DOTweenでTransformの直線移動アニメーション

  1. DOLocalMove
  2. DOLocalMoveX
  3. DOLocalMoveY
  4. DOLocalMoveZ

直線移動はこの4種類をまず覚えましょう。

1.DOLocalMove:直線移動

【超基本】DOTweenでTransformのアニメーション_0

1秒 かけて 座標 (3, -1, 1)直線移動 するDOTweenです。

transform.DOLocalMove(new Vector3(3f, -1f, -4f), 1f);  

DOLocalMoveは引数にVector3型を渡します。
対象のTransformのポジションを直線移動します。

2. DOLocalMoveX : X軸指定 直線移動

【超基本】DOTweenでTransformのアニメーション_1

1秒 かけて X軸だけ3の座標直線移動 するDOTweenです。

transform.DOLocalMoveX(3f, 1f);  

3. DOLocalMoveY : Y軸指定 直線移動

【超基本】DOTweenでTransformのアニメーション_2

1秒 かけて Y軸だけ3の座標直線移動 するDOTweenです。

transform.DOLocalMoveY(3f, 1f);  

4. DOLocalMoveZ : Z軸指定 直線移動

【超基本】DOTweenでTransformのアニメーション_3

1秒 かけて Z軸だけ-6の座標直線移動 するDOTweenです。

transform.DOLocalMoveZ(-6f, 1f);  

この他にLocalをワールド座標版の
DOMoveも存在します。

【注意】 uGUIではDOAnchorPosを使う

uGUIの直線移動は、
DOLocalMoveではなく
DOAnchorPosを使いましょう。

uGUIにはアンカーという概念があるため、
DOLocalMoveでは意図しない場所へ
移動することがあります。

DOTweenでTransformの回転アニメーション

  1. DOLocalRotate
  2. DORotateQuaternion

DOTweenの回転アニメーションは
この2つのメソッドを覚えておきましょう。

1. DOLocalRotate: オイラー角回転アニメーション

【超基本】DOTweenでTransformのアニメーション_4

DOLocalRotate
オイラー角で回転アニメーションします。

transform.DOLocalRotate(new Vector3(0, 0, 180f), 1f);  

1秒かけて角度(0, 0, 180f)に回転させます。

※初期状態:角度(45, 0, 180f)

2. DOLocalRotate: クォータニオンで回転アニメーション

【超基本】DOTweenでTransformのアニメーション_5

transform.DORotateQuaternion(  
    Quaternion.AngleAxis(180f, new Vector3(0.5f, 1f)), 1f);  

DORotateQuaternion
クォータニオンで回転アニメーションします。

DOTweenでTransformの拡大縮小アニメーション

DOTweenの拡大縮小アニメーションは
この1種類覚えておけば大丈夫です。

DOScale: 拡大縮小

【超基本】DOTweenでTransformのアニメーション_6

transform.DOScale (new Vector3 (9f, 0.5f, 2f), 1f);  

DOScaleは拡大縮小アニメーションします。
1秒かけてスケール(9f, 0.5f, 2f)に拡大縮小アニメーションします。

ここまでのトゥイーンは、
どれも本当によく使いますので、
覚えておきましょう。

DOTweenでTransformのアニメーションまとめ

この3種類を覚えておけば
Transformのアニメーションは事足ります。

DOTweenには他にも便利なアニメーション機能がありますが、
基礎としてこの3種類を使いこなすことから始めましょう。

他にもDOTweenを使いこなす上で
さまざまな要素が必要になります。

などなど。

宣伝になりますが、
全部ひっくるめて体系的に学べる教材を作りました!
DOTweenの教科書です。

無料部分だけでも十分にDOTweenを
使いこなすことができます
ので、
一読することをオススメします。

DOTweenの教科書


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいDOTweenライフをお過ごしください。

期間限定 最大95%オフセール
効率UPメガバンドル開催中!最大95%オフ!!!
期間 : 11月1日午後15時59分まで
オススメ記事
検証環境