2BLOG

Google Codeに公開されているTweenerの安定バージョンが1.31.70になっています。

APIリファレンスも更新されて、新しく追加されたSpecial Propertiesのドキュメントが追加されました。この中からCurveModifiersクラス_bezierの覚え書きです。

CurveModifiersクラスで追加されるSpecial Propertiesの_bezierを使うと、ベジェ曲線に沿ってプロパティの変更が可能です。以下ちょっと回りくどい覚え書きに…。

x = 50、y = 100に位置するcircleのx座標を x = 50 から x = 350 まで移動させるなら、

Tweener.addTween( circle, {
	x:350,
	transition:"linear",
	time:3
})

サンプル1

でOKですよね、で、これをx座標が移動している間に、y = 200 に移動して最終地点では元のy = 100 に戻したい。かつなめらかに動かしたいなんて時に以下みたいな力技があります。

Tweener.addTween( circle, {
	x:350,
	transition:"linear",
	time:3
})
Tweener.addTween( circle, {
	y:200,
	transition:"easeOutSine",
	time:1.5
})
Tweener.addTween( circle, {
	y:100,
	transition:"easeInSine",
	time:1.5,
	delay:1.5
})

サンプル2

_bezierを使うとこんな風にできます。

Tweener.addTween( circle, {
	x:350,
	y:100,
	_bezier:{x:200,y:300},
	transition:"linear",
	time:3
});

サンプル3

_bezierにはベジェ曲線のコントロールポイントとなる値を渡します。

_bezierに渡す値を変更するプロパティと同じプロパティを持つオブジェクトにすればよい感じです。配列にして渡せばコントロールポイントを複数設定可能。

Tweener.addTween( circle, {
	x:350,
	y:100,
	_bezier:[ ...コントロールポイントの配列... ],
	transition:"linear",
	time:3
});

transitionはtransitionで動くので_bezierを使うと自由の高いモーションになりますね。

サンプル4