前回：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=９まで移動
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)まで移動
SetRelative()はDOMoveだけの特殊なものではなく大体のTweenに効果があります。
DOMoveの場合trueにすると**「現在座標からの相対座標」に移動します**
ただ、DOTweenには**「同じTweenを同時に実行できないシチュエーション」があります。**
以下のgifを見てみてください。
DOTweenを使用してジグザグ移動するアニメーションを作りました。
一番上のDOMoveを２つ使用したSphereは一直線に移動しています。
DOMoveが1つのGameObjectに対して複数ある場合、
「先に実行されるTweenが後に実行されるTweenで上書きされてしまう」のです。
これはDOMoveが内部的にtransform.Position = 移動後の座標をしているためです。
複数の軸に対して変更を行いたい場合は以下のいずれかで実装可能です。
- DOMoveX/Y/Zでそれぞれの軸に対して移動を行う
- 親子関係のGameObjectそれぞれにDOMoveとDOLocalMoveを使用する
- DOBlendableMoveByを使用する
またDOBlendableMoveByは相対座標への移動になります
以下は最初のgifの移動完了時の画像です。
SetRelatable(true)したものとDOBlendableMoveを使用したものが同じ座標で停止しています。
ただこれで勘違いしやすいのは私だけかもしれませんが
SetRelative(true)は相対座標へ移動する設定であり、あくまで移動方法はDOMoveである
ということです。（３敗）
複数の移動を同時に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クトルを向くように回転する
回転に関しても移動の時と同様で、
複数の回転を同一GameObjectに行う場合はBlendableRotateByを使用しましょう。
LookatはQuaternion.LookRotationと同様ですが、AxisConstraintを使用することで
回転軸を特定の軸のみに制限をかけることができます。（AxisConstraint.X | AxisConstraint.Yなどで複数軸指定できます)
拡縮
transform.Scale(new Vector3(2,2,2), 1); //２倍スケール
transform.ScaleX(4, 1); //X軸だけ４倍スケール
transform.BlendableScaleBy(new Vector3(3, 0, 0), 1); //合成可能スケール（相対的）
スケールに関しても他Tweenと同様ですね。
特に面白みもないのでEaseを設定してみましたが、これだけでも楽しげな動きをしてくれます。
まとめ
今回はTransformに関するTweenのみを紹介でした。
これらを組み合わせるだけでも、かなり気持ちいいそれっぽい動きをつけることができます。
その内最近話題のブログを見つつそれっぽい動きを作るネタみたいな記事を書こうかなと考えています。