UnityのiTweenを試してみる その4 Shake系

株式会社ZOOA(ゾーア)のzobです。[<a href="https://twitter.com/ZOB_By_Zooa_Inc">@twitter<a>]<a href="https://zob.zooa.co.jp/?utm_source=qiita&utm_medium=social">
<img src=https://qiita-image-store.s3.amazonaws.com/0/252896/fda6f773-e8f8-f220-04a0-85cdbef56201.jpeg "logo.png">
弊社はフリーランスや、個人事業主、給料UPを目指している方向けに高単価求人案件配信サイト(ZOB)も運営しておりますので是非ご覧ください!
</a>
[前回](https://qiita.com/zob_by_zooa_inc/items/cc5dba551a0470475b5e)に引き続き、iTweenを色々と試してみました。

<a href="https://www.assetstore.unity3d.com/#!/content/84?aid=1101lIAt"><img src="https://api.assetstore.unity3d.com/affiliate/embed/package/84/icon" alt="iTween" width="128" height="128" /></a>

今回はShake系のメソッドを試してみました。

検証で使用したUnityバージョンは以下の通りです。
Unity2018.1.0f2

# Shake系メソッド

Shake系メソッドは、簡単に言えばオブジェクトを揺らすアニメーションができるメソッドです。
FPSでダメージを受けたときにカメラを揺らしたい、ということがスクリプト一つで簡単に実現可能です。

## iTween.ShakePosition

ShakePositionは、指定した値の範囲内で揺らすように移動するアニメーションです。

```ruby:
iTween.ShakePosition(gameObject, iTween.Hash("x", 5f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/3f6630cf-42f8-e7ca-d4e5-11d29b908c5a.gif)

値はX,Y,Zの３つを指定できます。

```ruby:
iTween.ShakePosition(gameObject, iTween.Hash("x", 5f, "y", 5f, "z", 5f));
```

X,Y,Zは一つしか指定できないようです。以下のように複数指定するとエラーが発生します。

```ruby:
iTween.ShakePosition(gameObject, iTween.Hash("x", 5f, "x", 10f));
```

Add系のように、連続でアニメーションさせることが可能のようです。
以下のサンプルコードを試してみます。

```ruby:
iTween.ShakePosition(gameObject, iTween.Hash("x", 5f, "time", 3f));
iTween.ShakePosition(gameObject, iTween.Hash("x", 10f, "y", 10f, "time", 3f, "delay", 1.5f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/208df150-9ca2-0ace-05b8-9d35b54e327a.gif)

最初左右に揺れた後、上下に激しく揺れます。

## iTween.ShakeRotation

ShakeRotationは角度を指定した値の範囲で揺らします。

```ruby:
iTween.ShakeRotation(gameObject, iTween.Hash("x", 360f));
```

以下のサンプルコードを試してみました。

```ruby:
iTween.ShakeRotation(gameObject, iTween.Hash("x", 360f, "y", 360f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/248711be-0f52-3c60-898c-1f37eef7cf08.gif)

値はX,Y,Zの３つを指定できます。

```ruby:
iTween.ShakeRotation(gameObject, iTween.Hash("x", 360f, "y", 360f, "z", 360f));
```

Add系のように、連続でアニメーションさせることが可能のようです。
以下のサンプルコードを試してみます。

```ruby:
iTween.ShakeRotation(gameObject, iTween.Hash("x", 90f, "time", 3f));
iTween.ShakeRotation(gameObject, iTween.Hash("x", 360f, "y", 360f, "time", 3f, "delay", 1.5f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/e8386dc5-6320-bc7d-45a1-30081d0a6675.gif)

## iTween.ShakeScale

ShakePositionは、指定した値の範囲内で揺らすように拡大・縮小するアニメーションです。
オブジェクトがビヨーン、ビヨーンと伸び縮むする感じです。

```ruby:
iTween.ShakeScale(gameObject, iTween.Hash("x", 3f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/966a15db-0d87-80bf-3b56-5f6f89c302f6.gif)

値はX,Y,Zの３つを指定できます。

```ruby:
iTween.ShakeScale(gameObject, iTween.Hash("x", 3f, "y", 3f, "z", 3f));
```

Add系のように、連続でアニメーションさせることが可能のようです。
以下のサンプルコードを試してみます。

```ruby:
iTween.ShakeScale(gameObject, iTween.Hash("x", 3f, "time", 3f));
iTween.ShakeScale(gameObject, iTween.Hash("x", 3f, "y", 3f, "time", 3f, "delay", 1.5f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/535c30b2-1424-8dee-e4a0-661e38fdefa9.gif)

# まとめ
Shake系を一通り試してみました。揺らすアニメーションがここまで簡単に実装できるのはすごくいいです！　色々と使えそうなメソッドです！

次回もiTweenの検証結果を書いていきます！

・技術検証協力　荻野雄季([Twitter](https://twitter.com/YuukiOgino), [Qiita](https://qiita.com/YuukiOgino))

---

**UnityのiTweenを試してみる** 
[その1 Move系](https://qiita.com/zob_by_zooa_inc/items/cbe68726a158cb2166e5)
[その2 Rotate系](https://qiita.com/zob_by_zooa_inc/items/cc5dba551a0470475b5e)
[その3 Scale系](https://qiita.com/zob_by_zooa_inc/items/0632b292515c67e80b22)
その4 Shake系←今ココ
[その5 Punch系](https://qiita.com/zob_by_zooa_inc/items/c6723e5124955ba0224a)

---


株式会社ZOOA(ゾーア)
弊社はフリーランスや、個人事業主に特化したSES案件共有サイト(<a href="https://zob.zooa.co.jp/?utm_source=qiita&utm_medium=social">ZOB</a>)も運営しておりますので給料UPを目指している方は是非こちらもご覧ください!

<div style="vertical-align:middle;">
<a href="https://zob.zooa.co.jp/?utm_source=qiita&utm_medium=social">
<img src=https://qiita-image-store.s3.amazonaws.com/0/252896/387a8320-3b5c-add3-d0e6-7c3e9933b504.png "logo.png">
</a>
</div>

---