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

提供: LWF Wiki
移動: 案内、 検索
(→‎Tweenクラスとは?)
(→‎トゥイーンを連結する chain())
 
(2人の利用者による、間の33版が非表示)
1行: 1行:
 
==Tweenクラスとは?==
 
==Tweenクラスとは?==
−
LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを反映することができます。<br/>
+
LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを設定することができます。<br/>
−
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなります。<br/>
+
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなってしまうので注意してください<br/>
 +
<br/>
 +
※このTweenクラスで行われる処理は、処理が重い等でフレームスキップがかかった場合、に若干ズレが発生する時があるなど<br/>
 +
確実にLWFのフレームと動機しているわけではありません。確実に処理を同期させたい場合はenterFrame処理を使用してください<br/>
 +
<br/>
 +
※tween.js<br/>
 +
https://github.com/sole/tween.js/
  
 
==トゥイーンを設定する==
 
==トゥイーンを設定する==
 +
Movieインスタンス、またはBitmapClipインスタンスにTweenを設定することが出来ます。
 +
下記はサンプルになります。
 +
//Movieのtweenを生成
 +
var tween = <Movieインスタンス>.addTween()
 +
 +
//x:100、y:100の位置に30フレームかけて移動する
 +
tween.to({x:100, y:100},30)
 +
 +
//トゥイーンを開始する
 +
tween.start();
 +
addTween()を使用するとtweenインスタンスが返ってきます。<br/>
 +
<br/>
 +
また、メソッドチェーンが使えるので下記のように書いても問題ありません。<br/>
 +
//tween メソッドチェーン指定
 +
var tween = <Movieインスタンス>.addTween()
 +
    .to({x:100},30)
 +
    .start();
 +
.to()の第1引数はトゥイーン完了後のプロパティをオブジェクト型に入れて指定します。<br/>
 +
第2引数はトゥイーン完了にかかる時間をフレーム単位で指定します。<br/>
 +
<br/>
 +
また、to()の第1引数では複数の到着点を設定することができます。<br/>
 +
下記のように設定した場合、(x:200,y:50)の地点を通って(x:100,y:100)の地点に来る移動を30フレームかけて行う。<br/>
 +
という形になります。<br/>
 +
//(x:200,y:50)の地点を通って(x:100,y:100)へ
 +
<Movieインスタンス>.addTween()
 +
    .to({x:[200,50],y:[100,100]},30)
 +
    .start();
 +
==トゥイーンを停止したい==
 +
設定したtweenを止める場合、複数の方法があります。<br/>
 +
*指定したトゥイーンだけ停止する<br/>
 +
*Movieに適用されているtweenを全て停止する<br/>
 +
*LWF内で設定されているtweenを全て停止する<br/>
 +
<br/>
 +
【指定したトゥイーンだけ停止する】<br/>
 +
Movieに対してtweenを設定した時に戻り値としてtweenインスタンスが返ってきます。<br/>
 +
そのtweenインスタンスを使うことで、指定したtweenだけ停止することができます。<br/>
 +
【サンプル】
 +
//トゥイーンを設定
 +
var tween = <Movieインスタンス>.addTween()
 +
    .to({x:100},100)
 +
    .start();
 +
 +
//トゥイーンを停止
 +
tween.stop();
 +
<br/>
 +
【Movieに適用されているtweenを全て停止する】
 +
Movieに適用されているtweenを全て停止することができます。<br/>
 +
【サンプル】
 +
//トゥイーンを設定
 +
<Movieインスタンス>.addTween()
 +
    .to({x:100},100)
 +
    .start();
 +
 +
//Movieに適用されているtweenを停止
 +
<Movieインスタンス>.stopTweens();
 +
<br/>
 +
【LWF内で設定されているtweenを全て停止する】
 +
LWF内で適用されているtweenを全て停止することができます。<br/>
 +
【サンプル】
 +
//トゥイーンを設定
 +
<Movieインスタンス>.addTween()
 +
    .to({x:100},100)
 +
    .start();
 +
 +
//LWFに適用されているtweenを停止
 +
