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

提供: LWF Wiki
移動: 案内検索
(トゥイーンを設定する)
(イージングを設定する)
23行: 23行:
  
 
==イージングを設定する==
 
==イージングを設定する==
 +
トゥイーンにはイージングをかけることが出来ます。
 +
下記がサンプルになります。
 +
//イージングを設定したtween
 +
var tween = <Movieインスタンス>.addTween()
 +
    .easing(Tween.Easing.Elastic.Out)
 +
    .to({x:100},30)
 +
    .start();
 +
 
==ディレイを設定する==
 
==ディレイを設定する==
 
==トゥイーンを連結する==
 
==トゥイーンを連結する==
 
==トゥイーンが走っている間、関数を実行する==
 
==トゥイーンが走っている間、関数を実行する==
 
==トゥイーンが完了したときに関数を実行する==
 
==トゥイーンが完了したときに関数を実行する==

2013年10月18日 (金) 19:44時点における版

目次

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

ディレイを設定する

トゥイーンを連結する

トゥイーンが走っている間、関数を実行する

トゥイーンが完了したときに関数を実行する