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構築の新スタンダード 池和田有輔,時村良平 エムディエヌコーポレーション 売り上げランキング : 7352 Amazonで詳しく見る |