Help us understand the problem. What is going on with this article?

DOTween完全に理解するその2 Transformアニメーション編

前回:DOTween完全に理解するその1 コントロールAPI編

今回解説するアニメーション

DOTweenではTransformやUI.Imageなどのオブジェクト毎に
Tweenを生成できる拡張メソッドを提供しています。
今回はその中からTransformに関するものをピックアップして解説していきます。

メソッド名 メモ
DOMove ワールド座標を指定して移動
DOLocalMove ローカル座標を指定して移動
DOMoveX/Y/Z 特定の軸上の座標へ移動
DOBlendableMoveBy 合成可能な移動
DORotate 各軸の回転量を指定して回転
DOBlendableRotateBy 合成可能な回転
DOLockat 特定の方向に注目するように回転
DOScale xyzのスケールを指定
DOScaleX/Y/Z 各軸のスケールを指定
DOBlendableScaleBy 合成可能なスケール

環境は引き続き以下の通りです
Unity:2019.3.0f6
DOTween:v1.2.335

移動

transform.DOMoveX(9, 1);                                   //position.x=9まで移動
transform.DOMove(new Vector3(9,0,0), 1);                   //(9,0,0)まで移動
transform.DOMove(new Vector3(9,0,0), 1).SetRelative(true); //現在の位置から(9,0,0)だけ移動
transform.DOBlendableMove(new Vector3(9,0,0), 1);          //(9,0,0)まで移動(合成可能)
transform.DOLocalMove(new Vector3(9,0,0), 1);              //ローカル座標で(9,0,0)まで移動

1Move.gif

SetRelative()はDOMoveだけの特殊なものではなく大体のTweenに効果があります。
DOMoveの場合trueにすると「現在座標からの相対座標」に移動します

ただ、DOTweenには「同じTweenを同時に実行できないシチュエーション」があります。
以下のgifを見てみてください。
DOTweenを使用してジグザグ移動するアニメーションを作りました。
2movezig.gif
一番上のDOMoveを2つ使用したSphereは一直線に移動しています。
DOMoveが1つのGameObjectに対して複数ある場合、
「先に実行されるTweenが後に実行されるTweenで上書きされてしまう」のです。
これはDOMoveが内部的にtransform.Position = 移動後の座標をしているためです。

複数の軸に対して変更を行いたい場合は以下のいずれかで実装可能です。
1. DOMoveX/Y/Zでそれぞれの軸に対して移動を行う
2. 親子関係のGameObjectそれぞれにDOMoveとDOLocalMoveを使用する
3. DOBlendableMoveByを使用する

またDOBlendableMoveByは相対座標への移動になります
以下は最初のgifの移動完了時の画像です。
1MoveKaisetu.png
SetRelatable(true)したものとDOBlendableMoveを使用したものが同じ座標で停止しています。
ただこれで勘違いしやすいのは私だけかもしれませんが
SetRelative(true)は相対座標へ移動する設定であり、あくまで移動方法はDOMoveである
ということです。(3敗)
複数の移動を同時に1つのGameObjectに対して行う場合はDOBlendableMoveを使用しましょう。
DOBlendableMoveByは内部的にtransform.position += 移動ベクトルです。

回転

transform.DORotate(new Vector3(0,0,360), 1, RotateMode.Fast);          //最短で指定の角度まで回転(360度を超えない)
transform.DORotate(new Vector3(0,0,360), 1, RotateMode.FastBeyond360); //最短で指定の角度まで回転(360度を超える)
transform.DORotate(new Vector3(0,0,360), 1, RotateMode.WorldAxisAdd);  //ワールド軸に対して
transform.DORotate(new Vector3(0,0,360), 1, RotateMode.LocalAxisAdd);  //ローカル軸に対して
transform.BlendableRotateBy(new Vector3(0,0,360), 1 RotateMode.WorldAxisAdd); //合成可能な回転(相対的)
transform.Lookat(Vector3.forward, 1, AxisConstraint.None, Vector3.up); //指定したべjクトルを向くように回転する

3Rotate.gif
回転に関しても移動の時と同様で、
複数の回転を同一GameObjectに行う場合はBlendableRotateByを使用しましょう。

LookatはQuaternion.LookRotationと同様ですが、AxisConstraintを使用することで
回転軸を特定の軸のみに制限をかけることができます。(AxisConstraint.X | AxisConstraint.Yなどで複数軸指定できます)

拡縮

transform.Scale(new Vector3(2,2,2), 1);              //2倍スケール
transform.ScaleX(4, 1);                              //X軸だけ4倍スケール
transform.BlendableScaleBy(new Vector3(3, 0, 0), 1); //合成可能スケール(相対的)

4Scale.gif
スケールに関しても他Tweenと同様ですね。
特に面白みもないのでEaseを設定してみましたが、これだけでも楽しげな動きをしてくれます。

まとめ

今回はTransformに関するTweenのみを紹介でした。
これらを組み合わせるだけでも、かなり気持ちいいそれっぽい動きをつけることができます。
その内最近話題のブログを見つつそれっぽい動きを作るネタみたいな記事を書こうかなと考えています。

BEATnonanka
Uniny次元に生息しているマン クライアントエンジニア 社会の荒波の中でアプリ作ったり、運営したりしてます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした