Starlingでアニメーション のソース :: NJF Wiki

• 差分^[1] を表示
• Starlingでアニメーション^[2] へ行く。

*基本 [#h695bb3d]

Starlingの基本機能だけで軽量で簡単にアニメーションがつくれるが、複数アニメーションを連結する簡単な機能などはない。（出来ないわけではない。）
たとえばフェードインして少し待って平行移動して縮小するとか、複数のアニメーションを連結したりするような、ある程度複雑なアニメーションは専用のライブラリ(Tween24など)を使った方が楽。

また、Tween関係の一般的なライブラリ全般に言えるが、基本的に時間指定で実行されるので、フレーム単位で動かすゲームと同期がずれる場合がある。(Tween24など自分でアップデート出来るライブラリもある)

よって、Starlingの機能のみのアニメーションの使いどころは、フェイドイン、フェイドアウトなど、UIのちょっとしたアニメーションとかになる。

たとえば、一番よく使うアニメーションの一つ、フェイドインは以下のようになる。


 var img:Image = new Image(assets.getTexture(IMG_NAME));
 img.alpha = 0;
 addChild(img);
 var tween:Tween = new Tween(img, 0.2);
 tween.fadeTo(1);
 Starling.current.juggler.add(tween);

フェイドインしながら同時に大きさを変えたい場合は
 tween.scaleTo(2);
を加える。

TweenのonCompleteプロパティに終了時の処理を入れることが出来る。これによって連続してアニメーションする事も出来るが、tween系ライブラリに比べると面倒。

 tween.onComplete = function():void {
 	//end 
 };

nextTweenプロパティに次のtweenを入れて、連続して再生することも出来る。
 tween.nextTween = tween2

しかし、結局tweenの初期化を別にしなければならないので、onComplete 内で次のTweenを定義するのとほとんど手間は変わらない。


Tweenの初期化で第三引数にイージングを指定することも出来る。

 var tween:Tween = new Tween(img, 0.2, Transitions.EASE_IN);

Tweenインスタンスを再利用することも出来る。

 tween.reset(img, 0.2, Transitions.EASE_IN);

他にもいろいろな機能があり手軽に使えるは良いが、複雑な物を作りたいなら専用のライブラリ使った方が良いかも知れない。

速度については一般のTweenライブラリでは独立にタイマーなどを設定しており、一方こちらはStarlingの処理と共通化しているので、おそらくこちらの方が速い。

参考：
http://cuaoar.jp/2011/12/tween-starling.html

http://wiki.starling-framework.org/manual/animation

*例 [#v0ca0ef2]

フェードイン・アウトの繰り返し

 var image:Image = new Image(yourTexture);
 var tween:Tween=new Tween(image,0.2);

 private function onComplete():void {
 	tween.reset(image, 0.2);
 	tween.fadeTo(1 - image.alpha);
 	tween.onComplete = onComplete;
 	Starling.current.juggler.add(tween);
 }

使うときは
 onComplete();

とすると、アニメーションが終わるたびにimageのアルファが0なら1に、1なら0へのtweenを定義し直す事になる。
止めるときは
 Starling.current.juggler.remove(tween);

• Starlingでアニメーション のバックアップ一覧^[4]
• Starlingでアニメーション のバックアップソース(No. All)
  • 1: 2015-05-25 (月) 06:25:31^[5] njf^[6]
  • 2: 2015-05-25 (月) 07:34:53^[7] njf^[6]
  • 3: 2015-05-31 (日) 16:35:15^[8] njf^[6]
  • 4: 2015-06-03 (水) 09:12:47^[9] njf^[6]
  • 現: 2015-06-03 (水) 22:02:06 njf^[6]