技術ブログ

DOTweenは、非常にスムーズなアニメーションを素早く簡単に作成できるようにするための強力で無料の単一のアニメーションエンジンです。今回はウェイポイントを使ったアニメーションを制御する際に便利な機能について紹介します。

DOTweenにはパスを作成するために、オブジェクトまたはUI要素を特定のポイントまたはwaypointのリストに移動するための便利な機能が多数含まれています。最も便利な機能の一つはSequenceです。オブジェクトをパスに沿って移動させるだけでなく、複数のパスを次々に、またはパス内部のwaypointにもステッチすることができます。

（画像引用元：http://dotween.demigiant.com/index.php）

DOTweenを使用するには、まず適切なNamespaceを追加し、DOTweenを初期化する必要があります。

using DG.Tweening;

private void Start()
{
   DOTween.Init();
}

その後、Sequenceを作成して初期化する必要があります：

using DG.Tweening;

private Sequence mySequence;

private void Start()
{
   DOTween.Init();
   mySequence = DOTween.Sequence();
}

Sequenceが初期化すると、パラメータをAppendキーワードで与えることでTweenの挙動を簡単に追加できます。たとえば、DOMove（）を使用してオブジェクトを移動したり、DOPath（）を使用してオブジェクトをパスに沿って移動したりできます：

mySequence.Append(transform.DOPath(Vector3[] waypoints, float duration, PathType pathType = Linear, PathMode pathMode = Full3D, int resolution = 10, Color gizmoColor = null);

Tweensをいくつでも追加可能で、素晴らしいアニメーションを作ることを可能できます。
併せて以下のような多くの有用なパラメータを制御することができます：

• SetLookAt（）関数を使用して、Tween中に前方のオブジェクトが向いている方向を制御。
• SetEase（）関数をつかって、TweenをEaseのバリエーションを制御。
• OnComplete（）コールバック関数で終了したときにすべきことを指定。
• OnWaypointChange（）コールバック関数を使用して、（DOPath（）での）各ウェイポイントまたは特定のウェイポイントの到達した後に別の挙動を指定。

OnWaypointChange（）を使った例としては、Sequenceのタイムスケールを変更するだけで、実行時でも特定のウェイポイントからTweenの速度を変更することができます：

OnWaypointChange((int waypoint) =>
{
   if(waypoint == 5) { mySequence.timeScale = 0.5f; }
   if(waypoint == 8) { mySequence.timeScale = 2f; }
}) 

これらすべてのパラメータは、単純にAppendの最後に追加できます：

mySequence.Append(DOPath(...)
.SetLookAt(...)
.SetEase(...)
.OnWaypointChange((int waypoint) => { //Do something })
.OnComplete(() => { //Do Something }));

最初のSequence Tweenが作成されたら、Appendの代わりに新しいTweenに加えることもできます。
これにより、Tweenは最初にプレイした後ではなく、同時にプレイします。

たとえば、最初のTweenが位置を制御している間に回転コントロールも同時に行う場合は下記のように記述できます。：

mySequence.Append(DOMove(...));
mySequence.Join(transform.DORotate(...));

興味があり、DOTweenにあるすべてのオプションを見たい場合は、以下のリンクをたどってdocumentation を見てください。

http://dotween.demigiant.com/documentation.php