「Tweenクラス」の版間の差分
提供: LWF Wiki
(→イージングを設定する) |
(→Tweenクラスとは?) |
||
| 2行: | 2行: | ||
LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを反映することができます。<br/> | LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを反映することができます。<br/> | ||
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなります。<br/> | タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなります。<br/> | ||
| + | <br/> | ||
| + | ※tween.js<br/> | ||
| + | https://github.com/sole/tween.js/ | ||
==トゥイーンを設定する== | ==トゥイーンを設定する== | ||
2013年10月21日 (月) 15:02時点における版
目次 |
Tweenクラスとは?
LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを反映することができます。
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなります。
※tween.js
https://github.com/sole/tween.js/
トゥイーンを設定する
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
※イージングの挙動を見たい
http://www.robertpenner.com/easing/easing_demo.html
