248
207

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DOTweenをふわっとまとめてみた

Last updated at Posted at 2017-03-15

#はじめに
DOTween is なに?って方もいると思います。
Unityのアセットで名前の通りTween系のアセットです。
中でも処理が最適化されているらしく早いみたいです(要検証)
リンクはこちら

さらにDoTweenはシーケンスという概念を持っており、例えば右行った後に拡大縮小してパンチされてジャンプしてプルプルして、というのをシンプルに書くことができます。(Cocos2d_xを触ったことがある人はActionと同じ振る舞いができるとお考えください)
ここでは、基本的な使い方や詰まった点など書いていきます。

#基本的な使い方
まず忘れてはいけないのが

using DG.Tweening;

DoTweenは2D,3Dどちらも使えますがここでは2Dについて書いていきます。
例ではuGUIのRectTransformをTweenさせます。
なおRectTransformは、

[SerializeField]
RectTransform rectTran;

で取得しているものとします。

基本的にDOTweenは、

rectTran.DOhoge(,時間);

のようにかいきます。(hogeはScaleやMoveなどしたいことを書く)

##移動系
もっとも使うであろう移動系
書き方は

//1秒で座標(1,1,1)に移動
rectTran.DOMove (
	Vector3.one,  //移動後の座標
	1.0f       //時間
	);

他にもDOMoveX,DOMoveYなど一つの要素だけ動かすこともできる。(マジ有能)
ちなみに上記の書き方だとワールド座標になってしまうがDOLocalMoveとするとローカル座標で扱われる。
ここからいくつ移動といった書き方もあるがそちらは後ほど説明いたします。

##スケール系
プニッとさせるのに簡単にできるスケール系
書き方は

//1秒でスケール(1,1,1)にスケーリング
rectTran.DOScale (
	Vector3.one,  //終了時点のScale
	1.0f       //時間
	);

こちらもMove同様DOScaleX,DOScaleYもあります。

##回転系
少し遊び心をもたせたいときに使う回転系
書き方は

// 1秒かけて90度まで回転
rectTransform.DORotate(
    new Vector3(0f, 90f),   // 終了時点のRotation
    1.0f                    // アニメーション時間
);

ちなみに上記の場合例えば300度にした場合360->359...301->300のように近い方に回転してしまいます。
0->1...299->300のようにしたい場合はデフォルトでは第3引数がRotateMode.FastとなっているのですがここをRotateMode.FastBeyond360を引数にするとなります。

##その他用意されている動き
DOTweenでは頻繁に使いそうなものをあらかじめ用意してくれています。
###Jump
移動しながらぴょんぴょんしていきます。

rectTran.DOLocalJump(
    Vector3.one,      // 移動終了地点
    30,               // ジャンプする力
    10,               // ジャンプする回数
    1.0f              // アニメーション時間
);

DOLocalJumpもあります。

###Punch
擬音でいうとビヨヨーンみたいな感じで、指定した値と現在の値を行き来する。

rectTran.DOPunchScale(
    new Vector3(1.5f, 1.5f),    // scale1.5倍指定
    1.0f                        // アニメーション時間
);

他にもDOPunchPosition,DOPunchRotationがあります。

###Shake
先ほどのよりランダムに変化をする。

rectTran.DOShakeScale(
    1.0f           // アニメーション時間
);

こちらもDOShakePosition,DOShakeRotationがあります

##変数などのTween
少し変則的な使い方ですが例えばスコアを獲得したとき一気に上がるのではなく徐々に数を増やしたい。といったこともできます。(ほんと助かる)
例えば

int score = 0;
// 数値の変更
DOTween.To(
    () => score,          // 何を対象にするのか
    num => score = num,   // 値の更新
    100,                  // 最終的な値
    1.0f                  // アニメーション時間
);

など簡単に使えますね。

##Sequence
これは冒頭でも紹介しているように動きを組み立てて実行することができるものです。
あれやってこれやってこれと同時にあれやってといった感じですね。

###Append()
直前の動作に追加するときに使います。

Sequence seq = DOTween.Sequence();
//(1,1,1)に移動
seq.Append(
rectTransform.DOLocalMove(Vector3.one, 1.0f)
);
//(0,0,0)にスケーリング
seq.Append(
rectTransform.DOScale(Vector3.zero, 1.0f)
);

###Join()
こちらは先ほどが追加に対して、同時に行うときに使います。

Sequence seq = DOTween.Sequence();
//(1,1,1)に移動
seq.Append(
rectTransform.DOLocalMove(Vector3.one, 1.0f)
);
//(0,0,0)にスケーリング
seq.Join(
rectTransform.DOScale(Vector3.zero, 1.0f)
);

基本的にはこのような感じで使えますがさらに便利な機能もたくさんあるので詳しく見たい方はこちら

##より使いこなすための追加要素
ここからは単体としては使いませんがさらに細かく設定するときに使います
###Easing
アニメーションといえばEasingですよね。
デフォルトでもこのように豊富にあります
書き方は

hoge.SetEase(Ease.InOutCirc);

hogeはMoveやSequenceなどです。
Ease.InOutCircはeaseの種類です。

もっと細かく決めたい方は

[SerializeField]
AnimationCurve curve;

のように設定したcurveを()の中に書けば設定できます。

###Loop
言わずもなが繰り返しです。
書き方は

hoge.SetLoops (100);

()の中の回数分繰り返します。
ちなみに-1を入れると無限ループします。

###Delay
開始時間を遅らせるものです

hoge.SetDelay(1.0f);

###Relative
Moveの時に先延ばしにした項目です。
基本的にDOTweenでは絶対値で計算しています。(どこどこに行く、この大きさ、角度になるなど)
これを設定した場合相対的に計算するようになります(ここから〜移動、今の大きさの何倍になるなど)
書き方は

hoge.SetRelative();

###Callback
こちらは始まった時、更新時、終わった時などに呼ばれるものです。

hoge.OnStart(() => {
        // アニメーション開始時によばれる
    });
hoge.OnUpdate(() => {
        // 対象の値が変更される度によばれる
    });
hoge.OnComplete(() => {
        // アニメーションが終了時によばれる
    });

##止める、始めるなどの操作
###一時停止

hoge.Pause();

###再生

hoge.Play();

###再スタート

hoge.Restart();

###終了

hoge.Complete();

###破壊

hoge.Kill();

#注意点など
ここまでさーっと書いてきましたが使う時にまた見て頂ければと思います。
ここからは僕が詰まった、引っかかったところについて書いていきます。
##Complete OR Killするまで残り続ける問題
これは与えたTweenのobjectをsetActive(false)しても内部でTweenし続けるということです。
終了するタイミングで終わっていない可能性があるならCompleteやKillなどを呼びましょう
##-1LoopがCompleteできない問題
これはSetLoopのところで(-1)にすると無限ループできると書きました。こちらには落とし穴がありCompleteという概念がなくなります(完了することがないため)なので消すときは必ずKillしてください(結構悩まされました)
##Killしても消えないsequence
これは未だに原因がよくわからないのですが、僕はsequence1のOnCompleteでsequence2の無限Loopを適用したのですが消すタイミングでKillしても消すことができませんでした。
原因がわかり次第追記します。
#最後に
使えば使うほど便利機能を理解してくると思います。ぜひ動き系など作るときは使って見てください。

248
207
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
248
207

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?