<LWFインスタンス>.stopTweens();
 +
 
==イージングを設定する==
 
==イージングを設定する==
 +
トゥイーンにはイージングをかけることが出来ます。
 +
下記がサンプルになります。
 +
//イージングを設定したtween
 +
var tween = <Movieインスタンス>.addTween()
 +
    .easing(Tween.Easing.Quadratic.Out)
 +
    .to({x:100},30)
 +
    .start();
 +
.easing()の引数に反映したいイージングを設定します。<br/>
 +
<br/>
 +
※イージングの種類について<br/>
 +
http://sole.github.io/tween.js/examples/03_graphs.html<br/>
 +
LWFで使用する場合は Tween.Easing.(イージング名)　と書きます。<br/>
 +
<br/>
 +
※イージングの挙動を見たい<br/>
 +
http://www.robertpenner.com/easing/easing_demo.html
 +
 
==ディレイを設定する==
 
==ディレイを設定する==
−
==トゥイーンを連結する==
+
ディレイをかけることで、少し間を置いてからトゥイーンをかけたりすることが出来ます。<br/>
 +
下記はサンプルです。<br/>
 +
//30フレーム待ってからトゥイーン
 +
<Movieインスタンス>.addTween()
 +
    .delay(30)
 +
    .to({rotation:180},30)
 +
    .start();
 +
.delay()の引数に入れた値の分だけ待ってからトゥイーンを実行します。
 +
==トゥイーンにカーブをかけたい==
 +
通常は<br/>
 +
.to({x:[200,50],y:100},30)<br/>
 +
と指定した場合、直線軌道で移動しますが、カーブ(ベジェ曲線)をかけて移動させることも出来ます。<br/>
 +
下記はサンプルです。<br/>
 +
//カーブを描きながらx:100,y:100に移動する
 +
<Movieインスタンス>.addTween()
 +
    .interpolation(Tween.Interpolation.Bezier)
 +
    .to({x:[200,50],y:100},30)
 +
    .start();
 +
interpolation()の引数に反映したい軌道の補間方法を設定します。<br/>
 +
<br/>
 +
※補間の種類<br/>
 +
http://sole.github.io/tween.js/examples/06_array_interpolation.html<br/>
 +
LWFで使用する場合 Tween.Interpolation.(補間名)　となります。<br/>
 +
 
 +
==トゥイーンを連結する chain()==
 +
複数のトゥイーンを連結し、トゥイーン1が完了してからトゥイーン2を実行する。<br/>
 +
と、いったことが出来ます。<br/>
 +
下記はサンプルになります。<br/>
 +
//x:100に移動してから、y:100に移動
 +
し、180度移転する
 +
<Movieインスタンス>.addTween()
 +
    .to({x:100},30)
 +
    .start()
 +
    //y:100に移動するtweenを生成し連結
 +
    .chain()
 +
    .to({y:100},30)
 +
    //180度回転するtweenを生成し連結
 +
    .chain() 
 +
    .to({rotation:180},30);
 +
 
 +
 
 +
複数のトゥイーンを続けて再生する方法<br />
 +
<br />
 +
・1つ目のトゥイーンを定義<br />
 +
・1つ目のトゥイーンを.start()で実行する<br />
 +
・.chain()<br />
 +
・2つ目のトゥイーンを定義<br />
 +
<br />
 +
※ 2つ目以降のトゥイーンは、.start()を実行しなくても再生される<br />
 +
 
 
==トゥイーンが走っている間、関数を実行する==
 
==トゥイーンが走っている間、関数を実行する==
 +
トゥイーン処理が走っている間に指定した関数を実行させることが出来ます。<br/>
 +
下記はサンプルになります。<br/>
 +
//トゥイーン中の座標を表示する
 +
<Movieインスタンス>.addTween()
 +
    .to({x:200},30)
 +
    .onUpdate(function(){
 +
        console.log(this.x);
 +
    })
 +
    .start();
 +
トゥイーンが動いている間 .onUpdate()の引数に入れた関数が毎フレーム実行され続けます。<br/>
 +
