1: 2015-05-25 (月) 06:25:31 njf |
現: 2015-06-03 (水) 22:02:06 njf |
- | Starlingの基本機能だけで軽量で簡単にアニメーションがつくれますが、複数アニメーションを連結する簡単な機能などはありません。(出来ないわけではありません。) | + | *基本 [#h695bb3d] |
- | たとえばフェードインして少し待って平行移動して縮小するとか、複数のアニメーションを連結したりするような、ある程度複雑なアニメーションは専用のライブラリ(Tween24など)を使った方が楽です。 | + | |
| | | |
- | また、Tween関係の一般的なライブラリ全般に言えますが、基本的に時間指定で実行されるので、フレーム単位で動かすゲームと同期がずれる場合があります。 | + | Starlingの基本機能だけで軽量で簡単にアニメーションがつくれるが、複数アニメーションを連結する簡単な機能などはない。(出来ないわけではない。) |
| + | たとえばフェードインして少し待って平行移動して縮小するとか、複数のアニメーションを連結したりするような、ある程度複雑なアニメーションは専用のライブラリ(Tween24など)を使った方が楽。 |
| | | |
- | よって、Starlingの機能のみのアニメーションの使いどころは、フェイドイン、フェイドアウトなど、UIのちょっとしたアニメーションとかになります。 | + | また、Tween関係の一般的なライブラリ全般に言えるが、基本的に時間指定で実行されるので、フレーム単位で動かすゲームと同期がずれる場合がある。(Tween24など自分でアップデート出来るライブラリもある) |
| | | |
- | たとえば、一番よく使うアニメーションの一つ、フェイドインは以下のようになります。 | + | よって、Starlingの機能のみのアニメーションの使いどころは、フェイドイン、フェイドアウトなど、UIのちょっとしたアニメーションとかになる。 |
| + | |
| + | たとえば、一番よく使うアニメーションの一つ、フェイドインは以下のようになる。 |
| | | |
| | | |
| フェイドインしながら同時に大きさを変えたい場合は | | フェイドインしながら同時に大きさを変えたい場合は |
| tween.scaleTo(2); | | tween.scaleTo(2); |
- | などとします。 | + | を加える。 |
| | | |
- | TweenのonCompleteプロパティに終了時の処理を入れることが出来ます。これによって連続してアニメーションする事も出来ますが、tween系ライブラリに比べるとちょっとめんどくさいですね。 | + | TweenのonCompleteプロパティに終了時の処理を入れることが出来る。これによって連続してアニメーションする事も出来るが、tween系ライブラリに比べると面倒。 |
| | | |
- | tween.onComplete = function() { | + | tween.onComplete = function():void { |
| //end | | //end |
| }; | | }; |
| | | |
- | Tweenの初期化で第三引数にイージングを指定することも出来ます。 | + | nextTweenプロパティに次のtweenを入れて、連続して再生することも出来る。 |
| + | tween.nextTween = tween2 |
| + | |
| + | しかし、結局tweenの初期化を別にしなければならないので、onComplete 内で次のTweenを定義するのとほとんど手間は変わらない。 |
| + | |
| + | |
| + | Tweenの初期化で第三引数にイージングを指定することも出来る。 |
| | | |
| var tween:Tween = new Tween(img, 0.2, Transitions.EASE_IN); | | var tween:Tween = new Tween(img, 0.2, Transitions.EASE_IN); |
| | | |
- | Tweenインスタンスを再利用することも出来ます。 | + | Tweenインスタンスを再利用することも出来る。 |
| | | |
| tween.reset(img, 0.2, Transitions.EASE_IN); | | tween.reset(img, 0.2, Transitions.EASE_IN); |
| | | |
- | 他にもいろいろな機能があり手軽に使えるのは良いところです。 | + | 他にもいろいろな機能があり手軽に使えるは良いが、複雑な物を作りたいなら専用のライブラリ使った方が良いかも知れない。 |
- | しかし、複雑な物を使いたいなら専用のライブラリ使った方が良いかも知れません。 | + | |
| + | 速度については一般のTweenライブラリでは独立にタイマーなどを設定しており、一方こちらはStarlingの処理と共通化しているので、おそらくこちらの方が速い。 |
| | | |
| 参考: | | 参考: |
| http://cuaoar.jp/2011/12/tween-starling.html | | http://cuaoar.jp/2011/12/tween-starling.html |
| + | |
| http://wiki.starling-framework.org/manual/animation | | 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); |