2: 2015-05-25 (月) 07:34:53 njf[6] [7] [8] | 3: 2015-05-31 (日) 16:35:15 njf[6] [9] [10] | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | Starlingの基本機能だけで軽量で簡単にアニメーションがつくれますが、複数アニメーションを連結する簡単な機能などはありません。(出来ないわけではありません。) | + | *基本 [#h695bb3d] |
- | たとえばフェードインして少し待って平行移動して縮小するとか、複数のアニメーションを連結したりするような、ある程度複雑なアニメーションは専用のライブラリ(Tween24など)を使った方が楽です。 | + | |
- | また、Tween関係の一般的なライブラリ全般に言えますが、基本的に時間指定で実行されるので、フレーム単位で動かすゲームと同期がずれる場合があります。(Tween24など自分でアップデート出来るライブラリもあります) | + | Starlingの基本機能だけで軽量で簡単にアニメーションがつくれるが、複数アニメーションを連結する簡単な機能などはない。(出来ないわけではない。) |
+ | たとえばフェードインして少し待って平行移動して縮小するとか、複数のアニメーションを連結したりするような、ある程度複雑なアニメーションは専用のライブラリ(Tween24など)を使った方が楽。 | ||
- | よって、Starlingの機能のみのアニメーションの使いどころは、フェイドイン、フェイドアウトなど、UIのちょっとしたアニメーションとかになります。 | + | また、Tween関係の一般的なライブラリ全般に言えるが、基本的に時間指定で実行されるので、フレーム単位で動かすゲームと同期がずれる場合がある。(Tween24など自分でアップデート出来るライブラリもある) |
- | たとえば、一番よく使うアニメーションの一つ、フェイドインは以下のようになります。 | + | よって、Starlingの機能のみのアニメーションの使いどころは、フェイドイン、フェイドアウトなど、UIのちょっとしたアニメーションとかになる。 |
+ | |||
+ | たとえば、一番よく使うアニメーションの一つ、フェイドインは以下のようになる。 | ||
Line 18: | Line 20: | ||
フェイドインしながら同時に大きさを変えたい場合は | フェイドインしながら同時に大きさを変えたい場合は | ||
tween.scaleTo(2); | tween.scaleTo(2); | ||
- | などとします。 | + | を加える。 |
- | TweenのonCompleteプロパティに終了時の処理を入れることが出来ます。これによって連続してアニメーションする事も出来ますが、tween系ライブラリに比べるとちょっとめんどくさいですね。 | + | TweenのonCompleteプロパティに終了時の処理を入れることが出来る。これによって連続してアニメーションする事も出来るが、tween系ライブラリに比べると面倒。 |
- | tween.onComplete = function() { | + | tween.onComplete = function():void { |
//end | //end | ||
}; | }; | ||
- | 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); | ||
- | 他にもいろいろな機能があり手軽に使えるのは良いところです。 | + | 他にもいろいろな機能があり手軽に使えるのと、比較的軽量なのは良いところだが、複雑な物を作りたいなら専用のライブラリ使った方が良いかも知れない。 |
- | しかし、複雑な物を作りたいなら専用のライブラリ使った方が良いかも知れません。 | + | |
参考: | 参考: | ||
Line 41: | Line 42: | ||
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); |
(This host) = https://njf.jp