chain()などで連結したtweenには反映されません。反映したい場合は別途指定してください。<br/>
 +
onUpdate()で実行される関数の this はトゥイーンを設定したMovieインスタンスになります。<br/>
 +
<br/>
 +
※onUpdate内で別のtweenにstopをかけたりといったTweenのAPI動作は行わないでください。<br/>
 +
 
==トゥイーンが完了したときに関数を実行する==
 
==トゥイーンが完了したときに関数を実行する==
 +
トゥイーン処理が完了した時に、指定した関数を実行することが出来ます。<br/>
 +
下記はサンプルです。<br/>
 +
//トゥイーンが完了したらアラートを表示
 +
<Movie.インスタンス>.addTween()
 +
    .to({x:100},30)
 +
    .onComplete(function(){
 +
        alert("complete! x=" + this.x);
 +
    })
 +
    .start();
 +
トゥイーンが完了した時に onComplete() の引数に入れた関数が実行されます。<br/>
 +
chain()などで連結したtweenには反映されません。反映したい場合は別途指定してください。<br/>
 +
onComplete()で実行される関数の this はトゥイーンを設定したMovieインスタンスになります。<br/>
 +
<br/>
 +
※onComplete内で別のtweenにstopをかけたりといったTweenのAPI動作は行わないでください。<br/>

2016年7月28日 (木) 14:59時点における最新版

目次

Tweenクラスとは?

LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを設定することができます。
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなってしまうので注意してください

※このTweenクラスで行われる処理は、処理が重い等でフレームスキップがかかった場合、に若干ズレが発生する時があるなど
確実にLWFのフレームと動機しているわけではありません。確実に処理を同期させたい場合はenterFrame処理を使用してください

※tween.js
https://github.com/sole/tween.js/

トゥイーンを設定する

Movieインスタンス、またはBitmapClipインスタンスにTweenを設定することが出来ます。 下記はサンプルになります。 

//Movieのtweenを生成
var tween = <Movieインスタンス>.addTween()

//x:100、y:100の位置に30フレームかけて移動する
tween.to({x:100, y:100},30)

//トゥイーンを開始する
tween.start();

addTween()を使用するとtweenインスタンスが返ってきます。

また、メソッドチェーンが使えるので下記のように書いても問題ありません。

//tween メソッドチェーン指定
var tween = <Movieインスタンス>.addTween()
    .to({x:100},30)
    .start();

.to()の第1引数はトゥイーン完了後のプロパティをオブジェクト型に入れて指定します。
第2引数はトゥイーン完了にかかる時間をフレーム単位で指定します。

また、to()の第1引数では複数の到着点を設定することができます。
下記のように設定した場合、(x:200,y:50)の地点を通って(x:100,y:100)の地点に来る移動を30フレームかけて行う。
という形になります。

//(x:200,y:50)の地点を通って(x:100,y:100)へ
<Movieインスタンス>.addTween()
    .to({x:[200,50],y:[100,100]},30)
    .start();

トゥイーンを停止したい

設定したtweenを止める場合、複数の方法があります。

  • 指定したトゥイーンだけ停止する
  • Movieに適用されているtweenを全て停止する
  • LWF内で設定されているtweenを全て停止する


【指定したトゥイーンだけ停止する】
Movieに対してtweenを設定した時に戻り値としてtweenインスタンスが返ってきます。
そのtweenインスタンスを使うことで、指定したtweenだけ停止することができます。

【サンプル】
//トゥイーンを設定
var tween = <Movieインスタンス>.addTween()
    .to({x:100},100)
    .start();

//トゥイーンを停止
tween.stop();


【Movieに適用されているtweenを全て停止する】 Movieに適用されているtweenを全て停止することができます。

【サンプル】
//トゥイーンを設定
<Movieインスタンス>.addTween()
    .to({x:100},100)
    .start();

//Movieに適用されているtweenを停止
<Movieインスタンス>.stopTweens();


【LWF内で設定されているtweenを全て停止する】 LWF内で適用されているtweenを全て停止することができます。

