TweenJS for Everything

1. TweenJS for Everything 2013/03/15 yomotsu@PixelGrid, Inc. Friday, March 15, 13

2. Who? 小山田晃浩 FrontEnd Engineer at PixelGrid Twitter@yomotsu Friday, March 15, 13

3. TweenJS? Friday, March 15, 13

4. Friday, March 15, 13

6. • アニメーション animation • トゥイーン tween • イージング easing Friday, March 15, 13

7. TweenJS with EaselJS demo Friday, March 15, 13

8. Usage 1. Tween インスタンスを取得 get a Tween instance 2. トゥイーン、ディレイ、コールバックを追加 then, add tween, delay or callback as needed Friday, March 15, 13

9. 1. get a Tween instance createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( behaves as "new createjs.Tween()" this 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!' ); } ); Friday, March 15, 13

10. 1. get a Tween instance createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) EaselJS DisplayObject .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!' ); } ); Friday, March 15, 13

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

12. 2. chain, chain, and chain! createjs.Tween.get( nyan ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: target y: 300 }, 1000, createjs.Ease.quadOut ) 100, value for this tween .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

13. 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 ) duration .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

14. 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 ) easing .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

15. 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 delay 2000ms ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

16. 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 ) multiple values .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

17. 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 ) callback .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); Friday, March 15, 13

18. conclusion 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!' ); } ); Friday, March 15, 13

19. conclusion createjs.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!' ); } ); Friday, March 15, 13

20. How dose it work? Friday, March 15, 13

21. 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 Friday, March 15, 13

35. TweenJS はオブジェクトの値を変更しているだけ TweenJS is just changing value of the object Friday, March 15, 13

36. TweenJS can be used with other libs Friday, March 15, 13

37. TweenJS with Paper.js demo Friday, March 15, 13

38. TweenJS with three.js demo Friday, March 15, 13

39. TweenJS with SVG DOM demo Friday, March 15, 13

40. TweenJS can get along with others! Friday, March 15, 13

41. learn APIs http://www.createjs.com/Docs/ TweenJS/modules/TweenJS.html Friday, March 15, 13

42. conclusion Friday, March 15, 13

43. 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 を読みこまなくてはいけない Friday, March 15, 13

44. in addition... Friday, March 15, 13

45. tween.js https://github.com/sole/tween.js/ Friday, March 15, 13

46. tween.js var 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(); Friday, March 15, 13

47. tween.js demo Friday, March 15, 13

48. jQuery can also do that similar var 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' ); } ); Friday, March 15, 13

49. jQuery can also do that similar demo Friday, March 15, 13

50. conclusion Friday, March 15, 13

51. 難度機能依存 easily features depending on TweenJS 簡単! 充実! EaselJSに依存充実! tween.js すこし複雑なし! (特にevent) 必要に応じて jQuery jQuery 簡単! それなり Easing Plugin Friday, March 15, 13

53. 購読開始から30日間無料 (月額840円) Friday, March 15, 13

54. CodeGrid www.codegrid.net Friday, March 15, 13

55. Question? @yomotsu Friday, March 15, 13

TweenJS for Everything

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)