TweenJS for Everything

TweenJS for Everything

2013/03/15 yomotsu@PixelGrid, Inc.

Friday, March 15, 13

小山田晃浩

FrontEnd Engineer at PixelGrid

Twitter@yomotsu

Who?


TweenJS?




•アニメーションanimation

•トゥイーンtween

•イージングeasing


TweenJS with EaselJS

demo


http://yomotsu.net/blog/assets/2013-03-15-createjs/demo1/index.html


Usage

1. Tween インスタンスを取得get a Tween instance

2. トゥイーン、ディレイ、コールバックを追加then, add tween, delay or callback as needed


1. get a Tween instancecreatejs.Tween.get( nyan ).to( { x: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).call( function() { console.log( 'done!' );} );

this behaves as "new createjs.Tween()"


1. get a Tween instancecreatejs.Tween.get( nyan ).to( { x: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).call( function() { console.log( 'done!' );} );

EaselJS DisplayObject


2. chain, chain, and chain!createjs.Tween.get( nyan ).to( { x: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).call( function() { console.log( 'done!' );} );

adding tween



target value for this tween



duration



easing



2000ms delay



multiple values



callback


conclusioncreatejs.Tween.get( nyan ).to( { x: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).call( function() { console.log( 'done!' );} );


conclusioncreatejs.Tween.get( nyan, { loop : true } ).to( { x: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ).wait( 2000 ).call( function() { console.log( 'done!' );} );


How dose it work?


How dose it work?

1. Tween のインスタンスを作ると...When you created an instance of Tween...

2. TweenJS が登録されたオブジェクトの値を変更TweenJS will change value of applied object

3. EaselJS がオブジェクトを表示then, EaselJS will render the object using changed value


How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





How dose it work?





TweenJS はオブジェクトの値を変更しているだけTweenJS is just changing value of the object


TweenJS can be usedwith other libs


TweenJS with Paper.js

demo




TweenJS with three.js

demo




TweenJS with SVG DOM

demo




TweenJS can get alongwith others!


learn APIs

http://www.createjs.com/Docs/TweenJS/modules/TweenJS.html






conclusion


conclusion

• TweenJS はオブジェクトの値を変えているだけTweenJS is just changing value of an object

• いろいろな表示系ライブラリーと組み合わせ可能TweenJS can be used in combination with several libs

• ただし、TweenJS は EaselJS に依存しているTweenJS is dependent on EaselJS TweenJSの機能だけを利用したくても EaselJS を読みこまなくてはいけない


in addition...


tween.js

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




tween.jsvar obj = { x : 100, y : 100}

var t1 = new TWEEN.Tween( obj ).to( { x: 300 }, 1000 ).easing( TWEEN.Easing.Quadratic.Out );

var t2 = new TWEEN.Tween( obj ).to( { x: 100, y : 300 }, 1000 ).easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 );

var t3 = new TWEEN.Tween( obj ).to( { x: 100, y : 100 }, 1000 ).easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 ).onComplete( function () { console.log( 'done!' );} );

t1.chain( t2 );t2.chain( t3 );

t1.start();


tween.js

demo




jQuery can also do that similarvar obj = { x : 100, y : 100};

$.when( $( obj ).animate( { x : 300 }, 1000 ) ).then( $( obj ).delay( 2000 ) ).then( $( obj ).animate( { x : 100, y : 300 }, 1000 ) ).then( $( obj ).delay( 2000 ) ).then( $( obj ).animate( { x : 100, y : 100 }, 1000 ) ).then( $( obj ).delay( 2000 ) ).then( function () { console.log( 'done' );} );


jQuery can also do that similar

demo




conclusion


難度easily

機能features

依存depending on

TweenJS

tween.js

jQuery

簡単! 充実! EaselJSに依存

すこし複雑充実!(特にevent) なし!

簡単! それなり必要に応じて jQuery Easing Plugin



購読開始から30日間無料

(月額840円)


CodeGrid

www.codegrid.net


http://www.codegrid.net

http://www.codegrid.net

Question?

@yomotsu


Documents

￼TweenJS for Everything

TweenJS for Everything