Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TweenJS for Everything

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for yomotsu yomotsu
March 15, 2013
Programming
210
0

TweenJS for Everything

Avatar for yomotsu

yomotsu

March 15, 2013

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
870
PBR in three.js
Avatar for yomotsu yomotsu
1
1.2k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1.1k
IE to Edge
Avatar for yomotsu yomotsu
1
400
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.5k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
590
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.9k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
13k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.9k

Other Decks in Programming

See All in Programming
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
750
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
120
New "Type" system on PicoRuby
Avatar for pocke pocke
1
790
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
270
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.6k
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
520
OSもどきOS
Avatar for Sora Arakawa arkw
0
480
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
100
メソッドのジェネリクスでGoの夢は広がるか？ / Kyoto.go #65
Avatar for utagawa kiki utgwkk
3
660
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
20
7k
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
Avatar for j_lee_inst j_lee
0
110
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
330

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.6k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
170
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
170
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.5k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
440
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
800
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
71
40k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k

Transcript

  1. 5XFFO+4GPS&WFSZUIJOH 2013/03/15 yomotsu@PixelGrid, Inc.

  2. খࢁాߊߒ 'SPOU&OE&OHJOFFSBU1JYFM(SJE 5XJUUFS!ZPNPUTV 8IP

  3. 5XFFO+4

  4. None
  5. None

  6. w Ξχϝʔγϣϯ BOJNBUJPO w τΡΠʔϯ UXFFO w Πʔδϯά FBTJOH

  7. 5XFFO+4XJUI&BTFM+4 EFNP

  8. 6TBHF  5XFFOΠϯελϯεΛऔಘ HFUB5XFFOJOTUBODF  τΡΠʔϯɺσΟϨΠɺίʔϧόοΫΛ௥Ճ UIFO BEEUXFFO EFMBZPSDBMMCBDLBTOFFEFE

  9. HFUB5XFFOJOTUBODF 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!' ); } ); this behaves as "new createjs.Tween()"

  10. HFUB5XFFOJOTUBODF 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!' ); } ); EaselJS DisplayObject

  11. DIBJO DIBJO BOEDIBJO 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

  12. DIBJO DIBJO BOEDIBJO 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!' ); } ); target value for this tween

  13. DIBJO DIBJO BOEDIBJO 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!' ); } ); duration

  14. DIBJO DIBJO BOEDIBJO 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!' ); } ); easing

  15. DIBJO DIBJO BOEDIBJO 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!' ); } ); 2000ms delay

  16. DIBJO DIBJO BOEDIBJO 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!' ); } ); multiple values

  17. DIBJO DIBJO BOEDIBJO 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!' ); } ); callback

  18. DPODMVTJPO 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!' ); } );

  19. DPODMVTJPO 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!' ); } );

  20. )PXEPTFJUXPSL

  21. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  22. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  23. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  24. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  25. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  26. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  27. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  28. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  29. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  30. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  31. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  32. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  33. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  34. )PXEPTFJUXPSL  5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO  5XFFO+4͕ొ࿥͞ΕͨΦϒδΣΫτͷ஋Λมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU  &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO

    &BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF

  35. 5XFFO+4͸ ΦϒδΣΫτͷ஋Λมߋ͍ͯ͠Δ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGUIFPCKFDU

  36. 5XFFO+4DBOCFVTFE XJUIPUIFSMJCT

  37. 5XFFO+4XJUI1BQFSKT EFNP

  38. 5XFFO+4XJUIUISFFKT EFNP

  39. 5XFFO+4XJUI47(%0. EFNP

  40. 5XFFO+4DBOHFUBMPOH XJUIPUIFST

  41. MFBSO"1*T IUUQXXXDSFBUFKTDPN%PDT 5XFFO+4NPEVMFT5XFFO+4IUNM

  42. DPODMVTJPO

  43. DPODMVTJPO w 5XFFO+4͸ΦϒδΣΫτͷ஋Λม͍͑ͯΔ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGBOPCKFDU w ͍Ζ͍ΖͳදࣔܥϥΠϒϥϦʔͱ૊Έ߹ΘͤՄೳ 5XFFO+4DBOCFVTFEJODPNCJOBUJPOXJUITFWFSBMMJCT w ͨͩ͠ɺ5XFFO+4͸&BTFM+4ʹґଘ͍ͯ͠Δ 5XFFO+4JTEFQFOEFOUPO&BTFM+4

    5XFFO+4ͷػೳ͚ͩΛར༻ͨͯ͘͠΋&BTFM+4ΛಡΈ͜·ͳͯ͘͸͍͚ͳ͍

  44. JOBEEJUJPO

  45. UXFFOKT IUUQTHJUIVCDPNTPMFUXFFOKT

  46. UXFFOKT 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();

  47. UXFFOKT EFNP

  48. K2VFSZDBOBMTPEPUIBUTJNJMBS 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' ); } );

  49. K2VFSZDBOBMTPEPUIBUTJNJMBS EFNP

  50. DPODMVTJPO

  51. ೉౓ FBTJMZ ػೳ GFBUVSFT ґଘ EFQFOEJOHPO 5XFFO+4 UXFFOKT K2VFSZ ؆୯

    ॆ࣮ &BTFM+4ʹґଘ ͢͜͠ෳࡶ ॆ࣮ ಛʹFWFOU ͳ͠ ؆୯ ͦΕͳΓ ඞཁʹԠͯ͡K2VFSZ &BTJOH1MVHJO
  52. None

  53. ߪಡ։͔࢝Β೔ؒແྉ ֹ݄ԁ

  54. $PEF(SJE XXXDPEFHSJEOFU

  55. 2VFTUJPO !ZPNPUTV