TweenJS for Everything                                 2013/03/15 yomotsu@PixelGrid, Inc.Friday, March 15, 13
Who?       小山田 晃浩       FrontEnd Engineer at PixelGrid       Twitter@yomotsuFriday, March 15, 13
TweenJS?Friday, March 15, 13
Friday, March 15, 13
Friday, March 15, 13
• アニメーション                       animation                       • トゥイーン                       tween                       ...
TweenJS with EaselJS                       demoFriday, March 15, 13
Usage       1. Tween インスタンスを取得               get a Tween instance       2. トゥイーン、ディレイ、コールバックを追加               then, add tw...
1. get a Tween instance      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait( be...
1. get a Tween instance      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait( 20...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
2. chain, chain, and chain!      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
conclusion      createjs.Tween.get( nyan )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait( 2000 )      .to...
conclusion      createjs.Tween.get( nyan, { loop : true } )      .to( { x: 300 }, 1000, createjs.Ease.quadOut )      .wait...
How dose it work?Friday, March 15, 13
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
How dose it work?       1. Tween のインスタンスを作ると...                When you created an instance of Tween...       2. TweenJS が...
TweenJS は       オブジェクトの値を変更しているだけ       TweenJS is just changing value of the objectFriday, March 15, 13
TweenJS can be used    with other libsFriday, March 15, 13
TweenJS with Paper.js                       demoFriday, March 15, 13
TweenJS with three.js                       demoFriday, March 15, 13
TweenJS with SVG DOM                       demoFriday, March 15, 13
TweenJS can get along       with others!Friday, March 15, 13
learn APIs                       http://www.createjs.com/Docs/                       TweenJS/modules/TweenJS.htmlFriday, M...
conclusionFriday, March 15, 13
conclusion       • TweenJS はオブジェクトの値を変えているだけ           TweenJS is just changing value of an object       • いろいろな表示系ライブラリーと...
in addition...Friday, March 15, 13
tween.js                       https://github.com/sole/tween.js/Friday, March 15, 13
tween.js      var obj = {        x : 100,        y : 100      }      var t1 = new TWEEN.Tween( obj )      .to( { x: 300 },...
tween.js                       demoFriday, March 15, 13
jQuery can also do that similar      var obj = {         x : 100,         y : 100      };      $.when( $( obj ).animate( {...
jQuery can also do that similar                       demoFriday, March 15, 13
conclusionFriday, March 15, 13
難度         機能             依存                        easily    features      depending on       TweenJS          簡単!       ...
Friday, March 15, 13
購読開始から30日間無料                         (月額840円)Friday, March 15, 13
CodeGrid                       www.codegrid.netFriday, March 15, 13
Question?                       @yomotsuFriday, March 15, 13
Upcoming SlideShare
Loading in...5
×

TweenJS for Everything

901

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
901
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

TweenJS for Everything

  1. 1. TweenJS for Everything 2013/03/15 yomotsu@PixelGrid, Inc.Friday, March 15, 13
  2. 2. Who? 小山田 晃浩 FrontEnd Engineer at PixelGrid Twitter@yomotsuFriday, March 15, 13
  3. 3. TweenJS?Friday, March 15, 13
  4. 4. Friday, March 15, 13
  5. 5. Friday, March 15, 13
  6. 6. • アニメーション animation • トゥイーン tween • イージング easingFriday, March 15, 13
  7. 7. TweenJS with EaselJS demoFriday, March 15, 13
  8. 8. Usage 1. Tween インスタンスを取得 get a Tween instance 2. トゥイーン、ディレイ、コールバックを追加 then, add tween, delay or callback as neededFriday, March 15, 13
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. How dose it work?Friday, March 15, 13
  21. 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 valueFriday, March 15, 13
  22. 22. 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 valueFriday, March 15, 13
  23. 23. 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 valueFriday, March 15, 13
  24. 24. 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 valueFriday, March 15, 13
  25. 25. 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 valueFriday, March 15, 13
  26. 26. 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 valueFriday, March 15, 13
  27. 27. 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 valueFriday, March 15, 13
  28. 28. 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 valueFriday, March 15, 13
  29. 29. 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 valueFriday, March 15, 13
  30. 30. 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 valueFriday, March 15, 13
  31. 31. 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 valueFriday, March 15, 13
  32. 32. 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 valueFriday, March 15, 13
  33. 33. 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 valueFriday, March 15, 13
  34. 34. 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 valueFriday, March 15, 13
  35. 35. TweenJS は オブジェクトの値を変更しているだけ TweenJS is just changing value of the objectFriday, March 15, 13
  36. 36. TweenJS can be used with other libsFriday, March 15, 13
  37. 37. TweenJS with Paper.js demoFriday, March 15, 13
  38. 38. TweenJS with three.js demoFriday, March 15, 13
  39. 39. TweenJS with SVG DOM demoFriday, March 15, 13
  40. 40. TweenJS can get along with others!Friday, March 15, 13
  41. 41. learn APIs http://www.createjs.com/Docs/ TweenJS/modules/TweenJS.htmlFriday, March 15, 13
  42. 42. conclusionFriday, March 15, 13
  43. 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. 44. in addition...Friday, March 15, 13
  45. 45. tween.js https://github.com/sole/tween.js/Friday, March 15, 13
  46. 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. 47. tween.js demoFriday, March 15, 13
  48. 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. 49. jQuery can also do that similar demoFriday, March 15, 13
  50. 50. conclusionFriday, March 15, 13
  51. 51. 難度 機能 依存 easily features depending on TweenJS 簡単! 充実! EaselJSに依存 充実! tween.js すこし複雑 なし! (特にevent) 必要に応じて jQuery jQuery 簡単! それなり Easing PluginFriday, March 15, 13
  52. 52. Friday, March 15, 13
  53. 53. 購読開始から30日間無料 (月額840円)Friday, March 15, 13
  54. 54. CodeGrid www.codegrid.netFriday, March 15, 13
  55. 55. Question? @yomotsuFriday, March 15, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×