【Unity】UGUIをiTweenを使ってアニメーション

Unityの新しいUIシステムであるUGUIについて勉強をしてみました。 今回は「アニメーション」についてです。 UnityのAssetStoreにある「iTween」を使ってみました。 Unity5.01を利用しています。

iTween

「ITween」は非常に簡単に利用ができます。UIだけではなく他のオブジェクトにも利用ができます。 ネームスペースの記述など必要ありません。 [c] iTween.MoveTo(image,iTween.Hash(

 "position",new Vector3(100,0,0),  "easeType",iTween.EaseType.easeInOutSine

));

[/c]

「iTween」で重要なのが[Hash]です。 このHashを利用して、どのようにアニメーションをさせるのかを記載します。

MoveTo、MoveBy

基本となる「移動」をiTweenでどのように実装するか考えて行きます。

MoveToはグローバルなPosition移動ができます。 [c] iTween.MoveTo(image,iTween.Hash(

//移動先を指定します。  "position",new Vector3(100,0,0),    //または、x,y,z個別にも指定ができます。   "x",100, "y",100, "z",100

//どのように動かすかも指定します。 "easeType",iTween.EaseType.linear )); [/c]

MoveByは相対的な移動が可能になります。 [c] //positionは利用できません。 iTween.MoveTo(image,iTween.Hash(

"x",100,
"easeType",iTween.EaseType.linear

)); [/c]

easeTypeでアニメーションがどのような速度で動くかを指定できます。 詳しくはこちらを参考に。 iTween : EaseType_demo

繰り返し - loopType

アニメーションを繰り返して再生をすることができます。 [c] "loopType",pingPong, [/c]

  • none : ループしない
  • loop : 繰り返す
  • pingPong : 繰り返す(バック再生)

アニメーションの時間 - time

アニメーションの時間はtimeで設定ができます。 [c] "time",3.0f, [/c]

アニメーションの開始時間 - delay

アニメーションの開始時間はdelayで設定ができます。 [c] "delay",1.0f, [/c]

アニメーションスタート時にメソッドを呼び出す - onstart

Hashにonstartを指定すると、アニメーションスタート時にメソッドを呼び出すことができます。 [c] "position",new Vector3(100,20,0), "onstart","StartAction", "onstarttarget",gameObject, //メソッドを記載しているオブジェクトを指定する必要あり。

void StartAction(){

Debug.Log("start");

}

[/c]

アニメーション終了時にメソッドを呼び出す - oncomplete

onstartとは逆に、アニメーションが終わった時にメソッドを呼び出す時にはoncompleteを利用します。 [c] "oncomplete","EndAction", "oncompletetarget",gameObject,

void EndAction(){

Debug.Log("end");

} [/c]

カープを描く移動 - path

直線的ではなく、カーブ(ベジェ)を描いて移動する際にはpathを利用します。 [c]

Vector3[] paths = new Vector3[3]; paths[0] = new Vector3(40,100,0); paths[1] = new Vector3(60,-100,0); paths[2] = new Vector3(200,50,0);

iTween.MoveTo(image,iTween.Hash(

"path",_paths,

)); [/c]

ただ、直感的にカーブを作るのが難しいので何か良いやり方がないのかと思っています。

Hash

[iTween.Hash]を使わなくてもこのような形でも利用できます。 [c] Hashtable hash = new Hashtable(); hash.Add("x",100); iTween.MoveTo(image,_hash); [/c]

【参考】

Unity3D - 【Unity】iTweenでハマったことメモ - Qiita

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダードUnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード
池和田有輔,時村良平

エムディエヌコーポレーション
売り上げランキング : 7352

Amazonで詳しく見る