「Tweenクラス」の版間の差分
提供: LWF Wiki
(→イージングを設定する) |
(→イージングを設定する) |
||
30行: | 30行: | ||
.to({x:100},30) | .to({x:100},30) | ||
.start(); | .start(); | ||
+ | <br/> | ||
+ | ※イージングの種類について<br/> | ||
+ | http://sole.github.io/tween.js/examples/03_graphs.html<br/> | ||
==ディレイを設定する== | ==ディレイを設定する== |
2013年10月21日 (月) 15:01時点における版
目次 |
Tweenクラスとは?
LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを反映することができます。
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなります。
トゥイーンを設定する
Movieインスタンス、またはBitmapClipインスタンスにTweenを設定することが出来ます。 下記はサンプルになります。
//Movieのtweenを生成 var tween = <Movieインスタンス>.addTween() //x:100の位置に30フレームかけて移動する tween.to({x:100},30) //トゥイーンを開始する tween.start();
addTween()を使用するとtweenインスタンスが返ってきます。
また、メソッドチェーンが使えるので下記のように書いても問題ありません。
//tween メソッドチェーン指定 var tween = <Movieインスタンス>.addTween() .to({x:100},30) .start();
イージングを設定する
トゥイーンにはイージングをかけることが出来ます。 下記がサンプルになります。
//イージングを設定したtween var tween = <Movieインスタンス>.addTween() .easing(Tween.Easing.Elastic.Out) .to({x:100},30) .start();
※イージングの種類について
http://sole.github.io/tween.js/examples/03_graphs.html