DOTween基礎用語解説

DOTweenの基礎用語

DOTweenで使われる基礎的な用語を説明します。

Tweener

Tweenerは値を制御してアニメーションさせるもの、もしくはアニメーション化したものです。

例えば、以下のように書かれたものがTweenerです。

// transformのpositionの値を(1, 1, 1)まで3秒かけてアニメーションさせるTweener
transform.DOMove(new Vector3(1, 1, 1), 3);  

// クラス変数hogeの値を8fまで4秒かけてアニメーションさせるTweener
float hoge
DOTween.To(() => hoge, (x) => hoge = x, 8f, 4); 

Sequence

SequenceはTweenerや他のSequenceを制御して、グループとしてアニメーションさせるもの、もしくはアニメーション化したものです。

例えば、以下のように書かれたものがSequenceです。

// transformのpositionの値を(1, 1, 1)まで3秒かけてアニメーションさせたあと、
// transformのpositionの値を(2, 3, 4)まで5秒かけてアニメーションさせるSequence
var sequence = DOTween.Sequence()
    .Append(transform.DOMove(new Vector3(1, 1, 1), 3))
    .Append(transform.DOMove(new Vector3(2, 3, 4), 5));  

// transformのpositionの値を(-1, -1, -1)まで2秒かけてアニメーションさせたあと、
// 先ほどのSequenceを実行するSequence
DOTween.Sequence()
    .Append(transform.DOMove(new Vector3(-1, -1, -1), 2))
    .Append(sequence);

かなり複雑なことをしない限りは、基本的に「Sequence = Twennerを繋げるもの」という認識で良いと思います。

Tween

TwennerとSequenceをまとめてTweenと呼びます。

表にまとめるとこのようになります。

イージング

イージングはDOTweenに限らず使われる用語で、アニメーションの動きの加減速のことです。

DOTweenでは動きも含めた「値の制御」を行うので、「値の増減の緩急」と捉えた方が適しているかもしれません。

例えばこの動画を見てください。

上は一定の速度で移動していますが、下は動きに緩急がついています。

これは「最初は遅く、徐々に速くなる」というイージングを設定したもの。

このようなイージングを適切に設定することで、動きにメリハリがついて気持ちの良いアニメーションにすることができます。

DOTweenでは30種類以上のイージングを設定することができます。

まとめ

DOTweenの基礎用語をまとめてみました。

ただ、実際に使ってみれば簡単に使い方も分かるかと思うので、無理に覚えなくても大丈夫です。

DOTweenの記事とかドキュメントを読んでいて、分からない用語があった場合には、ぜひ参照してください。