各種Transitionのサンプル
tweenerではtransitionプロパティを指定することで属性値の変化量を制御することができます。値を線形に変化させるLiner以外にも、組み込みでさまざまなTransitionが利用可能です。
ということで、各種Transitionの動作サンプルを作ってみました。
→各種Transitionの動作サンプル
- スプライトの移動を利用可能なTransitionを使って行います。
- ステージのクリックでアニメーション開始です。
さらに、registerTransition()を使ってカスタムのTransitionを登録できたりするらしい。ふむ。よくできてるなー。
なお、サンプルのソースは以下のとおりです。
package { import flash.display.*; import flash.text.*; import flash.events.MouseEvent; import caurina.transitions.Tweener; public class TransitionSample extends Sprite { public function TransitionSample(){ ([ "linear", "easeinquad", "easeoutquad", "easeinoutquad", "easeoutinquad", "easeincubic", "easeoutcubic", "easeinoutcubic", "easeoutincubic", "easeinquart", "easeoutquart", "easeinoutquart", "easeoutinquart", "easeinquint", "easeoutquint", "easeinoutquint", "easeoutinquint", "easeinsine", "easeoutsine", "easeinoutsine", "easeoutinsine", "easeincirc", "easeoutcirc", "easeinoutcirc", "easeoutincirc", "easeinexpo", "easeoutexpo", "easeinoutexpo", "easeoutinexpo", "easeinelastic", "easeoutelastic", "easeinoutelastic", "easeoutinelastic", "easeinback", "easeoutback", "easeinoutback", "easeoutinback", "easeinbounce", "easeoutbounce", "easeinoutbounce", "easeoutinbounce" ]).forEach( function( item:*,i:int,array:Array ):void { var circle:Sprite = new Sprite(); addChild(circle); var g:Graphics = circle.graphics; g.beginFill( 0xFF4444 ); g.drawCircle( 5, i*20+10, 5 ); g.endFill(); stage.addEventListener(MouseEvent.CLICK, function(ev:flash.events.MouseEvent):void { circle.x = 10; Tweener.addTween( circle, {x:500, time:2, transition:item}); }); var text:TextField = new TextField(); text.x = 10; text.y = i*20; text.width = 200; text.height = 15; text.text = item; addChild(text); }); graphics.lineStyle( 1, 0x999999 ); graphics.moveTo( 5, 0 ) graphics.lineTo( 5, 800 ) graphics.moveTo( 505, 0 ) graphics.lineTo( 505, 800 ) } } }