おしぼりエンジニアブログ

おしぼり会社のボンボンがエンジニアで頑張っているお話

【Unity】iTweenの使い方 / アニメーションメソッド【入門】

iTweenの使い方のアニメーションメソッド編になります。
前回の話の続きで、今回はiTweenのアニメーションメソッドの内容です。
doggy.hatenablog.com

アニメーションメソッド

前回で使えていないものが結構あったりします。
ですが、基本的に応用的な使い方でいけちゃいます。

iTween.Move◯◯

TransformクラスのpositionまたはlocalPositionを制御してオブジェクトを移動させるメソッドです。
MoveTo以外にも色々あり、用途によって使い分けることになります。

  • MoveTo : 現在の位置から指定した位置へ移動させる
  • MoveFrom : 指定した位置から現在の位置へ移動させる
  • MoveBy : 現在の位置から指定したオフセット分を加算した位置へ移動させる
  • MoveAdd : 他の移動アニメーションにさらに移動を追加する

iTween.Rotate◯◯

TransformクラスのeulerAnglesまたはlocalEulerAnglesを制御して、オブジェクトを回転させるメソッドです。
こちらもRorateTo以外にも色々あります。また、単位は度( °)になります。

  • RotateTo : 現在の角度から指定した角度へ回転させる
  • RotateFrom : 指定した角度から現在の角度へ回転させる
  • RotateBy : 現在の角度から指定したオフセット分を加算した角度へ回転させる
  • RotateAdd : 他の回転アニメーションにさらに回転を追加する

iTween.Scale◯◯

TransformクラスのlocalScaleを制御して、オブジェクトを拡大させるメソッドです。
こちらも上記2つと同じく、4つあります。

  • ScaleTo : 現在の大きさから指定した大きさへ拡大させる
  • ScaleFrom : 指定した大きさから現在の大きさへ拡大させる
  • ScaleBy : 現在の大きさから指定したオフセット分を加算した大きさへ拡大させる
  • ScaleAdd : 他のスケールアニメーションにさらに拡大を追加する

iTween.◯◯Update

Updateの様な繰り返し呼ばれる場所で使用するメソッドです。

  • MoveUpdate : 指定したポジションに移動させる(カーソルや敵への追尾などに使ったりできます)
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.MoveUpdate(this.gameObject, iTween.Hash(
     	    "position", worldMousePos, 
	    "time", 2.0f)
    );
}

https://i.gyazo.com/6d87d8bd80b3d0ae3e95d9554f9ab4d8.gif

  • ScaleUpdate : 指定した大きさに変える。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.ScaleUpdate(this.gameObject, iTween.Hash(
	"x", worldPosMouse.x, 
	"y", worldPosMouse.y,
	"time", 2.0f)
    );
}

https://i.gyazo.com/7733f34434f8f44553d9f338522702dd.gif

  • RotateUpdate : 指定した角度に回転させる。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldPosMouse = Camera.main.ScreenToWorldPoint(targetPos);

    iTween.RotateUpdate(this.gameObject, iTween.Hash(
	"rotation", worldPosMouse * 20, 
	"time", 2.0f)
    );
}

https://i.gyazo.com/1f21018f4e6722b99776df104545da19.gif

iTween.Punch◯◯

一定の力を与えた後、ゆらゆらと揺れながらオブジェクトを元に戻すメソッドです。
(バネの様な弾力のあるアニメーションに使えたりします)

  • PunchPosition : 揺れながら元の位置へ戻る。
iTween.PunchPosition(this.gameObject, iTween.Hash(
	"y", 4,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 3.0f)
);

https://i.gyazo.com/663e7354121479b08f2e1895e884a67d.gif

  • PunchRotation : 揺れながら元の回転に戻る。

iTween.PunchRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/ac2fed759f216535d6daed430a7f4017.gif

  • PunchScale : 揺れながら元の大きさに戻る。(ポヨポヨ感がいい感じ!)
iTween.PunchScale(this.gameObject, iTween.Hash(
	"x", 3,
	"y", 3,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/cec456c8fad5947beae9a2c25339c489.gif

iTween.Shake◯◯

ランダムの値を加算して揺らすことができるメソッドです。
(ブルブル震える様なアニメーションに使うことができます)
例えば、ダメージを受けた時にUIを揺らす、カメラを揺らす等...。

  • ShakePosition : 震えた移動をさせる。
iTween.ShakePosition(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/9a9977934af963a1550623f6f7c6b7ce.gif

  • ShakeRotation : 震えた回転をさせる。
iTween.ShakeRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/675038a5f1b54ba3dcc3deab9a4ff48f.gif

  • ShakeScale : 震えた拡大と縮小をさせる。
iTween.ShakeScale(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/c0143ff2c1a32bc70de80eae559f21bf.gif

iTween.ValueTo

こちらのメソッドは少し特殊な使い方ができます。
ValueToメソッド単体では何も変化させませんが、指定した開始値と終了値の間を時間経過によって変化させます。
なので、独自の処理を実行することもできます。
例で、色を変えるサンプルを作ってみました。

// 色を変えたい UI image を選択
[SerializeField] Image image;

void Start()
{
	iTween.ValueTo(this.gameObject, iTween.Hash(
		"from", Color.red,
		"to", Color.blue,
		"delay", 1, // delayは確認用に少し遅らせているだけです。
		"time", 2.0f, 
		"onupdatetarget", this.gameObject, 
		"onupdate", "OnUpdateColor")
	);
}

void OnUpdateColor(Color color)
{
	image.color = color;
}

https://i.gyazo.com/9bb0e6fa4b4e7509846be7bcb30d767f.gif

まとめ

アニメーションメソッドを一通り、紹介致しました。
とても便利なものが多いので、覚えておくととても役に立ちます!
iTweenの理解をもっと深めて、使えるものは使っていきたいですね。

現在、「Unity UI デザインの教科書」という本を読んでいるので、次回はUI関連の記事が書けたらと思います。

uGUIではじめるUnity UIデザインの教科書-Unity5対応

uGUIではじめるUnity UIデザインの教科書-Unity5対応