【サンプル】
//トゥイーンを設定
<Movieインスタンス>.addTween()
    .to({x:100},100)
    .start();

//LWFに適用されているtweenを停止
<LWFインスタンス>.stopTweens();

イージングを設定する

トゥイーンにはイージングをかけることが出来ます。 下記がサンプルになります。 

//イージングを設定したtween
var tween = <Movieインスタンス>.addTween()
   .easing(Tween.Easing.Quadratic.Out) 
   .to({x:100},30)
   .start();

.easing()の引数に反映したいイージングを設定します。

※イージングの種類について
http://sole.github.io/tween.js/examples/03_graphs.html
LWFで使用する場合は Tween.Easing.(イージング名)　と書きます。

※イージングの挙動を見たい
http://www.robertpenner.com/easing/easing_demo.html

ディレイを設定する

ディレイをかけることで、少し間を置いてからトゥイーンをかけたりすることが出来ます。
下記はサンプルです。

//30フレーム待ってからトゥイーン
<Movieインスタンス>.addTween()
    .delay(30)
    .to({rotation:180},30)
    .start();

.delay()の引数に入れた値の分だけ待ってからトゥイーンを実行します。

トゥイーンにカーブをかけたい

通常は
.to({x:[200,50],y:100},30)
と指定した場合、直線軌道で移動しますが、カーブ(ベジェ曲線)をかけて移動させることも出来ます。
下記はサンプルです。

//カーブを描きながらx:100,y:100に移動する
<Movieインスタンス>.addTween()
    .interpolation(Tween.Interpolation.Bezier)
    .to({x:[200,50],y:100},30)
    .start();

interpolation()の引数に反映したい軌道の補間方法を設定します。

※補間の種類
http://sole.github.io/tween.js/examples/06_array_interpolation.html
LWFで使用する場合 Tween.Interpolation.(補間名)　となります。

トゥイーンを連結する chain()

複数のトゥイーンを連結し、トゥイーン1が完了してからトゥイーン2を実行する。
と、いったことが出来ます。
下記はサンプルになります。

//x:100に移動してから、y:100に移動

し、180度移転する 

<Movieインスタンス>.addTween()
    .to({x:100},30)
    .start()
    //y:100に移動するtweenを生成し連結
    .chain()
    .to({y:100},30)
    //180度回転するtweenを生成し連結
    .chain()  
    .to({rotation:180},30);


複数のトゥイーンを続けて再生する方法

・1つ目のトゥイーンを定義
・1つ目のトゥイーンを.start()で実行する
・.chain()
・2つ目のトゥイーンを定義

※ 2つ目以降のトゥイーンは、.start()を実行しなくても再生される

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

トゥイーン処理が走っている間に指定した関数を実行させることが出来ます。
下記はサンプルになります。

//トゥイーン中の座標を表示する
<Movieインスタンス>.addTween()
    .to({x:200},30)
    .onUpdate(function(){
        console.log(this.x);
    })
    .start();

トゥイーンが動いている間 .onUpdate()の引数に入れた関数が毎フレーム実行され続けます。
chain()などで連結したtweenには反映されません。反映したい場合は別途指定してください。
onUpdate()で実行される関数の this はトゥイーンを設定したMovieインスタンスになります。

※onUpdate内で別のtweenにstopをかけたりといったTweenのAPI動作は行わないでください。

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

トゥイーン処理が完了した時に、指定した関数を実行することが出来ます。
下記はサンプルです。

//トゥイーンが完了したらアラートを表示
<Movie.インスタンス>.addTween()
    .to({x:100},30)
    .onComplete(function(){
        alert("complete! x=" + this.x);
    })
    .start();

トゥイーンが完了した時に onComplete() の引数に入れた関数が実行されます。
chain()などで連結したtweenには反映されません。反映したい場合は別途指定してください。
onComplete()で実行される関数の this はトゥイーンを設定したMovieインスタンスになります。

※onComplete内で別のtweenにstopをかけたりといったTweenのAPI動作は行わないでください。

「http://lwf-users.org/index.php?title=Tweenクラス&oldid=1557」から取得