「Tweenクラス」の版間の差分

2013年10月21日 (月) 15:02時点における版

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();

@@ 33行: / 33行: @@
 ※イージングの種類について<br/>
 http://sole.github.io/tween.js/examples/03_graphs.html<br/>
+※イージングの挙動を見たい<br/>
+http://www.robertpenner.com/easing/easing_demo.html
 ==ディレイを設定する==