[Starlingでアニメーションの編集]

印刷

Starlingでアニメーションの編集

詳細な入力項目を表示

ページタイトル( 空白で自動設定 ):
ページ並び順( 0-9 小数可標準:1 ):
ページ別名(複数は[改行]で区切る):

ページ内容:

*基本 [#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);

編集の要約:

Q & A 認証: ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q: 「名古屋」の読みがな？(ひらがなで)
A:

お名前: タイムスタンプを変更しない

テキスト整形のルールを表示する^[1]

添付ファイル^[2]:

Links list

(This host) = https://njf.jp

^{(This host)}/cms/modules/xpwiki/?cmd=edit&help=true&page=Starling%E3%81%A7%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=list&refer=Starling%E3%81%A7%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

Starlingでアニメーション の編集 :: NJF Wiki

Starlingでアニメーション の編集

Links list

Starlingでアニメーションの編集 :: NJF Wiki

Starlingでアニメーションの編集